我們在使用微信小程序開發(fā)工具的時候，我們需要先創(chuàng)建一個項目，看微信官網給我們自動生成的代碼。
首先我們看一下app.js代碼：
App({
onLaunch: function () {
// 展示本地存儲能力
var logs = wx.getStorageSync(‘logs’) || []
logs.unshift(Date.now())
wx.setStorageSync(‘logs’, logs)
// 登錄
wx.login({
success: res => {
// 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
}
})
// 獲取用戶信息
wx.getSetting({
success: res => {
if (res.authSetting[‘scope.userInfo’]) {
// 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 發(fā)送給后臺解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
},
fail:res=>{
wx.showToast({
title: ‘getUserInfo failed’,
icon: ‘none’,
duration: 2000
})
}
})
}else{
wx.showToast({
title: ‘沒有授權’,
icon: ‘success’,
duration: 2000
})
}
}
})
},
globalData: {
userInfo: null
}
})
上面的代碼共發(fā)三部分，分別是本地存儲能力展示，微信登錄展示和用戶信息獲取功能展示。由上可知通過wx.login方法得到res.code，然后將其發(fā)到后臺調用微信接口可以獲取openid等信息。
wx.getSetting方法
該方法是獲取用戶設置信息，通過此方法得到用戶對當前程序的授權設置情況，如是否有獲取頭像權限。
用戶權限配置檢查
if (res.authSetting[‘scope.userInfo’])
這個意思是用戶是否設置了用戶授權，如果沒有，我們會彈出一個 “沒有授權”提示。如果已經授權了，我們就使用wx.getUserInfo方法獲取資料。注意的是，因為這個方法是訪問網絡遠程的數據，因為在訪問等待結果之前，可能我們的默認頁面（小程序第一個頁面也是就我們常說的首頁）已經加載完了。那么怎么判斷我們的頁面加載早于這個方法的結果返回之前呢？這里有一個巧妙的方法。我們先看一下index頁面的js文件內容：
//index.js
//獲取應用實例
const app = getApp()
Page({
data: {
motto: ‘Hello World’,
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse(‘button.open-type.getUserInfo’)
},
//事件處理函數
bindViewTap: function() {
wx.navigateTo({
url: ‘../logs/logs’
})
},
onLoad: function () {
console.log(‘page onload’);
if (app.globalData.userInfo) {
console.log(‘set data’);
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
console.log(‘canIUse’);
// 由于 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
app.userInfoReadyCallback = res => {
console.log(‘get call back’);
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
console.log(‘兼容處理’);
// 在沒有 open-type=getUserInfo 版本的兼容處理
wx.getUserInfo({
success: res => {
console.log(‘get user info success’)
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(‘do get user info’+e);
if(e){
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}else{
console.log(‘用戶選擇了拒絕’);
}
}
})
上面代碼，我們重點看onLoad這個方法里，這里做了三個判斷，第一種情況判斷app.globalData.userInfo是否有值 ，如果有那就直接給頁面的數據賦值。
第二種情況判斷當前微信是否支持button.open-type.getUserInfo這個版本屬性，如果有，那么重點來了：我們給app頁面增加一個方法userInfoReadyCallback，這個方法作用就是接收wx.getUserInfo的結果，然后賦值給index頁面中的數據。
