Django开发微信小程序之逆波兰计算器（一）整体介绍

刺骨的言语ヽ痛彻心扉 2022-05-22 06:09 240阅读 0赞

近端时间接触了微信小程序，决定编写一个迷你计算器的小程序试试水，不试不知道，一试爽到爆。总体而言，微信自带的小程序开发工具，用起来还挺方便的。网上用django开发小程序的完整文章也比较少，于是打算做个笔记。

# 小程序的结构 #

整个小程序的结构非常简单，就两个页面：**index**和**cal**，其中index页面是欢迎页面，用于获取用户授权；而cal页面就是计算器的主体页面。当用户同意授权后，将自动从欢迎页面跳转到计算页面。

![70][]         ![70 1][]

# 开发流程 #

1.  在[微信公众平台][Link 1]申请小程序开发，需要填写一些个人信息，获取小程序的**APPID**，网上教程很多
2.  下载微信开发者工具，建立小程序项目，并阅读小程序[开发文档][Link 2]。
3.  编写小程序的前端页面和后端代码
4.  在本机测试小程序功能
5.  在服务器上部署小程序，由于小程序必须使用HTTPS，所以你还要为你的域名申请HTTPS证书
6.  部署完成且运行正常后，就可以提交小程序代码进行审核，审核通过小程序就可以上线了

# 小程序的功能 #

本小程序是一个简易的计算器，**可以对正负数，小数进行加减乘除计算，历史记录可以存储3条表达式，用户可以直接点击历史记录自动输入之前计算过的表达式**，总体上基于逆波兰算法编写，功能并不复杂。

# 页面布局 #

对于计算器的页面布局，主要使用**CSS3的弹性盒子布局**，可以参考我的笔记https://blog.csdn.net/zjw\_python/article/details/80532823。整体上分为3个部分，**显示框区域，数字符号按钮区域和历史记录框部分**，代码如下：  
html

<view id="welcome"><text>欢迎你：{
       {nickname}}</text></view>
    <view class="cal">
      <view class="input_box"><text>{
       {value}}</text></view>
      <view class="button_area" bindtap='clickButton'>
        <view class="row">
          <button class="row1-item button_item" data-value="7" hover-stay-time='120'>7</button>
          <button class="row1-item button_item" data-value="8" hover-stay-time='120'>8</button>
          <button class="row1-item button_item" data-value="9" hover-stay-time='120'>9</button>
          <button class="row1-item button_item" data-value="/" hover-stay-time='120'>/</button>
          <button class="row1-item button_item" data-value="back" hover-stay-time='120'>←</button>
        </view>
        <view class="row">
          <button class="row1-item button_item" data-value="4" hover-stay-time='120'>4</button>
          <button class="row1-item button_item" data-value="5" hover-stay-time='120'>5</button>
          <button class="row1-item button_item" data-value="6" hover-stay-time='120'>6</button>
          <button class="row1-item button_item" data-value="*" hover-stay-time='120'>*</button>
          <button class="row1-item button_item" data-value="." hover-stay-time='120'>.</button>
        </view>
        <button class="button_item equal" data-value="=" hover-stay-time='120'>=</button>
        <view class="row short">
          <button class="row1-item button_item" data-value="1" hover-stay-time='120'>1</button>
          <button class="row1-item button_item" data-value="2" hover-stay-time='120'>2</button>
          <button class="row1-item button_item" data-value="3" hover-stay-time='120'>3</button>
          <button class="row1-item button_item" data-value="-" hover-stay-time='120'>-</button>
        </view>
        <view class="row short">
          <button class="row1-item button_item" data-value="0" hover-stay-time='120'>0</button>
          <button class="row1-item button_item brace" data-value="(" hover-stay-time='120'>(</button>
          <button class="row1-item button_item brace" data-value=")" hover-stay-time='120'>)</button>
          <button class="row1-item button_item" data-value="+" hover-stay-time='120'>+</button>
        </view>
      </view>
      <view class="history">
        <view id="text_box">
          <text decode='true'> 历 史 记 录</text>
        </view>
        <button id="slide" bindtap="toggle">▼</button>
        <view id="box" class="{
       {first_click?'show':'hide'}} {
       {state?'open':'close'}}">
          <view id="item_list" bindtap="clickhistory">
            <view wx:for="{
       {history}}" data-index="{
       {index}}">{
       {item}}</view>
          </view>
        </view>
      </view>
    </view>

css

/* pages/cal/cal.wxss */
    #welcome{
      font-weight: bold;
      font-style: italic;
      padding: 10rpx;
    }
    .cal{
      margin: 20% 10%;
      margin-bottom: 0;
      height:700rpx;
      border: 1px solid #ddd;
      background-color: #F5FFFA;
      border-radius: 5px;
    }
    
    .input_box{
      height:100rpx;
      width: 90%;
      margin: 30rpx auto;
      font-size: 50rpx;
      line-height: 100rpx;
      text-align: right;
      border: 1px solid #ddd;
      background-color: white;
      border-radius: 3px;
      padding-right: 10rpx;
      overflow: auto;
      white-space: nowrap;
    }
    
    .button_area,.history{
      width:90%;
      margin: 0 auto;
    }
    
    .row{
      display: flex;
      height:80rpx;
      width:100%;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
    
    .short{
      width:79%;
    }
    
    .button_item{
      height:80rpx;
      width:80rpx;
      font-size:60rpx;
      background-color: white;
      text-align: center;
      padding: 0;
      line-height:80rpx;
      border-radius: 3px;
      margin: 0;
    }
    
    .brace{
      font-size: 55rpx;
      line-height: 65rpx;
      font-weight: 30rpx;
    }
    
    .equal{
      float: right;
      display: inline-block;
      height:180rpx;
      line-height: 180rpx;
    }
    
    .history{
      font-size: 60rpx;
      background-color: white;
      border: 1px solid #ddd;
      border-radius: 3px;
      position: relative;
    }
    
    #text_box{
      width: 80%;
      height: 100%;
      display: inline-block;
      text-align: center;
    }
    
    #slide{
      width: 80rpx;
      height: 86rpx;
      display: inline-block;
      float: right;
      line-height: 80rpx;
      text-align: center;
      font-size: 35rpx;
      padding: 0;
      border-radius: 0px !important;
    }
    
    #slide::after{
      border: 0px;
      border-radius: 0px !important;
      border-left: 1px solid #ddd;
    }
    
    .button-hover{
        background-color: #B0B0B0;
    }
    
    #box{
      width: 100%;
      border-top: 1px solid #ddd;
      overflow: hidden;
      height: 0;
      animation-fill-mode: forwards;
    }
    
    #item_list{
        background-color: white;
        width: 100%;
    }
    
    #item_list view{
        text-align: right;
        overflow: auto;
        white-space: nowrap;
    }
    
    @keyframes slidedown{
        from {
            height: 0;
        }
        to {
            height: 240rpx;
        }
    }
    
    @keyframes slideup{
        from {
            height: 240rpx;
        }
        to {
            height: 0;
        }
    }
    
    .open{
        animation: slidedown 1s;
    }
    
    .close{
        animation: slideup 1s; 
    }
    
    .hide{
        display: none;
    }
    
    .show{
        display: block;
    }

**关于历史记录的下拉菜单的制作方法可以参照我的这篇笔记：https://blog.csdn.net/zjw\_python/article/details/80720427**

--------------------

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]

[70]: https://img-blog.csdn.net/20180617155814828?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220522/bab307c64668485b9d47d5a21d0dd5a7.png
[Link 1]: https://mp.weixin.qq.com/
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]: /images/20220522/99c8db9c29af4888be91c58ffc8653b0.png