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，添加如下代码：

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文件中的配之后，有效果吗？



答案：

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

---

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

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

小脑斧

一笙彤

1