微信小程序获取用户信息接口调整目的以及使用方法介绍

微信小程序获取用户信息接口调整目的以及使用方法介绍

微信小程序已经调整了获取用户信息的接口，还不知道的开发者看一下官网给出的理由和方法：

为优化用户体验，使用 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.   },

复制代码

微信小程序获取用户信息接口的调整，有需要的开发者可以参考下