我們在使用微信小程序開發(fā)工具的時候，我們需要先創(chuàng)建一個項目，看微信官網(wǎ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’]) {

// 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱，不會彈框

wx.getUserInfo({

success: res => {

// 可以將 res 發(fā)送給后臺解碼出 unionId

this.globalData.userInfo = res.userInfo

// 由于 getUserInfo 是網(wǎng)絡(luò)請求，可能會在 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ā)三部分，分別是本地存儲能力展示，微信登錄展示和用戶信息獲取功能展示。由上可知通過wx.login方法得到res.code，然后將其發(fā)到后臺調(diào)用微信接口可以獲取openid等信息。

wx.getSetting方法

該方法是獲取用戶設(shè)置信息，通過此方法得到用戶對當(dāng)前程序的授權(quán)設(shè)置情況，如是否有獲取頭像權(quán)限。

用戶權(quán)限配置檢查

if (res.authSetting[‘scope.userInfo’])

這個意思是用戶是否設(shè)置了用戶授權(quán)，如果沒有，我們會彈出一個 “沒有授權(quán)”提示。如果已經(jīng)授權(quán)了，我們就使用wx.getUserInfo方法獲取資料。注意的是，因為這個方法是訪問網(wǎng)絡(luò)遠(yuǎn)程的數(shù)據(jù)，因為在訪問等待結(jié)果之前，可能我們的默認(rèn)頁面（小程序第一個頁面也是就我們常說的首頁）已經(jīng)加載完了。那么怎么判斷我們的頁面加載早于這個方法的結(jié)果返回之前呢？這里有一個巧妙的方法。我們先看一下index頁面的js文件內(nèi)容：

//index.js

//獲取應(yīng)用實例

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ò)請求，可能會在 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是否有值 ，如果有那就直接給頁面的數(shù)據(jù)賦值。

第二種情況判斷當(dāng)前微信是否支持button.open-type.getUserInfo這個版本屬性，如果有，那么重點來了：我們給app頁面增加一個方法userInfoReadyCallback，這個方法作用就是接收wx.getUserInfo的結(jié)果，然后賦值給index頁面中的數(shù)據(jù)。