微信小程序開發-獲取微信用戶個人信息

 

1、背景

前段時間公司要求做微信小程序的開發，將我們現有移動端的功能在小程序上實現，由於之前是做Android開發的，對小程序其實不咋了解，但領導要求只能硬着頭皮上了。

經過一段時間的摸索，能夠做一些簡單的功能，我們的小程序需要獲取微信用戶的基本信息以及電話號碼，去做用戶綁定，所以下面就把獲取微信用戶信息的過程在此記錄一下，以便后面可以進行回顧。

微信小程序官方開發文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/

2、方法介紹

獲取微信公開的用戶信息通過 wx.getUserProfile(Object object)方法，其實在之前獲取用戶信息是通wx.getUserInfo(Object object)方法來實現的。

但微信方面對wx.getUserInfo接口做了調整，所以在此我們微信最新提供的wx.getUserProfile(Object object)方法來獲取微信用戶信息。

下面對 wx.getUserProfile(Object object) 的參數以及返回值進行簡要說明。

2.1 參數 object 

屬性	類型	默認值	必填	說明
lang	string	en	否	顯示用戶信息的語言
desc	string		是	聲明獲取用戶個人信息后的用途，不超過30個字符
success	function		否	接口調用成功的回調函數
fail	function		否	接口調用失敗的回調函數
complete	function		否	接口調用結束的回調函數（調用成功、失敗都會執行）

其中 desc 是必須要填，用於說明獲取用戶個人信息的用途。

2.2 object.lang 的合法值

值	說明	最低版本
en	英文
zh_CN	簡體中文
zh_TW	繁體中文

2.3 object.success 回調函數

參數

Object res

屬性	類型	說明	最低版本
userInfo	UserInfo	用戶信息對象	2.10.4
rawData	string	不包括敏感信息的原始數據字符串，用於計算簽名	2.10.4
signature	string	使用 sha1( rawData + sessionkey ) 得到字符串，用於校驗用戶信息，詳見 用戶數據的簽名驗證和加解密	2.10.4
encryptedData	string	包括敏感數據在內的完整用戶信息的加密數據，詳見 用戶數據的簽名驗證和加解密	2.10.4
iv	string	加密算法的初始向量，詳見 用戶數據的簽名驗證和加解密	2.10.4
cloudID	string	敏感數據對應的雲 ID，開通雲開發的小程序才會返回，可通過雲調用直接獲取開放數據，詳細見雲調用直接獲取開放數據	2.10.4

上面的方法介紹以及參數解釋均來源於微信小程序官方開發文檔。

3、具體使用

第一步、 新建一個小程序工程，建立一個測試頁面，如下所示：

​

第二步、 寫代碼

首先給 getuserinfo.wxml 中添加如下布局代碼：

<!--pages/getuserinfo/getuserinfo.wxml-->
<view>申請獲得你的公開信息(用戶昵稱、頭像、城市等)</view>
<button bindtap="getUserProfile">獲取用戶基本信息</button>
<text >獲取到的用戶信息：</text>
<rich-text >{{userInfoStr}}</rich-text>

其次在getuserinfo.js 中添加如下實現代碼：

// pages/getuserinfo/getuserinfo.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    userInfo:{},
    userInfoStr :''
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
        //查看是否授權
        wx.getSetting({
          success: function(res) {
            if (res.authSetting['scope.userInfo']) {
              console.log("用戶授權了");
            } else {
              //用戶沒有授權
              console.log("用戶沒有授權");
            }
          }
        });
  },

  getUserProfile: function(res) {
    wx.getUserProfile({
      desc: '用於微信賬號與平台賬號綁定', // 聲明獲取用戶個人信息后的用途，后續會展示在彈窗中，請謹慎填寫
      success: (res)=>{
        console.log("獲取到的用戶信息成功: ",JSON.stringify(res));
        this.setData({
          userInfo: res,
          userInfoStr: JSON.stringify(res)
        })
      },
      fail: (res)=>{
        console.log("獲取用戶個人信息失敗: ",res);
         //用戶按了拒絕按鈕
               wx.showModal({
                  title: '警告',
                  content: '您點擊了拒絕授權，將無法進入小程序，請授權之后再進入!!!',
                  showCancel: false,
                  confirmText: '返回授權',
                  success: function(res) {
                    // 用戶沒有授權成功，不需要改變 isHide 的值
                    if (res.confirm) {
                      console.log('用戶點擊了“返回授權”'); 
                    }
                  }
       });
      }
    })
},
})

完成之后，編譯運行到真機（注意一定要運行到手機真機上，不然會報getUserProfile找不到）。

4、運行結果

運行結果如下所示：

​   

 點擊 ”獲取用戶基本信息“ 按鈕：

 

點擊  ”允許“ 按鈕：

​   

 點擊 ”拒絕“ 按鈕​

  ​

好了到這里獲取微信用戶個人信息的功能基本是實現了。

如果文章對你有所幫助動動你的小手點個贊喲~

 

下一篇文章記錄一下怎樣獲取微信手機號碼。