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