微信小程式開發系列教程

微信小程式開發系列一：微信小程式的申請和開發環境的搭建

微信小程式開發系列二：微信小程式的檢視設計

微信小程式開發系列三：微信小程式的除錯方法

微信小程式開發系列四：微信小程式之控制器的初始化邏輯

微信小程式開發系列五：微信小程式中如何響應使用者輸入事件

通過前面五個章節的介紹，大家對微信小程式的檢視和控制器，微信偵錯程式，以及如何在微信控制器裡編寫JavaScript函式來響應微信小程式的使用者事件已經有了一個最基本的認識了。我們現在來開發一些和微信應用相關的知識，進一步鞏固以前學到的知識。

本文實現的效果：

在微信小程式上顯示一個按鈕：“獲取頭像暱稱”。

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

檢視設計：

<view class="userinfo"><button open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 獲取頭像暱稱 </button><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><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裡定義的資料模型：

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

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

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

bindgetuserinfo="jerry_getUserInfo"：指定了一個回撥函式的名稱，該回撥函式在我們的控制器index.js裡實現。當微信框架的API呼叫成功取回微信使用者明細後，會將微信使用者明細作為輸入引數，呼叫我們寫的這個回撥函式。

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

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

在微信小程式官網上有關於這個wx的所有成員說明：

https://developers.weixin.qq.com/miniprogram/dev/api/

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

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

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

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

<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設定到檢視的資料結構裡。

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等詳細資訊。

要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2213826/，如需轉載，請註明出處，否則將追究法律責任。