在本篇文章所講的用戶登錄，包括以下三點：

• open-data獲取用戶某個信息
• wx.getUserInfo獲取用戶基本信息
• 調(diào)用微信wx.login接口，實現(xiàn)服務(wù)器端獲取openid登錄

用戶頭像和昵稱對于我們開發(fā)小程序幾乎算是剛需，那么我們應(yīng)該怎么樣正確高效的獲取&利用它們呢？

第一種：open-data獲取用戶某個信息

其實可以將open-data看作圖片或字符串，想要控制樣式在外層加上view標(biāo)簽以及相應(yīng)的class即可。

image.png

相比之前微信公眾號獲取用戶基本信息的方式，這個方案還是比較走心的，如果一些小程序只是對用戶的頭像、昵稱等基本信息中的某個有需求的話就可以直接拿到了，不需要和以前一樣大費周章的調(diào)用授權(quán)去拿回來一堆用不上的東西。

還有就是這里有個小坑，open-data標(biāo)簽是個行元素，如果要控制這個標(biāo)簽，例如說頭像的大小時，就需要修改一下display屬性了

還有就是獲取手機號的方法了，這個算是敏感數(shù)據(jù)吧，所以被小程序單獨弄出來了，
并且獲取微信用戶綁定的手機號，需先調(diào)用wx.login接口。

因為需要用戶主動觸發(fā)才能發(fā)起獲取手機號接口，所以該功能不由 API 來調(diào)用，需用 <button> 組件的點擊來觸發(fā)。

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> </button> 

Page({ 
    getPhoneNumber: function(e) { 
        console.log(e.detail.errMsg) 
        console.log(e.detail.iv) 
        console.log(e.detail.encryptedData) 
    } 
}) 

微信小程序文檔提到
目前該接口針對非個人開發(fā)者，且完成了認(rèn)證的小程序開放（不包含海外主體）。需謹(jǐn)慎使用，若用戶舉報較多或被發(fā)現(xiàn)在不必要場景下使用，微信有權(quán)永久回收該小程序的該接口權(quán)限。
所以使用時還是要注意一下的

第二種：wx.getUserInfo獲取用戶基本信息

這個接口更新過可以直接使用了

wx.getUserInfo({
      success: function (res) {
        console.table(res)
      },
      fail: function (res) { },
      complete: function (res) { },
    })

image.png

因為微信基礎(chǔ)庫更新，取消通過api調(diào)用getUserInfo的能力，并且不會出現(xiàn)授權(quán)彈框了，如果需要，可以使用button組件的開放能力[open-type]去調(diào)用getUserInfo的文檔方法。

這個需要注意的是
請確保wx.login早于getUserInfo，不僅是代碼執(zhí)行層面的早，最好是login回調(diào)成功之后才去getUserInfo，不然可能會出現(xiàn)后端解密失敗的情況，導(dǎo)致登錄失敗。

第三種：調(diào)用微信wx.login接口，實現(xiàn)服務(wù)器端獲取openid登錄

wx.login({
  success: res => {
    console.log(res)
    // res = {errMsg: "login:ok", code: "×××××××××××××××××"}
    // 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
    wx.request({
      url: '/wxapi/openid',
      data: {
        code: data.code
      },
      success: function (res) {
        console.log('拉取openid成功', res)
        wx.showModal({
          title: '獲取信息',
          content: JSON.stringify(res.data),
          showCancel: false,
          confirmText: '確定'
        })
        self.globalData.openid = res.data.openid
      },
      fail: function (res) {
        console.log('拉取用戶openid失敗，將無法正常使用開放接口等服務(wù)', res)
      }
    }
})

就可以獲取到openid了，作為微信開發(fā)的都知道，微信的很多接口都需要以openid去作為參數(shù)請求接口的。

image.png

還有就是關(guān)于接口的問題
弄個后臺 請求一下微信的接口

'https://api.weixin.qq.com/sns/jscode2session' + 
        '?appid=' + config.appid + 
        '&secret=' + config.secret + 
        '&js_code=' + code + 
        '&grant_type=authorization_code'

傳進去一個code，然后在加上自己的appid及密鑰就可以了

image.png