2021-06-15记录端午假期学习微信小程序计算器

程序参考GitHub/wxapp-sCalc-master 效果如图

calc.wxss,calc.wxml,calc.js.内容如下由于手机编写博客屏幕太小不好处理排班讲究看吧！走了些许弯路很多都是逻辑方面问题，组件布局也是从零学起希望你对初学者有所帮助少走弯路一起学习

/* pages/Calc/Calc.wxss */
.container{height: 100%;display:flex;flex-direction:column;/*align-items: center;*/background-color: #fff;font-family:"Arial";overflow: hidden;
}.layout-top{width: 100%;/*height: 40%;*/border:2rpx solid #000099;/* margin-bottom: 10rpx;*/background-color:#e9c26a;
}
.layout-bottom{width: 100%;height: 60%;
}
.screen{width: 100%;height: 300rpx;text-align:right;max-inline-size: 15;white-space: pre-wrap;/*line-height: 20rpx;*/padding: 0 10rpx;margin:2rpx 5rpx 10rpx;overflow:visible;font-size: 17pt;font-weight:Medium;color:BW_0_Alpha_0.9;box-sizing: border-box;border:2px solid #5b6dcd;
}
.screenres{width:100%;height: 4%;line-height: normal;text-align: right;margin-bottom: 2rpx;font-size: 17pt;font-weight:bolder;box-sizing: border-box; border:2rpx dashed #ff0000 ;
}.btnGroup{display: flex;flex-direction: row;flex:1;width:100%;height:4rem;background-color: #fff;
}
.btnOrange{color: #fef4fe;background-color: #fe8dfe;font-weight:bold;  }.btnBlue{columns: #d9eef7;background-color: #0095fd;}.btnYellow{color:#d9eef7;background-color:rgb(114, 175, 137);}.item{width:25%;display:flex;align-items: center;flex-direction:column;justify-content: center;margin-top: 2%;margin-right: 2%;}.item:active{background-color: #93db70;}

<view class="container" ><view class="layout-top"><view class="screen">{{screenData}}</view><view class="screenres">{{screenResult}}</view></view><view class="layout-bottom"><view class="btnGroup"><view class="item btnOrange" id="{{btnClear}}" bindtap="clickBtn">C</view><view class="item btnOrange" id="{{btnAbs}}" bindtap="clickBtn">＋/－</view><view class="item btnOrange" id="{{btnBack}}" bindtap="clickBtn">＜—</view><view class="item btnYellow" id="{{btnDivision}}" bindtap="clickBtn">÷</view></view><view class="btnGroup"><view class="item btnBlue" id="{{btn7}}" bindtap="clickBtn">7</view><view class="item btnBlue" id="{{btn8}}" bindtap="clickBtn">8</view><view class="item btnBlue" id="{{btn9}}" bindtap="clickBtn">9</view><view class="item btnYellow" id="{{btnMultiply}}" bindtap="clickBtn">x</view></view><view class="btnGroup"><view class="item btnBlue" id="{{btn4}}" bindtap="clickBtn">4</view><view class="item btnBlue" id="{{btn5}}" bindtap="clickBtn">5</view><view class="item btnBlue" id="{{btn6}}" bindtap="clickBtn">6</view><view class="item btnYellow" id="{{btnSubtraction}}" bindtap="clickBtn">-</view></view><view class="btnGroup"><view class="item btnBlue" id="{{btn1}}" bindtap="clickBtn">1</view><view class="item btnBlue" id="{{btn2}}" bindtap="clickBtn">2</view><view class="item btnBlue" id="{{btn3}}" bindtap="clickBtn">3</view><view class="item btnYellow" id="{{btnPlus}}" bindtap="clickBtn">+</view></view><view class="btnGroup"><view class="item btnOrange" id="{{btnHistory}}" bindtap="toHistory">⊙</view><view class="item btnBlue" id="{{btn0}}" bindtap="clickBtn">0</view><view class="item btnBlue" id="{{btnDecimal}}" bindtap="clickBtn">.</view><view class="item btnYellow" id="{{btnEqual}}" bindtap="clickBtn">=</view></view></view>
</view>

const maxLength=18//设置记录中一行最多可以有18个字符 现在不知道组件的最大宽度如何设置 先人为设定
Page({data:{btnClear:"clear",btnBack:"back",btnDivision:"÷" ,btnAbs:"toggle",btnSubtraction:"-",btnMultiply:"*",btnPlus:"+",btnDecimal:".",btnHistory:"history",btnEqual:"=",btn0:"0",btn1:"1",btn2:"2",btn3:"3",btn4:"4",btn5:"5",btn6:"6",btn7:"7",btn8:"8",btn9:"9",screenData:"0",screenResult:"=",operationSymbol:[],//{'＋':'+',"－":"-","X":"*","÷":"/"},arr:[],lastOperationSymbol:"",lastisoperationSymbol:false},recordArr:[],onLoad:function(option){},onReady:function(){},onShow:function(){},onHide:function(){},clickBtn:function(event){//console.log("clickBtn in",event);var id = event.target.id;//console.log("id: ",this.data.btn9);var tmpdata=this.data.screenData;if(id==this.data.btnClear){//Clear  清空键this.setData({"screenData":"0"});this.setData({"screenResult":"="})this.data.arr=[];this.data.operationSymbol=[];this.data.lastOperationSymbol="";}else if(id==this.data.btnBack){if(tmpdata=="0") return;tmpdata=tmpdata.substring(0,tmpdata.length-1);this.setData({"screenData":tmpdata});//console.log(this.data.arr);//this.data.arr.pop();//console.log(this.data.arr);}else if(id==this.data.btnDecimal){//暂且保留，在正常输入时不会有逻辑错误，考虑输入有运算符后在输入的数字tmpdata=tmpdata+id;//console.log(tmpdata);this.setData({"screenData":tmpdata});}else if(id==this.data.btnAbs){//涉及到运算符 晚点再涉及运算逻辑if(tmpdata==0) return;var tmplastOperationSymbol=this.data.lastOperationSymbol;var tmpindex=tmpdata.lastIndexOf(tmplastOperationSymbol);var tmpscdata=tmpdata.substring(tmpindex+1);tmpscdata="-"+tmpscdata;// console.log(tmpdata.substring(0,tmpindex)); tmpdata=tmpdata.substring(0,tmpindex+1)+tmpscdata;this.setData({"screenData":tmpdata});}else if(id==this.data.btnPlus||id==this.data.btnSubtraction ||id==this.data.btnMultiply||id===this.data.btnDivision){var tmpindex,tmplastOperationSymbol=this.data.lastOperationSymbol;if(tmplastOperationSymbol==this.data.btnEqual){var tmpres=this.data.screenResult.substring(1);this.setData({"screenData":tmpres});tmplastOperationSymbol="";tmpdata=this.data.screenData;}if(tmpdata.length>maxLength && tmpdata.indexOf('\n')!=-1){//后面加入换行符"\n",会被当做正常字符占据位置 这里全部删除掉          var reg=new RegExp('\n','g');tmpdata=tmpdata.replace(reg,'');//console.log("delete wrap char",tmpdata);}if(tmplastOperationSymbol=="")tmpindex=-1;else  tmpindex=tmpdata.lastIndexOf(tmplastOperationSymbol);if(tmpindex==tmpdata.length-1&& tmpindex!=-1){     //重复按某个运算符或者连续按按运算符 都以最后一个显示tmpdata=tmpdata.substring(0,tmpdata.length-1);tmpdata=tmpdata+id;this.data.lastOperationSymbol=id;this.setData({"screenData":tmpdata});return;}var tmpdata1=tmpdata.substring(tmpindex+1);//console.log(tmpdata1);this.data.arr.push(tmpdata1);//修改screendatatmpdata=tmpdata+id;this.setData({"screenData":tmpdata});this.data.operationSymbol.push(id);this.data.lastOperationSymbol=id;}else if(id==this.data.btnEqual){//字符串转换成数值型数据if(tmpdata=="0") return;if(this.data.lastOperationSymbol==""){//一个数字没有运算符直接键等号tmpdata="="+tmpdata;this.setData({"screenData":tmpdata});return;}   if(this.data.lastOperationSymbol==this.data.btnEqual){tmpdata=this.data.screenResult.substring(1,this.data.screenResult.length);this.setData({"screenData":tmpdata,"screenResult":"="});//   this.setData({arr:[],operationSymbol:[]});this.data.arr.splice(0,this.data.arr.length);this.data.operationSymbol.splice(0,this.data.operationSymbol.length);return;}{ //键入等号 存入最后一段数字var tmplastOperationSymbol=this.data.lastOperationSymbol;var tmpindex=tmpdata.lastIndexOf(tmplastOperationSymbol);if(tmpindex!=tmpdata.length-1){var tmpdata1=tmpdata.substring(tmpindex+1);this.data.arr.push(tmpdata1);}}if(tmpdata.length>maxLength && tmpdata.indexOf('\n')!=-1){//后面加入换行符"\n",会被当做正常字符占据位置 这里全部删除掉          var reg=new RegExp('\n','g');tmpdata=tmpdata.replace(reg,'');//console.log("delete wrap char",tmpdata);}var num;{//由键入等号 开始对数组进行计算num=0;var tmparr=this.data.arr;var tmpoptarr=this.data.operationSymbol;if(tmparr.length-tmpoptarr.length !=1) return;//数据不对 不能构成表达式//console.log("equal: ",tmpdata);for(var i=0;i<tmpoptarr.length;i++){if(tmpoptarr[i]==this.data.btnMultiply){var tmpdata1 = Number(tmparr[i]) * Number(tmparr[i+1]);tmparr.splice(i,2,tmpdata1);//  console.log(tmparr);tmpoptarr.splice(i,1);i--;} if( tmpoptarr[i]==this.data.btnDivision){var tmpdata1=Number(tmparr[i]*1.0/Number(tmparr[i+1]));tmparr.splice(i,2,tmpdata1);tmpoptarr.splice(i,1);i--;}}//console.log("position1 data.arr:",this.data.arr);//console.log(this.data.operationSymbol);// 同级加减运算 num = Number(tmparr[0]);for(var i=0;i<tmpoptarr.length;i++){if(tmpoptarr[i]==this.data.btnPlus){num= num + Number(tmparr[i+1]);}if(tmpoptarr[i]==this.data.btnSubtraction){num= num-Number(tmparr[i+1]);}} this.data.arr.splice(0,this.data.arr.length);this.data.operationSymbol.splice(0,this.data.operationSymbol.length);//console.log("data.arr:",this.data.arr);//console.log(this.data.operationSymbol);}var tmpres ="="+num;//console.log(tmpres);this.setData({"screenData":tmpdata});this.setData({"screenResult":tmpres});//console.log("num",num);this.data.lastOperationSymbol=id;}else{{//检测除数不能为0var tmplastOperationSymbol=this.data.lastOperationSymbol;if(tmplastOperationSymbol==this.data.btnDivision && id==this.data.btn0){this.setData({"screenData":"除数不可以为0"});this.data.arr=[];return;}}if(tmpdata==0)tmpdata=id;elsetmpdata=tmpdata+id;{ //运算超过一行后 自动换行。if(tmpdata.length>maxLength){var tmpint=0;var tmpre=tmpdata.length%maxLength;tmpint=Math.floor(tmpdata.length/maxLength);//  console.log("tmpint: ",tmpint);//console.log("tmpre: ",tmpre);if(tmpdata.indexOf('\n')!=-1){//后面加入换行符"\n",会被当做正常字符占据位置 这里全部删除掉var reg=new RegExp('\n','g');tmpdata=tmpdata.replace(reg,'');//console.log("delete wrap char",tmpdata);}this.recordArr.splice(0,this.recordArr.length);//console.log("len:",tmpdata.length);//console.log(tmpdata);if(tmpint>0)for(var i=0;i<tmpint;i++){var tmpstr1 =tmpdata.substring(i*maxLength,(i+1)*maxLength);//  console.log(tmpstr1);this.recordArr.push(tmpdata.substring(i*maxLength,(i+1)*maxLength));this.setData({"screenData":this.recordArr.join('\n')});//console.log("pos1: ",this.recordArr);}if(tmpre>0){this.recordArr.push(tmpdata.substring(tmpint*maxLength,tmpdata.length));// console.log(tmpdata.substring(tmpint*maxLength,tmpdata.length));this.setData({"screenData":this.recordArr.join('\n')});        }//console.log(this.recordArr);return;}}this.setData({"screenData":tmpdata});}//console.log("clickBtn out");},toHistory:function(){}
})

2021-06-15记录端午假期学习微信小程序计算器相关推荐

一个C#程序员学习微信小程序的笔记
一个C#程序员学习微信小程序的笔记客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在 ...
微信小程序最新开发资源汇总，对学习微信小程序的新手有一定帮助
微信小程序最新开发资源汇总,希望给想学习或正在学习微信小程序开发的同学们带来一定帮助,汇总的小程序资源有点繁杂,各种类型的小程序demo都有,大家可以选择自己想要的demo进行下载学习.这些微信小程序 ...
微信小程序实现lot开发01 学习微信小程序 helloworld
最近走进一个新项目的任务里,主要的任务是实现用微信小程序利用websocket使用mqtt协议走网络控制继电器(其实在生活中这个技术已经普及了,我们用的充电桩扫码充电,我们学校里的饮水机扫码接水以及我 ...
前端学习——微信小程序
今天是学习微信小程序的第三天. 1. 一定要给脚本文件定义出口.如以下代码 var local_database = [{date: "Nov 18 2017",title: &q ...
新手从零开始学习微信小程序开发01
新手从零开始学习小程序开发01 文章目录新手从零开始学习小程序开发01 前言一.什么是微信小程序? 二.如何着手学习微信小程序 1.开发工具下载安装 2.注册账户前言本章主要介绍微信小程序开发 ...
云开发版高效学习微信小程序源码包含复习资料学习共享护眼精灵等功能
☑️ 编号:X0016 ☑️ 品牌:暂无 ☑️ 语言:微信小程序 ☑️ 数据库:无需数据库 ☑️ 类型:微信小程序 ☑️ 规格:小程序 ※ 欢迎关注私信(发消息不限制),领取福利 ※ ☑️ 源码介绍: ...
0基础学习微信小程序(转载)
原文地址:https://blog.csdn.net/qq_41464123/article/details/105198163 前言微信小程序作为近几年"微服务"的杰出代表,应 ...
钢琴学习微信小程序开发功能
如今的家长都希望孩子在艺术方面能够有一技之长,这样才能在将来的生活交际中游刃有余.而钢琴作为艺术中不可缺少的一部分,自然受到了很多人的青睐,因为钢琴代表着高雅和高贵的象征.是提高个人修养的表现.对于钢 ...
学习微信小程序-索引贴
学习微信小程序-索引贴微信小程序一出,到处都是讨论它的. 搞得人心惶惶. 更是打乱了我的学习计划. 而且微信的那个IDE, 真是难用啊. 而且有bug. 页面数据量大的时, 调试页面会假死. 真是坑 ...

2021-06-15记录端午假期学习微信小程序计算器

2021-06-15记录端午假期学习微信小程序计算器相关推荐

最新文章

热门文章

2021-06-15记录端午假期学习微信小程序 计算器

2021-06-15记录端午假期学习微信小程序 计算器相关推荐

最新文章

热门文章

2021-06-15记录端午假期学习微信小程序计算器

2021-06-15记录端午假期学习微信小程序计算器相关推荐