微信小程序開(kāi)發(fā)系列教程

微信小程序開(kāi)發(fā)系列一：微信小程序的申請(qǐng)和開(kāi)發(fā)環(huán)境的搭建

微信小程序開(kāi)發(fā)系列二：微信小程序的視圖設(shè)計(jì)

微信小程序開(kāi)發(fā)系列三：微信小程序的調(diào)試方法

微信小程序開(kāi)發(fā)系列四：微信小程序之控制器的初始化邏輯

微信小程序開(kāi)發(fā)系列五：微信小程序中如何響應(yīng)用戶輸入事件

通過(guò)前面五個(gè)章節(jié)的介紹，大家對(duì)微信小程序的視圖和控制器，微信調(diào)試器，以及如何在微信控制器里編寫JavaScript函數(shù)來(lái)響應(yīng)微信小程序的用戶事件已經(jīng)有了一個(gè)最基本的認(rèn)識(shí)了。我們現(xiàn)在來(lái)開(kāi)發(fā)一些和微信應(yīng)用相關(guān)的知識(shí)，進(jìn)一步鞏固以前學(xué)到的知識(shí)。

本文實(shí)現(xiàn)的效果：

在微信小程序上顯示一個(gè)按鈕：“獲取頭像昵稱”。

點(diǎn)擊之后，微信小程序會(huì)自動(dòng)通過(guò)微信框架提供的API把當(dāng)前點(diǎn)擊這個(gè)按鈕的微信用戶的明細(xì)，比如昵稱，頭像，所在省份，城市等信息取回來(lái)，并且顯示在小程序頁(yè)面上, 如下圖所示。

視圖設(shè)計(jì)：

<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>

這個(gè)視圖里一共有6個(gè)UI元素，其中1個(gè)button元素，1個(gè)image元素和4個(gè)text元素。button元素負(fù)責(zé)響應(yīng)用戶點(diǎn)擊事件，調(diào)用微信框架的API讀取用戶明細(xì)。

1個(gè)image元素負(fù)責(zé)顯示點(diǎn)擊該按鈕的微信用戶頭像，剩下的4個(gè)text元素顯示微信用戶的明細(xì)。后5個(gè)UI元素的綁定路徑均為userInfo，而userInfo的數(shù)據(jù)是點(diǎn)了button后通過(guò)調(diào)用微信API讀取的。

這個(gè)userInfo是我們?cè)诳刂破鱥ndex.js里定義的數(shù)據(jù)模型：

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

我們回過(guò)頭來(lái)看本文這個(gè)小程序最重要的button元素，它有兩個(gè)屬性：

open-type=”getUserInfo” ：說(shuō)明該button點(diǎn)擊之后，自動(dòng)調(diào)用微信框架的API：getUserInfo

bindgetuserinfo=”jerry_getUserInfo”：指定了一個(gè)回調(diào)函數(shù)的名稱，該回調(diào)函數(shù)在我們的控制器index.js里實(shí)現(xiàn)。當(dāng)微信框架的API調(diào)用成功取回微信用戶明細(xì)后，會(huì)將微信用戶明細(xì)作為輸入?yún)?shù)，調(diào)用我們寫的這個(gè)回調(diào)函數(shù)。

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

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

在微信小程序官網(wǎng)上有關(guān)于這個(gè)wx的所有成員說(shuō)明：

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

我們?cè)僭囋嚵硗庖粋€(gè)API：getSystemInfo

首先在小程序視圖里定義一個(gè)按鈕，綁定一個(gè)JavaScript函數(shù)jerry_systeminfo, 用于觸發(fā)getSystemInfo:

獲取系統(tǒng)信息

然后定義七個(gè)UI元素，用于顯示getSystemInfo的返回結(jié)果。

<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返回的結(jié)果作為一個(gè)輸入?yún)?shù)，自動(dòng)傳入到我們定義的success回調(diào)函數(shù)里，然后再用setData設(shè)置到視圖的數(shù)據(jù)結(jié)構(gòu)里。

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三星手機(jī)上點(diǎn)擊“獲取系統(tǒng)信息”之后，就顯示出了我三星手機(jī)的型號(hào)SM-C7010等詳細(xì)信息。

要獲取更多Jerry的原創(chuàng)技術(shù)文章，請(qǐng)關(guān)注公眾號(hào)”汪子熙”或者掃描下面二維碼:

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。