059 ∞ 设计计算器框架|【实战篇】
本帖最后由 不二如是 于 2018-7-13 10:25 编辑http://xxx.fishc.com/forum/201805/02/171248f4zdsipf6d4qjnjl.png
在之前的很多讲中，我们搞定了微信小程序中的每个插件玩法～
将会以传送门的方式，在用到的时候，进行温习～
现在让我们进入实战系列，打造我们的第一个计算器。
计算器除了常用的四则运算外，还有平方，开方的功能。
所以为了学习体验，我们将实现如下的功能：
1、加，减，乘，除四则运算
2、正负号取反运算
3、可以输入小数
4、输入数据的过程中可删除输入的最后一位
5、可清除输入的数据
6、能查看历史数据
难度由浅入深，快来跟着我一个一个搞定吧～
开始
好了，功能先不管，这次让我们把计算器的UI页面搞定～
参照上面的计算器布局，我们通过按钮button（传送门），让用户直接点按0-9的数字。
然后是一些功能性按钮，四则运算，删除，清空，历史。
除了按钮，还有显示结果的区域，我们用view（传送门）来实现。
（用text和input组件也可以）
所有的按钮大小相同，5行4列，显示框横占一行：
我们先在桌面上创建一个Cal_FishC的文件夹，项目名同理。
创建新项目：
填写相关信息：
没有APPID也没关系，但有的话我们才能将程序发布出来哦～
申请请看：传送门
在index目录下，创建一个calc的子目录：
然后在calc目录下，创建4个类型的文件：
打开calc.js，添加如下代码：
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
都是自动生成的，后面会用到，先空着就好咯～
打开calc.json文件，添加如下代码：
{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor":"#fff",
"navigationBarTitleText":"鱼C-计算器",
"navigationBarTextStyle":"black"
}
关于navigationBar的玩法，请看：传送门
现在还没有效果，需要打开主目录下的app.json，将calc添加到pages数组中：
{
"pages":[
"pages/calc/calc",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
现在编译，效果：
至此，框架就搭建完成，下一讲我们来搭建页面～
课后作业
1、直接写完calc.json文件中的配之后，有效果吗？
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.org/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢小程序，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.org/forum/201803/21/151715umqz1qoywp11wjbq.gif {:10_275:} 1
页:
[1]