微信小程序——简易计算器plus

时间：2024-02-25 19:32:49
博客班级 https://edu.cnblogs.com/campus/zjcsxy/SE2020
作业要求 https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标

编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改

熟悉git代码管理流程，将源代码上传到到github

在博客园班级中写一篇相应的博文
作业源代码 https://github.com/helios12138/wx2020.git
学号姓名 31801097金欣怡

院系

浙大城市学院计算机系

 

 

 

 

 

 

 

 

 

 

前言：

第一次接触学习微信小程序的制作，花了较大的时间了解小程序的各个部分。这次小程序是一个简易计算器，网上大多数微信小程序的计算器仅能完成简单的四则运算，在此基础上，我新增了启动界面和一些新的运算（平方、开根号、阶乘等），以及对计算器页面做了一些调整，完成了我的第一个小程序“简易计算器plus”。

最终版本地址：https://github.com/helios12138/wx2020.git

开发工具：微信开发者工具

 

效果演示

                    

 

 

全局配置

app.json:

app.json 是对整个小程序的全局配置。可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。

pages属性配置的是页面，所有页面都要在这里配置，如果忘记添加了，后面需要页面跳转的时候onLoad方法不会执行。

index是首页启动页面；

calc是计算器使用页面；

history是历史计算页面；

 1 {
 2   "pages": [
 3     "pages/index/index",
 4     "pages/calc/calc",
 5     "pages/history/history",
 6     "pages/logs/logs"
 7   ],
 8   "window": {
 9     "backgroundTextStyle": "light",
10     "navigationBarBackgroundColor": "#da7c0c",
11     "navigationBarTitleText": "简易计算器plus",
12     "navigationBarTextStyle": "white"
13   },
14   
15 }

app.js:

 1 App({
 2   onLaunch: function () {
 3     //调用API从本地缓存中获取数据
 4     var logs = wx.getStorageSync(\'logs\') || []
 5     logs.unshift(Date.now())
 6     wx.setStorageSync(\'logs\', logs)
 7   },
 8   getUserInfo:function(cb){
 9     var that = this;
10     if(this.globalData.userInfo){
11       typeof cb == "function" && cb(this.globalData.userInfo)
12     }else{
13       //调用登录接口
14       wx.login({
15         success: function () {
16           wx.getUserInfo({
17             success: function (res) {
18               that.globalData.userInfo = res.userInfo;
19               typeof cb == "function" && cb(that.globalData.userInfo)
20             }
21           })
22         }
23       });
24     }
25   },
26   globalData:{
27     userInfo:null
28   }
29 })

index.js:

这里涉及到一个API——wx.navigateTo，跳转到一个新的页面。

 1 //index.js
 2 //获取应用实例
 3 var app = getApp()
 4 Page({
 5   data: {
 6     
 7     motto: \'简易计算器☞\',
 8     userInfo: {},
 9     defaultSize: \'default\',
10     disabled: false,
11     iconType:\'info_circle\'
12   },
13   //事件处理函数
14   toupper: function(){
15     console.log("触发了toupper");
16   },
17   bindViewTap: function() {
18     wx.navigateTo({
19       url: \'../logs/logs\'
20     })
21   },
22   toCalc:function(){
23     wx.navigateTo({
24       url:\'../calc/calc\'
25     })
26   },
27   onLoad: function () {
28     console.log(\'onLoad\');
29     var that = this
30       //调用应用实例的方法获取全局数据
31     app.getUserInfo(function(userInfo){
32       //更新数据
33       that.setData({
34         userInfo:userInfo
35       })
36     })
37   }
38 })

index.wxml:

启动页面的布置，包括首页的图片滚动播放，该页面的文字颜色、图片位置等设置代码在index.wxss中，这里就不展示了。

图片滚动用到的API是swiper(滑块视图容器)，然后autoplay="true"，保证每张图片可以自动切换。

 1 <!--index.wxml-->
 2 <view class="container">
 3   <view  bindtap="bindViewTap" class="userinfo">
 4     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
 5     
 6   </view>
 7   <swiper autoplay="true" interval="2000" indicator-dots circular=\'\'>
 8     <swiper-item><image mode="widthFix" src="../../pic/kasha.jpg"></image></swiper-item>
 9     <swiper-item><image mode="widthFix" src="../../pic/ig.jpg"></image></swiper-item>
10     <swiper-item><image mode="widthFix" src="../../pic/swy.jpg"></image></swiper-item>
11   </swiper>
12   <view>
13     <text class="userinfo-nickname">{{userInfo.nickName}}（广告位在线招租）</text>
14   </view>
15   <view class="usermotto">
16     <!--<text class="user-motto">{{motto}}</text>-->
17     <button type="default" size="{{primarySize}}" plain="{{plain}}" hover-class="button-hover"
18         disabled="{{disabled}}" bindtap="toCalc"> {{motto}} </button>
19   </view>
20   
21 
22 </view>

 calc.wxml:

计算器使用界面的设置，包括计算器的各个按钮位置颜色等的设置。

在这个界面发现基本上每行都有4个键，而最后一行只有3个，如果不修改的话，界面会变成下图不美观。所以在calc.wxss中加入.zero{width: 50%;}，将按钮“0”的宽度扩大成界面宽度的一半（原来在item中的width为25%，即界面宽度的四分之一）。

 1   
 2 <view class="content">
 3   <view class="layout-top">
 4     <view class="screen">
 5      {{screenData}}
 6     </view>
 7   </view>
 8     
 9   <view class="layout-bottom">
10     <view class="btnGroup">
11       <view class="item newgry" bindtap="clickBtn" id="{{idc}}">С</view>
12       <view class="item newgry" bindtap="clickBtn" id="{{idb}}">←</view>
13       <!--<view class="item orange" bindtap="clickBtn" id="{{idt}}">＋/－</view>-->
14       <view class="item newgry iconBtn" bindtap="history">
15           <icon type="{{iconType}}" color="{{iconColor}}" class="icon" size="25"/>
16       
17         </view>
18       <view class="item orange" bindtap="clickBtn" id="{{idz}}">√￣</view>
19     </view>
20     <view class="btnGroup">
21       <view class="item orange" bindtap="clickBtn" id="{{idw}}">x^2</view>
22       <view class="item orange" bindtap="clickBtn" id="{{ids}}">x^3</view>
23       <view class="item orange" bindtap="clickBtn" id="{{idy}}">x!</view>
24       <view class="item orange" bindtap="clickBtn" id="{{idadd}}">+</view>
25     </view>
26     <view class="btnGroup">
27       <view class="item blue" bindtap="clickBtn" id="{{id9}}">9</view>
28       <view class="item blue" bindtap="clickBtn" id="{{id8}}">8</view>
29       <view class="item blue" bindtap="clickBtn" id="{{id7}}">7</view>
30       <view class="item orange" bindtap="clickBtn" id="{{idj}}">－</view>
31     </view>
32     <view class="btnGroup">
33       <view class="item blue" bindtap="clickBtn" id="{{id6}}">6</view>
34       <view class="item blue" bindtap="clickBtn" id="{{id5}}">5</view>
35       <view class="item blue" bindtap="clickBtn" id="{{id4}}">4</view>
36       <view class="item orange" bindtap="clickBtn" id="{{idx}}">×</view>
37     </view>
38     <view class="btnGroup">
39       <view class="item blue" bindtap="clickBtn" id="{{id3}}">3</view>
40       <view class="item blue" bindtap="clickBtn" id="{{id2}}">2</view>
41       <view class="item blue" bindtap="clickBtn" id="{{id1}}">1</view>
42       <view class="item orange" bindtap="clickBtn" id="{{iddiv}}">÷</view>
43     </view>
44     <view class="btnGroup">
45       <view class="item blue zero" bindtap="clickBtn" id="{{id0}}">0</view>
46       <view class="item blue" bindtap="clickBtn" id="{{idd}}">.</view>
47       <view class="item orange" bindtap="clickBtn" id="{{ide}}">＝</view>
48     </view>
49   </view>
50 </view>

calc.js:

计算器完成四则运算和阶乘等其他运算的代码。

这里本地储存保存计算历史记录运用到的API是Storage。

计算平方、三次方的值运用了Math.pow()函数；计算开根号的值运用了Math.sqrt()函数；阶乘则是用了for循环进行累乘。

  1 Page({
  2   data:{
  3     idb:"back",
  4     idc:"clear",
  5     idt:"toggle",
  6     idz:"sqrt",
  7     idw:"pinfang",
  8     ids:"sanfang",
  9     idy:"jiecheng",
 10     idadd:"＋",
 11     id9:"9",
 12     id8:"8",
 13     id7:"7",
 14     idj:"－",
 15     id6:"6",
 16     id5:"5",
 17     id4:"4",
 18     idx:"×",
 19     id3:"3",
 20     id2:"2",
 21     id1:"1",
 22     iddiv:"÷",
 23     id0:"0",
 24     idd:".",
 25     ide:"＝",
 26     screenData:"0",
 27     operaSymbo:{"＋":"+","－":"-","×":"*","÷":"/",".":"."},
 28     lastIsOperaSymbo:false,
 29     iconType:\'waiting_circle\',
 30     iconColor:\'white\',
 31     arr:[],
 32     logs:[]
 33   },
 34   onLoad:function(options){
 35     // 页面初始化
 36   },
 37   onReady:function(){
 38     // 页面渲染完成
 39   },
 40   onShow:function(){
 41     // 页面显示
 42   },
 43   onHide:function(){
 44     // 页面隐藏
 45   },
 46   onUnload:function(){
 47     // 页面关闭
 48   },
 49   clickBtn:function(event){
 50     var id = event.target.id;
 51     if(id == this.data.idb){  //退格←
 52       var data = this.data.screenData;
 53       if(data == "0"){
 54           return;
 55       }
 56       data = data.substring(0,data.length-1);
 57       if(data == "" || data == "－"){
 58           data = 0;
 59       }
 60       this.setData({"screenData":data});
 61       this.data.arr.pop();
 62     }else if(id == this.data.idc){  //清屏C
 63       this.setData({"screenData":"0"});
 64       this.data.arr.length = 0;
 65     }else if(id == this.data.idt){  //正负号+/-
 66       var data = this.data.screenData;
 67       if(data == "0"){
 68           return;
 69       }
 70       var firstWord = data.charAt(0);
 71       if(data == "－"){
 72         data = data.substr(1);
 73         this.data.arr.shift();
 74       }else{
 75         data = "－" + data;
 76         this.data.arr.unshift("－");
 77       }
 78       this.setData({"screenData":data});
 79     }else if(id == this.data.ide){  //等于＝
 80       var data = this.data.screenData;
 81       if(data == "0"){
 82           return;
 83       }
 84       
 85       var lastWord = data.charAt(data.length);
 86       if(isNaN(lastWord)){
 87         return;
 88       }
 89 
 90       var num = "";
 91 
 92       var lastOperator = "";
 93       var arr = this.data.arr;
 94       var optarr = [];
 95       for(var i in arr){
 96         if(isNaN(arr[i]) == false || arr[i] == this.data.idd || arr[i] == this.data.idt){
 97           num += arr[i];
 98         }else{
 99           lastOperator = arr[i];
100           optarr.push(num);
101           optarr.push(arr[i]);
102           num = "";
103         }
104       }
105       optarr.push(Number(num));
106       var result = Number(optarr[0])*1.0;
107       console.log(result);
108       for(var i=1; i<optarr.length; i++){
109         if(isNaN(optarr[i])){
110             if(optarr[1] == this.data.idadd){
111                 result += Number(optarr[i + 1]);
112             }else if(optarr[1] == this.data.idj){
113                 result -= Number(optarr[i + 1]);
114             }else if(optarr[1] == this.data.idx){
115                 result *= Number(optarr[i + 1]);
116             }else if(optarr[1] == this.data.iddiv){
117                 result /= Number(optarr[i + 1]);
118             }
119         }
120       }
121       //存储历史记录
122       this.data.logs.push(data + result);
123       wx.setStorageSync("calclogs",this.data.logs);
124 
125       this.data.arr.length = 0;
126       this.data.arr.push(result);
127 
128       this.setData({"screenData":result+""});
129     }else if(id == this.data.idw){//平方
130       var pd=this.data.screenData;
131     var data=Math.pow(pd,2);
132     this.setData({"screenData":data});
133     }else if(id==this.data.ids){//三次方
134       var sd=this.data.screenData;
135     var data=Math.pow(sd,3);
136     this.setData({"screenData":data});
137     }else if(id==this.data.idy){//阶乘
138       var jd=this.data.screenData;
139       var result=1;
140       for(var i=1;i<=jd;i++){
141         result *=i;
142       }
143       this.setData({"screenData":result});
144     }else if(id==this.data.idz){//开方
145       var data=Math.sqrt(this.data.screenData);
146       this.setData({"screenData":data});
147     }
148     else{
149       if(this.data.operaSymbo[id]){ //如果是符号+-*/
150         if(this.data.lastIsOperaSymbo || this.data.screenData == "0"){
151           return;
152         }
153       }
154 
155       var sd = this.data.screenData;
156       var data;
157       if(sd == 0){
158         data = id;
159       }else{
160         data = sd + id;
161       }
162       this.setData({"screenData":data});
163       this.data.arr.push(id);
164 
165       if(this.data.operaSymbo[id]){
166         this.setData({"lastIsOperaSymbo":true});
167       }else{
168         this.setData({"lastIsOperaSymbo":false});
169       }
170     }
171   },
172   
173   history:function(){
174     wx.navigateTo({
175       url:\'../history/history\'
176     })
177   }
178 })

 总结

这是我第一次编写微信小程序，在一开始也尝试去b站等网站查找制作小程序的教程，一步步摸索出".js",".json",".wxml",".wxss"这些后缀文件都代表了什么、该写什么、有什么特殊格式等（.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件, .wxml后缀的文件是页面结构文件），为了不让启动页面只有一个按钮这么寡淡，我尝试去网上查找学习滚动图片的制作，虽然过程中遇到了点挫折，但是最终呈现出的效果还是挺好的。当然我了解到的还很少，学习的也不全面熟练，仅仅是初学者的第一课，而且这个小程序还是有很多不足的地方，但也是一个新的起点。

相关文章