零基础入门小程序002---开发简单的计算器

上一节和大家一起写出了属于自己的第一个小程序，这节就带大家写出自己的第一个简单计算器。由于是入门，这里先教大家简单的加法运算。效果图如下 1.png

实现起来特别简单，代码也特别少，就下面三个

• index.wxml：上图的布局视图页
• index.js：实现加法逻辑的页面

• app.json：一些全局的配置。基本是都是默认的这里不用管

  
  0.png
  

  下面就带带大家敲出属于自己的计算器小程序代码。

1，先看index.wxml，是不是代码特别少

<!--index.wxml  -->
<input placeholder="请输入数字a" bindinput="inputa" />
<text>+</text>
<input placeholder="请输入数字b" bindinput="inputb" />
<button bindtap='sum'>计算</button>
<text>结果为：{{result}}</text>

代码虽然少，但是作为刚入门的你，看起来可能很茫然，下面详细给大家讲下。

• <input placeholder="请输入数字a" bindinput="inputa" />
  <input placeholder="请输入数字b" bindinput="inputb" />
  就是我们输入数字a的输入框，这里<input>就是我们认识的第一个小程序组件。<input>的官方简介如下：https://developers.weixin.qq.com/miniprogram/dev/component/input.html
  placeholder：设置默认显示文字（当我们输入文字时，默认的就没有了）
  bindinput="inputa"：定义一个inputa方法来获取input的输入内容。在index.js中会用到
• <text>+</text>
  这里的<text>组件是用来显示文本的这里我们只是为了显示一个 + 号
• <button bindtap='sum'>计算</button>
  这里是个按钮<button>就是我们的计算按钮
  bindtap='sum'：定义个叫sum的方法，用来计算结果在index.js中会用到
• <text>结果为：{{result}}</text>
  {{result}} 这种写法，是小程序用来绑定数据用的，这里用来显示我们的计算结果用的，

上面代码和对应的显示如下：

4.jpg

2，再来看index.js，我们加法的逻辑实现

可以看到我们在index.wxml里定义的bindinput="inputa"，bindtap='sum'在下面有用到

Page({
  /**
     * 页面的初始数据
     * 初始化两个输入值
     */
  data: {
    input1: 0,
    input2: 0
  },
  //获取用户输入的值a
  inputa: function (e) {
    this.setData({
      input1: e.detail.value
    })
  },
  //获取用户输入的值b
  inputb: function (e) {
    this.setData({
      input2: e.detail.value
    })
  },
  // 拿到两个输入值以后求和
  sum: function (e) {
    var a = parseInt(this.data.input1);
    var b = parseInt(this.data.input2);
    // 求和
    var sumResult = a + b
    this.setData({
      // 把结果赋值到sum标签上
      result: sumResult
    })
  }
})

index.js的代码不多，大家可以先照着敲一下。学小程序前期不需要你理解，但是一定要多敲多练。
这里的逻辑用文字写出来，估计大家新入门时还是不太好理解，我会录视频来给大家讲解。
源码地址：链接:https://pan.baidu.com/s/1ulgabXKwXh5vu7DHUOyNNQ 密码:ud86
有问题加我微信：2501902696

系列课程

• 零基础入门小程序001----开发属于自己的第一个小程序