原文链接：https://mp.weixin.qq.com/s/gYF7GjTRpeZNoKPAPI9aXA
1
概述
前几日QQ群里的朋友问我有没有计算器小程序案例，今天我们说下小程序计算器，然后就分享这样的小案例。希望对大家有所帮助
不多说了，二当家要上图来啦！
快去拿个小板凳，坐等更多更新
注意：如若需要请联系微信geekxz
wxml
<view class="content">
<view class="layout-top">
<view class="screen">
{{screenData}}
</view>
</view>
<view class="layout-bottom">
<view class="btnGroup">
<view class="item orange" bindtap="clickBtn" id="{{idc}}">С</view>
<view class="item orange" bindtap="clickBtn" id="{{idb}}">←</view>
<!--<view class="item orange" bindtap="clickBtn" id="{{idt}}">＋/－</view>-->
<view class="item orange iconBtn" bindtap="history">
<icon type="{{iconType}}" color="{{iconColor}}" class="icon" size="25"/>
</view>
<view class="item orange" bindtap="clickBtn" id="{{idadd}}">＋</view>
</view>
<view class="btnGroup">
<view class="item blue" bindtap="clickBtn" id="{{id9}}">9</view>
<view class="item blue" bindtap="clickBtn" id="{{id8}}">8</view>
<view class="item blue" bindtap="clickBtn" id="{{id7}}">7</view>
<view class="item orange" bindtap="clickBtn" id="{{idj}}">－</view>
</view>
<view class="btnGroup">
<view class="item blue" bindtap="clickBtn" id="{{id6}}">6</view>
<view class="item blue" bindtap="clickBtn" id="{{id5}}">5</view>
<view class="item blue" bindtap="clickBtn" id="{{id4}}">4</view>
<view class="item orange" bindtap="clickBtn" id="{{idx}}">×</view>
</view>
<view class="btnGroup">
<view class="item blue" bindtap="clickBtn" id="{{id3}}">3</view>
<view class="item blue" bindtap="clickBtn" id="{{id2}}">2</view>
<view class="item blue" bindtap="clickBtn" id="{{id1}}">1</view>
<view class="item orange" bindtap="clickBtn" id="{{iddiv}}">÷</view>
</view>
<view class="btnGroup">
<view class="item blue zero" bindtap="clickBtn" id="{{id0}}">0</view>
<view class="item blue" bindtap="clickBtn" id="{{idd}}">.</view>
<view class="item orange" bindtap="clickBtn" id="{{ide}}">＝</view>
</view>
</view>
</view>
js
Page({
data:{
idb:"back",
idc:"clear",
idt:"toggle",
idadd:"＋",
id9:"9",
id8:"8",
id7:"7",
idj:"－",
id6:"6",
id5:"5",
id4:"4",
idx:"×",
id3:"3",
id2:"2",
id1:"1",
iddiv:"÷",
id0:"0",
idd:".",
ide:"＝",
screenData:"0",
operaSymbo:{"＋":"+","－":"-","×":"*","÷":"/",".":"."},
lastIsOperaSymbo:false,
iconType:'waiting_circle',
iconColor:'white',
arr:[],
logs:[]
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
clickBtn:function(event){
var id = event.target.id;
if(id == this.data.idb){ //退格←
var data = this.data.screenData;
if(data == "0"){
return;
}
data = data.substring(0,data.length-1);
if(data == "" || data == "－"){
data = 0;
}
this.setData({"screenData":data});
this.data.arr.pop();
}else if(id == this.data.idc){ //清屏C
this.setData({"screenData":"0"});
this.data.arr.length = 0;
}else if(id == this.data.idt){ //正负号+/-
var data = this.data.screenData;
if(data == "0"){
return;
}
var firstWord = data.charAt(0);
if(data == "－"){
data = data.substr(1);
this.data.arr.shift();
}else{
data = "－" + data;
this.data.arr.unshift("－");
}
this.setData({"screenData":data});
}else if(id == this.data.ide){ //等于＝
var data = this.data.screenData;
if(data == "0"){
return;
}
//eval是js中window的一个方法，而微信页面的脚本逻辑在是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能再脚本中使用window，也无法在脚本中操作组件
//var result = eval(newData);
var lastWord = data.charAt(data.length);
if(isNaN(lastWord)){
return;
}
var num = "";
var lastOperator = "";
var arr = this.data.arr;
var optarr = [];
for(var i in arr){
if(isNaN(arr[i]) == false || arr[i] == this.data.idd || arr[i] == this.data.idt){
num += arr[i];
}else{
lastOperator = arr[i];
optarr.push(num);
optarr.push(arr[i]);
num = "";
}
}
optarr.push(Number(num));
var result = Number(optarr[0])*1.0;
console.log(result);
for(var i=1; i<optarr.length; i++){
if(isNaN(optarr[i])){
if(optarr[1] == this.data.idadd){
result += Number(optarr[i + 1]);
}else if(optarr[1] == this.data.idj){
result -= Number(optarr[i + 1]);
}else if(optarr[1] == this.data.idx){
result *= Number(optarr[i + 1]);
}else if(optarr[1] == this.data.iddiv){
result /= Number(optarr[i + 1]);
}
}
}
//存储历史记录
this.data.logs.push(data +'='+ result);
wx.setStorageSync("calclogs",this.data.logs);
this.data.arr.length = 0;
this.data.arr.push(result);
this.setData({"screenData":result+""});
}else{
if(this.data.operaSymbo[id]){ //如果是符号+-*/
if(this.data.lastIsOperaSymbo || this.data.screenData == "0"){
return;
}
}
var sd = this.data.screenData;
var data;
if(sd == 0){
data = id;
}else{
data = sd + id;
}
this.setData({"screenData":data});
this.data.arr.push(id);
if(this.data.operaSymbo[id]){
this.setData({"lastIsOperaSymbo":true});
}else{
this.setData({"lastIsOperaSymbo":false});
}
}
},
history:function(){
wx.navigateTo({
url:'../history/history'
})
}
})
.content {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
background-color: #ccc;
font-family: "Microsoft YaHei";
overflow-x: hidden;
}
.layout-top{
width: 100%;
margin-bottom: 30rpx;
}
.layout-bottom{
width: 100%;
}
.screen {
text-align: right;
width: 100%;
line-height: 260rpx;
padding: 0 10rpx;
font-weight: bold;
font-size: 60px;
box-sizing: border-box;
border-top: 1px solid #fff;
}
.btnGroup {
display: flex;
flex-direction: row;
flex: 1;
width: 100%;
height: 5rem;
background-color: #fff;
}
.item {
width:25%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin-top: 1px;
margin-right: 1px;
}
.item:active {
background-color: #ff0000;
}
.zero{
width: 50%;
}
.orange {
color: #fef4e9;
background: #f78d1d;
font-weight: bold;
}
.blue {
color:#d9eef7;
background-color: #0095cd;
}
.iconBtn{
display: flex;
}
.icon{
display: flex;
align-items: center;
width:100%;
justify-content: center;
}
以上代码为效果图
文末福利：
福利一：前端，Java，产品经理，微信小程序，Python等100G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程。
【领取方法】
关注 【编程微刊】微信公众号：
回复【小程序demo】一键领取130个微信小程序源码demo资源。
回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集100G资源大放送。