微信框架API如何調用

這篇文章主要介紹“微信框架API如何調用”，在日常操作中，相信很多人在微信框架API如何調用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”微信框架API如何調用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

本文實現的效果：

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

點擊之后，微信小程序會自動通過微信框架提供的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等詳細信息。

到此，關于“微信框架API如何調用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！