筆者由於工作需要，曾經參加過一個微信小程式同 SAP 系統整合的專案，因此從零開始學習了微信小程式的開發知識。這裡透過系列文章把自己所學分享出來，希望對相關學習者有所幫助。

本教程前面兩篇文章：

- [微信小程式開發系列 (一) ：開發環境搭建和微信小程式的檢視設計與開發](https://xie.infoq.cn/article/4ca57a6eead2ab45914366874)
- [微信小程式開發系列 (二) ：微信小程式的單步除錯和控制器實現步驟概述](https://xie.infoq.cn/article/7fbce173a83e9de4e46971b43)

透過本教程前面兩篇文章的介紹，大家對微信小程式的檢視和控制器，以及微信偵錯程式的用法已經有了一個最基本的認識了。在這個基礎上，讓我們進一步學習微信小程式控制器，掌握在小程式控制器中響應使用者輸入的方法。

這個例子很簡單，在微信小程式的檢視 `index.wxml` 裡，我定義了一個按鈕，和一個文字元素。

![](https://img-blog.csdnimg.cn/img_convert/1c5873d8608786a7780045032b3ccd1b.png)

```html
<button bindtap="jerry_increase"> 點我加1 </button>
<text class="user-motto">{{counter}}</text>
```
文字元素繫結到小程式資料模型的 `counter` 欄位上，是一個計數器。按鈕繫結了一個事件處理函式 `jerry_increase`.

每點選一次按鈕，微信小程式 UI 上的計數器加一。

為此，首先需要在控制器 `index.js` 的 data 資料模型裡增添一個 `counter` 欄位。

![](https://img-blog.csdnimg.cn/img_convert/3496225df50c3e5c9c8007fc04b7effd.png)

然後實現 `button` 的 `bindtap` 繫結的函式 `jerry_increase`.

可以看到這個事件處理函式有一個輸入引數 e：

![](https://img-blog.csdnimg.cn/img_convert/f2adc40fd2686407c317a27e3a4a3ed4.png)

當事件處理函式被呼叫時，這個輸入引數 e 是微信框架自動傳入到事件處理函式的。透過微信開發者工具的偵錯程式可以看到這個引數 e 的明細：`tap` 事件發生的 X 和 Y 座標，以及事件型別 tap.

![](https://img-blog.csdnimg.cn/img_convert/7eaa0a6e6fe6a3f60a76a2ca462991f4.png)

我們如果從當前控制器事件處理函式執行棧向外觀察，發現它的前一層，即微信框架層的處理邏輯裡，在呼叫事件處理函式前後分別取兩個當前的時間戳。如果時間戳之差大於 1000 毫秒，會執行第 `30365` 行的 `Reporter.slowReport`.

由此我們看出，微信希望開發者實現的事件處理函式要儘可能高效，執行時間不能超過 1 秒。在手機使用場景裡，1 秒的等待時間對於終端使用者來說不算短了。

![](https://img-blog.csdnimg.cn/img_convert/3875964c1815f0b11106af1175562fc0.png)

另一個值得一提的知識點是，如果直接用 `JavaScript` 修改資料模型的值，則 UI 不會有任何變化。

下面是錯誤的做法：

```javascript
jerry_increase: function(e){
     this.data.counter = this.data.counter + 1;
},
```

下面是正確的做法：

```javascript
jerry_increase: function(e){
  this.setData({
       counter: this.data.counter + 1
});
},
```

我們可以透過單步除錯正確的做法來理會其中的奧妙：

![](https://img-blog.csdnimg.cn/img_convert/4e46ee38a6c3b7d87f16ec756c58d134.png)

可以看到 `this.setData` 裡面會呼叫微信框架的 `c.default.emit` 函式，把最新的資料透過 `emit` 函式投遞出去。

![](https://img-blog.csdnimg.cn/img_convert/0e3e9769de0be1a5c02d30d201cf5841.png)

繼續檢視 `emit` 的實現，可以發現 `emit` 又呼叫了微信工具類 `wx` 的方法：invokeWebviewMethod。

從 WAService.js 的內部實現，我們能發現其實微信小程式在手機上的執行實際是執行在 WebView 裡的。

![](https://img-blog.csdnimg.cn/img_convert/1ab6dc1555f1233e08f9ba5108cc35a6.png)

一旦 `WeixinJSBridge.publish.apply(WeixinJSBridge, e)` 這一行程式碼執行完畢，UI 上的計數器才被重新整理。

![](https://img-blog.csdnimg.cn/img_convert/52570e41c0b7091824101b0ff630b395.png)

本文介紹瞭如果在微信小程式裡編寫 JavaScript 來響應 button 的點選事件。
本系列的下一篇文章會介紹微信小程式的 button 元件提供的一些微信原生功能，比如獲取當前使用者資訊等強大功能的用法。

# 微信框架 API 的呼叫

透過迄今為止的介紹，大家對微信小程式的檢視和控制器，微信偵錯程式，以及如何在微信控制器裡編寫 JavaScript 函式來響應微信小程式的使用者事件，已經有了一個最基本的認識了。

我們現在來開發一個微信小程式的實際例子，進一步鞏固以前學到的知識。

這個例子的效果如下：在微信小程式上顯示一個按鈕：`獲取頭像暱稱`。

![](https://img-blog.csdnimg.cn/img_convert/59e8c74ab6e3a1feaadfcfc1d2e47a98.png)

點選之後，微信小程式會自動透過微信框架提供的 `API` 把當前點選這個按鈕的微信使用者的明細，比如暱稱，頭像，所在省份，城市等資訊取回來，並且顯示在小程式頁面上, 如下圖所示。

![](https://img-blog.csdnimg.cn/img_convert/cb57c29441188b26ea90cdbc9a7f0dd1.png)

檢視設計：

```html
<view class="userinfo">

<button open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 獲取頭像暱稱 </button>

<text class="userinfo-nickname">{{userInfo.nickName}}</text>

<text class="userinfo-nickname">{{userInfo.city}}</text>

<text class="userinfo-nickname">{{userInfo.country}}</text>

<text class="userinfo-nickname">{{userInfo.province}}</text>

</view>
```

這個檢視裡一共有 6 個 UI 元素，其中 1 個 button 元素，1 個 image 元素和 4 個 text 元素。

button 元素負責響應使用者點選事件，呼叫微信框架的 API 讀取使用者明細。

1 個 image 元素負責顯示點選該按鈕的微信使用者頭像，剩下的 4 個 text 元素顯示微信使用者的明細。後 5 個UI元素的繫結路徑均為 `userInfo`，而 `userInfo` 的資料是點了 button 後透過呼叫微信 API 讀取的。

這個 userInfo 是我們在控制器 index.js 裡定義的資料模型：

```javascript
Page({
   data: {
         userInfo: {}
   }
});
```

我們回過頭來看本文這個小程式最重要的 `button` 元素，它有兩個屬性：

- open-type="getUserInfo" ：說明該 button 點選之後，自動呼叫微信框架的 API `getUserInfo`;

- bindgetuserinfo="jerry_getUserInfo"：指定了一個回撥函式的名稱，該回撥函式在我們的控制器 `index.js` 裡實現。

當微信框架的 API 呼叫成功取回微信使用者明細後，會將微信使用者明細作為輸入引數，呼叫我們寫的這個回撥函式。

![](https://img-blog.csdnimg.cn/img_convert/2a63e7a4ab510421814a2eabfc2b0546.png)

```javascript
jerry_getUserInfo: function(e) {
app.globalData.userInfo = e.detail.userInfo
      this.setData({
           userInfo: e.detail.userInfo
      });
}
```

在小程式能夠訪問的上下文裡，有一個全域性變數 `wx`，裡面包含了所有微信框架暴露出來的API：

![](https://img-blog.csdnimg.cn/img_convert/5d4279568f98847e6e2b4835b5e566ab.png)

在微信小程式[官網](https://developers.weixin.qq.com/miniprogram/dev/api/)上有關於這個 `wx`的所有成員說明：

![](https://img-blog.csdnimg.cn/img_convert/514ae3fc0fd828172287ab33ddd25277.png)

我們再試試另外一個 API：getSystemInfo.

首先在小程式檢視裡定義一個按鈕，繫結一個 JavaScript 函式 jerry_systeminfo, 用於觸發 getSystemInfo:

```html
<button bindtap="jerry_systeminfo"> 獲取系統資訊 </button>
```

然後定義七個 UI 元素，用於顯示 `getSystemInfo` 的返回結果。

```html
<text class="userinfo-nickname">{{systeminfo.model}}</text>
<text class="userinfo-nickname">{{systeminfo.pixelRatio}}</text>
<text class="userinfo-nickname">{{systeminfo.windowWidth}}</text>
<text class="userinfo-nickname">{{systeminfo.windowHeight}}</text>
<text class="userinfo-nickname">{{systeminfo.language}}</text>
<text class="userinfo-nickname">{{systeminfo.version}}</text>
<text class="userinfo-nickname">{{systeminfo.platform}}</text>
```

`wx.getSystemInfo` 返回的結果作為一個輸入引數，自動傳入到我們定義的 `success` 回撥函式里，然後再用 `setData` 設定到檢視的資料結構裡。

```javascript
jerry_systeminfo: function(){
   var that = this;
   wx.getSystemInfo({
         success: function (res) {
              var systeminfo = {};
              systeminfo.model = res.model;
              systeminfo.pixelRatio = res.pixelRatio;
              systeminfo.windowWidth = res.windowWidth;
              systeminfo.windowHeight = res.windowHeight;
              systeminfo.language = res.language;
              systeminfo.version = res.version;
              systeminfo.platform = res.platform;
              try {
                    that.setData({
                          systeminfo: systeminfo
                 });
              }
               catch(e){
                        console.log(e);
                 }
         }
  })
},
```

最後我在我的 Android 三星手機上點選“獲取系統資訊”之後，就顯示出了我三星手機的型號`SM-C7010` 等詳細資訊。

![](https://img-blog.csdnimg.cn/img_convert/6ec96f89987f2c0dc9224aaad7ea0358.png)

# 總結

本教程首先介紹了微信小程式控制器裡如何響應使用者點選事件，然後透過一個實際的如何獲取當前使用者微信暱稱和手機訊號的例子，介紹了微信小程式如何消費微信平臺 API 的方法。

本教程前面兩篇文章：

- [微信小程式開發系列 (一) ：開發環境搭建和微信小程式的檢視設計與開發](https://xie.infoq.cn/article/4ca57a6eead2ab45914366874)
- [微信小程式開發系列 (二) ：微信小程式的單步除錯和控制器實現步驟概述](https://xie.infoq.cn/article/7fbce173a83e9de4e46971b43)

微信小程式如何響應使用者點選事件和微信平臺 API 的使用方法介紹

相關文章