引言
通常微信小程序必不可少的会有获取用户信息的功能，但官方出具通知了，对获取用户信息接口进行了调整。
规则改，小程序从业者就得跟着改~ 调整通知地址：小程序与小游戏获取用户信息接口调整，请开发者注意升级。
接口调整内容
由于收到开发者的反馈，为了方便开发者更好地使用获取用户信息的接口，开发者仍然可以使用 wx.getUserInfo 接口获取用户信息。
具体优化调整如下：
- 获取用户头像昵称，第一次需要使用
button组件授权，如果已经用组件授权了，wx.getUserInfo可直接返回用户数据，无需重复授权弹窗。 - 如果没有用
button组件授权，wx.getUserInfo调用接口返回失败，提醒开发者需要先使用button组件授权。 - 用户可在设置中，
取消授权。取消授权后需重新用button组件拉起授权。
为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。开发者可使用以下方式获取或展示用户信息：
一、小程序:
1、使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。
详情参考文档:
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
2、使用 open-data 展示用户基本信息。
详情参考文档:
https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html
试用下来感觉open-data还是比较好替换的~
解决方案
app.js
// 获取用户信息
wx.getSetting({
success: res => {
console.info("获取用户信息 getSetting 回调结果:")
console.info(res)
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
}),
globalData: {
userInfo: null
}
需要展示我的页面
在展示用户信息之前需要授权。
授权页面
mine.wxml
<view class='page'>
<view wx:if="{{!hasUserInfo}}"> </view>
<view wx:else="{{hasUserInfo}}">
<view class="userinfo">
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<!-- 除了用户信息以外的页面 -->
</view>
</view>
mine.js
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
var that = this
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
// 能支持open-type=getUserInfo 版本的做法
// 跳转到授权页面
wx.navigateTo({
url: '../author/author'
})
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
})
author.wxml
<view class='page'>
<image class='logo' src='../../images/author/betterlife.png'></image>
<text class='text_apply'>宜居生活申请获得以下权限：</text>
<text class='text_warn'>获得你的公开信息（昵称、头像等）</text>
<button class="author_button" type='warn' open-type="getUserInfo" bindgetuserinfo="getUserInfo" size='default'> 确认授权 </button>
</view>
author.wxss
.page {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.logo{
width: 240rpx;
height: 296.3rpx;
margin-top: 110rpx;
margin-bottom: 110rpx;
}
.text_apply{
font-size: 18px;
margin-top: 27.778rpx;
}
.text_warn{
font-size: 14px;
margin-top: 27.778rpx;
margin-bottom: 69.444rpx;
color: grey;
}
.author_button{
width: 729.17rpx;
}
author.js
getUserInfo: function (e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
wx.switchTab({
url: '../mine/mine'
})
}
