微信小程序獲取用戶信息接口調整目的以及使用方法介紹

微信小程序獲取用戶信息接口調整目的以及使用方法介紹

微信小程序已經調整了獲取用戶信息的接口，還不知道的開發者看一下官網給出的理由和方法：

爲優化用戶體驗，使用 wx.getUserInfo 接口直接彈出授權框的開發方式將逐步不再支持。從2018年4月30日開始，小程序與小遊戲的體驗版、開發版調用 wx.getUserInfo 接口，將無法彈出授權詢問框，默認調用失敗。正式版暫不受影響。開發者可使用以下方式獲取或展示用戶信息：
1、使用 button 組件，並將 open-type 指定爲 getUserInfo 類型，獲取用戶基本信息。 
詳情參考文檔: 
https://developers.weixin.qq.com ... mponent/button.html 
2、使用 open-data 展示用戶基本信息。 
詳情參考文檔: 
https://developers.weixin.qq.com ... nent/open-data.html

微信爲什麼要調整接口？ 

開發者可以根據需要來調取用戶信息，而不是用戶首次進入小程序就彈出授權的彈框，這樣對於用戶來說是不友好的。比如可以在用戶點擊登錄的時候再獲取用戶信息，或者提交表單的時候等等，總之可以根據業務邏輯進行開發。

然而對於我們項目的業務邏輯卻是不好的事兒，因爲我們需要在一開始就獲取用戶的信息入庫，相信很多人都會有這樣的需求，那就記錄一下我們項目的登錄。

首先自己寫一個彈框，觸發獲取信息的內容，微信小程序原生組件彈框沒有可以編輯的按鈕，所以需要我們自己來寫，如圖： 
 

代碼如下：

1. <!-- 自定義彈框開始 -->
2.   <view wx:if="{{showModel}}" class="model">
3.     <view class="modelTitle">
4.       獲取微信授權信息
5.     </view>
6.     <view class="modelBody">微信登錄需要獲取您的用戶信息，請前往設置</view>
7.     <view class="btns">
8.       <button open-type="getUserInfo" class="agree" bindgetuserinfo="agreeGetUser" lang="zh_CN">去設置</button>
9.     </view>
10.   </view>
11.   <view wx:if="{{showModel}}" class="mask"></view>
12.   <!-- 自定義彈框結束 -->

複製代碼

判斷是否授權，如果沒有授權，那麼需要自定義彈框顯示，點擊“去設置”，然後彈出授權框；如果已經授權，邏輯上就應該不再彈出任何框，這裏就需要把用戶首次進入小程序授權的用戶信息存在本地然後那來使用

1. // 登錄
2.     wx.login({
3.       success: res => {
4.         app.globalData.code = res.code
5.         //取出本地存儲用戶信息，解決需要每次進入小程序彈框獲取用戶信息
6.         app.globalData.userInfo = wx.getStorageSync('userInfo')
7.         //wx.getuserinfo接口不再支持
8.         wx.getSetting({
9.           success: (res) => {
10.             //判斷用戶已經授權。不需要彈框
11.             if(!res.authSetting['scope.userInfo']){
12.               that.setData({
13.                 showModel: true
14.               })
15.             }else{//沒有授權需要彈框
16.               that.setData({
17.                 showModel: false
18.               })
19.               wx.showLoading({
20.                 title: '加載中...'
21.               })
22.               that.getOP(app.globalData.userInfo)
23.             }
24.           },
25.           fail: function () {
26.             wx.showToast({
27.               title: '系統提示:網絡錯誤',
28.               icon: 'warn',
29.               duration: 1500,
30.             })
31.           }
32.         })
33.       },
34.       fail:function () {
35.         wx.showToast({
36.           title:'系統提示:網絡錯誤',
37.           icon: 'warn',
38.           duration: 1500,
39.         })
40.       }
41.     })
42.   },
43.   //獲取用戶信息新接口
44.   agreeGetUser:function (e) {
45.     //設置用戶信息本地存儲
46.     try {
47.       wx.setStorageSync('userInfo', e.detail.userInfo)
48.     } catch (e) {
49.       wx.showToast({
50.         title: '系統提示:網絡錯誤',
51.         icon: 'warn',
52.         duration: 1500,
53.       })
54.     }
55.     wx.showLoading({
56.       title:'加載中...'
57.     })
58.     let that = this
59.     that.setData({
60.       showModel:false
61.     })
62.     that.getOP(e.detail.userInfo)
63.   },
64.   getOP: function (res) {//提交用戶信息 獲取用戶id
65.     let that = this
66.     let userInfo = res
67.     app.globalData.userInfo = userInfo
68.     wx.request({
69.       url: 'https://xcx.xiancaijun.cn/tigerlogin/tgLogin',
70.       method: 'post',
71.       data: {
72.         "code": app.globalData.code,
73.         'userInfo': userInfo
74.       },
75.       success: function (res) {
76.         if(res.data.respcode == '0'){
77.           app.globalData.userId = res.data.uid
78.           app.globalData.keys = res.data.keys
79.           app.globalData.access = res.data.access
80.           that.getBook()
81.           that.shareInfo()
82.           if (that.data.cid) {
83.             wx.navigateTo({
84.               url: '/pages/course/course?cid=' + that.data.cid
85.             })
86.           }
87.         }else if(res.data.respcode == '15'){
88.           wx.hideLoading()
89.           wx.showToast({
90.             title:'沒有授權，不能進入小程序',
91.             icon:'none',
92.             duration:2000
93.           })
94.         }
95.  
96.       }
97.     })
98.   },

複製代碼

微信小程序獲取用戶信息接口的調整，有需要的開發者可以參考下