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

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

小程序的结构

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

       

开发流程

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

小程序的功能

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

页面布局

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

<!--pages/cal/cal.wxml-->
<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'>&nbsp;历&nbsp;史&nbsp;记&nbsp;录</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

---

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