點擊下面網址進入視頻講解教程
## [視頻講解](https://edu.csdn.net/course/detail/9531)
上一節和大家一起寫出了屬于自己的第一個小程序,這節就帶大家寫出自己的第一個簡單計算器。由于是入門,這里先教大家簡單的加法運算。效果圖如下
實現起來特別簡單,代碼也特別少,就下面三個
- index.wxml:上圖的布局視圖頁
- index.js:實現加法邏輯的頁面
- app.json:一些全局的配置。基本是都是默認的這里不用管

下面就帶帶大家敲出屬于自己的計算器小程序代碼。
### 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}} 這種寫法,是小程序用來綁定數據用的,這里用來顯示我們的計算結果用的,
#### 上面代碼和對應的顯示如下:

## 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---借助小程序云開發實現小程序的登陸注冊功能