059 ∞ 设计计算器框架|【实战篇】

不二如是

                               
登录/注册后可看大图

在之前的很多讲中，我们搞定了微信小程序中的每个插件玩法～

将会以传送门的方式，在用到的时候，进行温习～

现在让我们进入实战系列，打造我们的第一个计算器。

计算器除了常用的四则运算外，还有平方，开方的功能。

所以为了学习体验，我们将实现如下的功能：

1、加，减，乘，除四则运算
2、正负号取反运算
3、可以输入小数
4、输入数据的过程中可删除输入的最后一位
5、可清除输入的数据
6、能查看历史数据

难度由浅入深，快来跟着我一个一个搞定吧～

---

开始

好了，功能先不管，这次让我们把计算器的UI页面搞定～

参照上面的计算器布局，我们通过按钮button（传送门），让用户直接点按0-9的数字。

然后是一些功能性按钮，四则运算，删除，清空，历史。

除了按钮，还有显示结果的区域，我们用view（传送门）来实现。
（用text和input组件也可以）

所有的按钮大小相同，5行4列，显示框横占一行：

我们先在桌面上创建一个Cal_FishC的文件夹，项目名同理。

创建新项目：

填写相关信息：

没有APPID也没关系，但有的话我们才能将程序发布出来哦～

申请请看：传送门

在index目录下，创建一个calc的子目录：

然后在calc目录下，创建4个类型的文件：

打开calc.js，添加如下代码：

1. Page({
   
2. 
   
3.   /**
   
4.    * 页面的初始数据
   
5.    */
   
6.   data: {
   
7.    
   
8.   },
   
9. 
   
10.   /**
    
11.    * 生命周期函数--监听页面加载
    
12.    */
    
13.   onLoad: function (options) {
    
14.    
    
15.   },
    
16. 
    
17.   /**
    
18.    * 生命周期函数--监听页面初次渲染完成
    
19.    */
    
20.   onReady: function () {
    
21.    
    
22.   },
    
23. 
    
24.   /**
    
25.    * 生命周期函数--监听页面显示
    
26.    */
    
27.   onShow: function () {
    
28.    
    
29.   },
    
30. 
    
31.   /**
    
32.    * 生命周期函数--监听页面隐藏
    
33.    */
    
34.   onHide: function () {
    
35.    
    
36.   },
    
37. 
    
38.   /**
    
39.    * 生命周期函数--监听页面卸载
    
40.    */
    
41.   onUnload: function () {
    
42.    
    
43.   },
    
44. 
    
45.   /**
    
46.    * 页面相关事件处理函数--监听用户下拉动作
    
47.    */
    
48.   onPullDownRefresh: function () {
    
49.    
    
50.   },
    
51. 
    
52.   /**
    
53.    * 页面上拉触底事件的处理函数
    
54.    */
    
55.   onReachBottom: function () {
    
56.    
    
57.   },
    
58. 
    
59.   /**
    
60.    * 用户点击右上角分享
    
61.    */
    
62.   onShareAppMessage: function () {
    
63.    
    
64.   }
    
65. })

复制代码

都是自动生成的，后面会用到，先空着就好咯～

打开calc.json文件，添加如下代码：

1. {
   
2.   "backgroundTextStyle":"light",
   
3.   "navigationBarBackgroundColor":"#fff",
   
4.   "navigationBarTitleText":"鱼C-计算器",
   
5.   "navigationBarTextStyle":"black"
   
6. }

复制代码

关于navigationBar的玩法，请看：传送门

现在还没有效果，需要打开主目录下的app.json，将calc添加到pages数组中：

1. {
   
2.   "pages":[
   
3.     "pages/calc/calc",
   
4.     "pages/index/index",
   
5.     "pages/logs/logs"
   
6.   ],
   
7.   "window":{
   
8.     "backgroundTextStyle":"light",
   
9.     "navigationBarBackgroundColor": "#fff",
   
10.     "navigationBarTitleText": "WeChat",
    
11.     "navigationBarTextStyle":"black"
    
12.   }
    
13. }
    

复制代码

现在编译，效果：

至此，框架就搭建完成，下一讲我们来搭建页面～

---

课后作业


1、直接写完calc.json文件中的配之后，有效果吗？



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢小程序，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

小脑斧

一笙彤

1