近端时间接触了微信小程序,决定编写一个迷你计算器的小程序试试水,不试不知道,一试爽到爆。总体而言,微信自带的小程序开发工具,用起来还挺方便的。网上用django开发小程序的完整文章也比较少,于是打算做个笔记。
小程序的结构
整个小程序的结构非常简单,就两个页面: index和 cal,其中index页面是欢迎页面,用于获取用户授权;而cal页面就是计算器的主体页面。当用户同意授权后,将自动从欢迎页面跳转到计算页面。开发流程
- 在微信公众平台申请小程序开发,需要填写一些个人信息,获取小程序的APPID,网上教程很多
- 下载微信开发者工具,建立小程序项目,并阅读小程序开发文档。
- 编写小程序的前端页面和后端代码
- 在本机测试小程序功能
- 在服务器上部署小程序,由于小程序必须使用HTTPS,所以你还要为你的域名申请HTTPS证书
- 部署完成且运行正常后,就可以提交小程序代码进行审核,审核通过小程序就可以上线了
小程序的功能
本小程序是一个简易的计算器,可以对正负数,小数进行加减乘除计算,历史记录可以存储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'> 历 史 记 录</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