1.本章重新设计一个界面、功能都更强的计算器小程序

4.1计算器功能需求

2.功能如下：

能进行加、减、乘、除运算能对输入的数值进行正负号取反运算可以输入小数输入数据的过程中可删除输入的最后一位可清除输入的数据能查看历史数据

3.创建一个名为ch04的项目

4.添加calc目录

5.calc.json

{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"计算器","navigationBarTextStyle":"black"}calc.wxml!--pages/calc/calc.wxml--viewclass="content"viewclass="screen"{{result}}/viewviewclass="btmGroup"switchchecked="{{record}}"bindchange="RecordHistory"/viewclass="histext"保持历史记录/view/viewviewclass="btmGroup"buttonclass="itemorange"hover-class="other-button-hover"id="{{id1}}"bindtap="clickButton"icontype="info_circle"size="38"color="red"class="btnIcon"//buttonbuttonclass="itemorange"hover-class="other-button-hover"id="{{id2}}"bindtap="clickButton"icontype="cancel"size="38"color="red"class="btnIcon"//buttonbuttonclass="itemorange"hover-class="other-button-hover"id="{{id3}}"bindtap="clickButton"←/buttonbuttonclass="itemorange"hover-class="other-button-hover"id="{{id4}}"bindtap="clickButton"÷/button/viewviewclass="btmGroup"buttonclass="itemblue"hover-class="button-hover-num"id="{{id5}}"bindtap="clickButton"7/buttonbuttonclass="itemblue"hover-class="button-hover-num"id="{{id6}}"bindtap="clickButton"8/buttonbuttonclass="itemblue"hover-class="button-hover-num"id="{{id7}}"bindtap="clickButton"9/buttonbuttonclass="itemorange"hover-class="other-button-hover"id="{{id8}}"bindtap="clickButton"×/button/viewviewclass="btmGroup"buttonclass="itemblue"hover-class="button-hover-num"id="{{id9}}"bindtap="clickButton"4/buttonbuttonclass="itemblue"hover-class="button-hover-num"id="{{id10}}"bindtap="clickButton"5/buttonbuttonclass="itemblue"hover-class="button-hover-num"id="{{id11}}"bindtap="clickButton"6/buttonbuttonclass=itemorange"hover-class="other-button-hover"id="{{id12}}"bindtap="clickButton"－/button/viewviewclass="btmGroup"buttonclass="itemblue"hover-class="button-hover-num"id="{{id13}}"bindtap="clickButton"1/buttonbuttonclass="itemblue"hover-class="button-hover-num"id="{{id14}}"bindtap="clickButton"2/buttonbuttonclass="itemblue"hover-class="button-hover-num"id="{{id15}}"bindtap="clickButton"3/buttonbuttonclass="itemorange"hover-class="other-button-hover"id="{{id16}}"bindtap="clickButton"＋/button/viewviewclass="btmGroup"buttonclass="itemorange"hover-class="other-button-hover"id="{{id17}}"bindtap="clickButton"±/buttonbuttonclass="itemblue"hover-class="button-hover-num"id="{{id18}}"bindtap="clickButton"0/buttonbuttonclass="itemblue"hover-class="button-hover-num"id="{{id19}}"bindtap="clickButton"./buttonbuttonclass="itemorange"hover-class="other-button-hover"id="{{id20}}"bindtap="clickButton"icontype="success_no_circle"size="38"color="red"class="btnIcon"//button/view/view

6.calc.wcss

/*pages/calc/calc.wxss*//*外层容器*/.content{height:100%;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;padding-top:10rpx;}/*计算结果*/.screen{background-color:#ffffff;text-align:right;width:650rpx;height:150rpx;line-height:150rpx;padding:020rpx;margin:30rpx;border:1pxsolid#ddd;border-radius:3px;}/*按钮组横向显示*/.btmGroup{display:flex;flex-direction:row;}/*针对按钮编写一个class宽160rpx，4个按钮占：640rpx间距10rpx,总宽度没有超过750rpx文字的阴影、对齐、高度、按钮圆角等*/.item{width:160rpx;min-height:150rpx;margin:10rpx;text-shadow:01px1pxrgba(0,0,0,0.3);border-radius:5px;text-align:center;line-height:150rpx;}/*控制按钮（橙色）*/.orange{background-color:#f78d1d;color:#fef4e9;border:solid1px#da7c0c;}/*数字按钮（蓝色）*/.blue{background-color:#0095cd;color:#d9eef7;border:solid1px#0076a3;}/*数字按钮按下状态*/.button-hover-num{background-color:#0094cc;opacity:0.7;}/*控制按钮按下状态*/.other-button-hover{background-color:red;}

7.calc.js

8.识别出用户按了哪个按钮：20个按钮编写20个事件处理函数，非常烦琐。可以编写一个通用的按钮单击事件根据id来处理icon组件：只要指定图标的类型、大小和颜色，就可以显示出一个图标，而不需要去引用一张图片资源

9.icontype="图标类型"size="图标大小"color="图标颜色"/

10.type:有效值：success,success_no_circle,info,warn,waiting,cancel,download,search,clear.

11.size:大小，单位为px

12.color:颜色

//pages/calc/calc.jsvarcalculate=function(data1,oper,data2){vardata;data1=parseFloat(data1);data2=parseFloat(data2);switch(oper){case"+":data=data1+data2;break;case"-":data=data1-data2;break;case"*":data=data1*data2;break;case"/":if(data2!==0){data=data1/data2;}else{data=0;}break;}returndata;}//保存数据到本地缓存的数组中varsaveExprs=function(expr){varexprs=wx.getStorageSync('exprs')||[]//exprs.unshift(expr);//在数组开头增加一个元素wx.setStorageSync('exprs',exprs);//保存到本地缓存}Page({/***页面的初始数据*/data:{result:"0",id1:"history",id2:"clear",id3:"back",id4:"div",id5:"num_7",id6:"num_8",id7:"num_9",id8:"mul",id9:"num_4",id10:"num_5",id11:"num_6",id12:"sub",id13:"num_1",id14:"num_2",id15:"num_3",id16:"add",id17:"negative",id18:"num_0",id19:"dot",id20:"equ",lastoper:"+",temp:"0",flag:true,record:true,expr:""//表达式},//修改记录标志RecordHistory:function(e){console.log(e)this.setData({record:e.detail.value})},/*单击事件处理函数*/clickButton:function(e){vardata=this.data.result;//取上一个结果值vartmp=this.data.temp;//取上次的临时结果varlastoperl=this.data.lastoper;//上一次的运算符varnoNumFlag=this.data.flag;//上一次非数字按钮标志varexpr1=this.data.expr;//if(e.target.id='num_0'&&e.target.id='num_9'){data+=e.target.id.split("_")[1];//切分出值if(this.data.result=='0'||noNumFlag){data=e.target.id.split("_")[1];}noNumFlag=false;}else{noNumFlag=true;console.log(e.target.id);if(e.target.id=="dot"){if(data.toString().indexOf(".")==-1){data+=".";}}elseif(e.target.id=="clear"){expr1=expr1.substr(0,expr1.length-1)+"="+tmp;//if(this.data.record){//wx.setStorageSync("expr",expr1);//}saveExprs(expr1);//保存exprexpr1="";data==0;tmp=0;lastoperl="+";}elseif(e.target.id=="negative"){data=-1*data;}elseif(e.target.id=="back"){if(data.toString().length1){data=data.substr(0,data.toString().length-1);}else{data=0;}}elseif(e.target.id=="div"){expr1+=data.toString()+"÷";data=calculate(tmp,lastoperl,data);tmp=data;lastoperl="/";}elseif(e.target.id=="mul"){expr1+=data.toString()+"×";data=calculate(tmp,lastoperl,data);tmp=data;lastoperl="*";}elseif(e.target.id=="add"){expr1+=data.toString()+"+";data=calculate(tmp,lastoperl,data);tmp=data;lastoperl="+";}elseif(e.target.id=="sub"){expr1+=data.toString()+"-";data=calculate(tmp,lastoperl,data);tmp=data;lastoperl="-";}elseif(e.target.id=="equ"){expr1+=data.toString();data=calculate(tmp,lastoperl,data);expr1+="="+data;//if(this.data.record){//wx.setStorageSync("expr",expr1);//}saveExprs(expr1);expr1="";tmp=0;lastoperl="+";}elseif(e.target.id=="history"){//历史wx.navigateTo({//导航url:'../history/history'})}}this.setData({result:data,lastoper:lastoperl,temp:tmp,flag:noNumFlag,expr:expr1});},/***生命周期函数--监听页面加载*/onLoad:function(options){},/***生命周期函数--监听页面初次渲染完成*/onReady:function(){},/***生命周期函数--监听页面显示*/onShow:function(){},/***生命周期函数--监听页面隐藏*/onHide:function(){},/***生命周期函数--监听页面卸载*/onUnload:function(){},/***页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function(){},/***页面上拉触底事件的处理函数*/onReachBottom:function(){},/***用户点击右上角分享*/onShareAppMessage:function(){}})第五章保存数据到本地

13.HTML5提供本地缓存localStorage在微信小程序中也可以使用

5.1保存计算历史界面设计

14.switch组件：”是“和”否“之间进行选择的操作，还有复选框checkbox组件

5.2修改计算器UI

15.是否保存计算过程到历史记录中

5.3保存计算到本地缓存

16.两个API接口函数：

17.wx.setStorage:将数据存储指定key中，会覆盖原来key。是一个异步接口，其参数是个Object对象，有以下属性：

key:本地缓存中的key，是一个字符串。data：需要存储的内容，可以是字符串，也可以是Object对象success：接口调用成功的回调函数fail：接口调用失败的回调函数complete：结束的回调函数（成功和失败都会执行）

18.wx.setStorageSync：不同的是它是同步接口，因此不需要success,fail和complete

5.4从本地缓存读取数据

19.添加history子目录

20.history.json

{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"查看历史记录","navigationBarTextStyle":"black"}

21.history.wxml

!--pages/history/history.wxml--viewclass="container"blockwx:for="{{exprs}}"view{{item}}/view/block/view

22.history.js

//pages/history/history.jsPage({/***页面的初始数据*/data:{//expr:"历史记录"exprs:[]},/***生命周期函数--监听页面加载*/onLoad:function(options){this.setData({//expr:wx.getStorageSync("expr")exprs:wx.getStorageSync("exprs")||[]})},/***生命周期函数--监听页面初次渲染完成*/onReady:function(){},/***生命周期函数--监听页面显示*/onShow:function(){},/***生命周期函数--监听页面隐藏*/onHide:function(){},/***生命周期函数--监听页面卸载*/onUnload:function(){},/***页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function(){},/***页面上拉触底事件的处理函数*/onReachBottom:function(){},/***用户点击右上角分享*/onShareAppMessage:function(){}})

23.页面切换的相关接口函数：

24.1、wx.navigateTo：保留当前页面，跳转到应用内的某个页面。

25.以下属性：

url：可用相对路径或绝对路径success：调用成功的回调函数fail：调用失败的回调函数complete：结束的回调函数（无论成功与否）

26.官方规定页面路径只能是5层

27.2、wx.redirectTo接口函数：跳转前会关闭当前页面。

28.3、wx.navigateBack：关闭当前页面，退回到前一页面

29.获取本地缓存数据

30.1、wx.getStorage；异步接口

31.2、wx.getStorageSync：同步接口

32.使用数组保存多条历史记录

//保存数据到本地缓存的数组中varsaveExprs=function(expr){varexprs=wx.getStorageSync('exprs')||[]//exprs.unshift(expr);//在数组开头增加一个元素wx.setStorageSync('exprs',exprs);//保存到本地缓存}清理本地缓存：小程序中本地缓存最大为10MB。

33.wx.clearStorage：清空

34.wx.clearStorageSync：同步清理