微信小程序開發系列教程

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

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

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

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

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

通過前面五個章節的介紹，大家對微信小程序的視圖和控制器，微信調試器，以及如何在微信控制器里編寫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.userInfothis.setData({userInfo: e.detail.userInfo});}

在小程序能夠訪問的上下文里，有一個全局變量wx，里面包含了所有微信框架暴露出來的API：

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

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

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

首先在小程序視圖里定義一個按鈕，綁定一個JavaScript函數jerry_systeminfo, 用于觸發getSystemInfo:

獲取系統信息

然后定義七個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的原創技術文章，請關注公眾號”汪子熙”或者掃描下面二維碼:

總結

以上是生活随笔為你收集整理的微信小程序开发系列六：微信框架API的调用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。