点击下面网址进入视频讲解教程
## [视频讲解](https://edu.csdn.net/course/detail/9531)
上一节和大家一起写出了属于自己的第一个小程序,这节就带大家写出自己的第一个简单计算器。由于是入门,这里先教大家简单的加法运算。效果图如下![1.png](https://upload-images.jianshu.io/upload_images/6273713-2f2c73e17776c8fb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
实现起来特别简单,代码也特别少,就下面三个
- index.wxml:上图的布局视图页
- index.js:实现加法逻辑的页面
- app.json:一些全局的配置。基本是都是默认的这里不用管
![0.png](https://upload-images.jianshu.io/upload_images/6273713-2b8639cf9f1fc8ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
下面就带带大家敲出属于自己的计算器小程序代码。
### 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>
```
这里是个按钮就是我们的计算按钮
bindtap='sum':定义个叫sum的方法,用来计算结果在index.js中会用到
- <text>结果为:{{result}}</text>
{{result}} 这种写法,是小程序用来绑定数据用的,这里用来显示我们的计算结果用的,
#### 上面代码和对应的显示如下:
![4.jpg](https://upload-images.jianshu.io/upload_images/6273713-cb3653260d35d837.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
## 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://edu.csdn.net/course/detail/9531)
有问题加我微信:2501902696
- 001注册小程序&认识微信小程序官方开发工具
- 002开发属于自己的第一个简单小程序
- 003开发简单的小程序计算器
- 004列表功能实现-005json数据解析
- 006请求首页文章列表数据
- 007文章列表数据解析与布局
- 008使用tabbar实现底部导航栏
- 009开发个人中心&&010登陆与授权
- 011小程序联系客服和拨打客服电话功能实现
- 012反馈与建议
- 013页面跳转的实现&&014文章详情页的实现
- 015获取小程序用户的唯一标示openid
- 020小程序开发过程中常见问题解答
- 赠送课002---借助小程序云开发获取小程序用户openid
- 赠送课003---借助小程序云开发实现小程序的登陆注册功能