微信小程序開發系列六：微信框架API的調用

微信小程序開發系列教程

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

微信小程序開發系列二：微信小程序的視圖設計

微信小程序開發系列三：微信小程序的調試方法

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

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

經過前面五個章節的介紹，你們對微信小程序的視圖和控制器，微信調試器，以及如何在微信控制器裏編寫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的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: