微信可能是国内最注重用户体验的一款软件了吧,张小龙对于产品的把控及理念让人佩服不已。基于微信的小程序当然也不会放任开发者肆意去xx用户体验。小程序的授权最初搞的我头大,什么wx.authorize()、wx.getSetting()、wx.getUserInfo等等,什么时候该用什么方法调用,着实让我绕了半天。接下来总结一下我的开发心得及授权的小技巧。
wx.getUserInfo()&&wx.openSetting()
小程序内获取用户信息的接口,一般进入小程序或者公众号都会有此提示:“是否同意xxx获取您的个人信息”。这个只会拿到用户的一些基本的非关键信息,如昵称、头像、性别、省市、国家、语言等。1
2
3
4
5
6
7
8
9
10wx.getUserInfo({
success: function(res) {
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性别 0:未知、1:男、2:女
...
},
fail: res => {}
})
第一次调用这个接口会弹窗询问用户是否允许小程序获取个人信息,如果用户点击确定,则走success,下次用户再进来时不会弹窗,而是直接走success拿到用户信息。如果用户拒绝,那么就很蛋疼了,直接走fail,而且短期内就算调用wx.getUserInfo()接口,也不会再次弹窗询问,而是直接走fail。如果页面必须要获取用户的信息授权或者说用户第一次手抖点成了拒绝,那么如何再次调起弹窗获取用户授权呢?
只使用wx.getUserInfo()是不行的,幸好小程序提供了一个wx.openSetting(),打开授权列表开关页,就好像手机设置中的通知授权开关页面一样,引导用户自己打开授权。所以我的思路是:先调用wx.getUserInfo(),如果用户点了确定,就直接走到success,拿到信息;如果点了拒绝,那么在fail接口中,使用wx.showModel()来询问用户是否要再次授权,确定的话就用wx.openSetting()打开setting页让用户自己打开授权,取消的话那就根据业务需要,展示相应的内容。代码如下:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34wx.getUserInfo({
success: res => {
//用户点了允许,这里可以拿到用户的信息
},
fail: res => {
//用户拒绝,再次弹窗询问是否要再次授权
wx.showModal({
title: '温馨提示',
content: '无法获取您的用户信息,点击确定重新进行授权,点击取消继续浏览',
success: function (res) {
if (res.confirm) { //点击了确定
wx.openSetting({ //打开setting页面
success: res => { //返回授权后的信息,再进行判断
if (res.authSetting['scope.userInfo']) { //如果userInfo 的授权有了
wx.getUserInfo({ //再次调用wx.getUserInfo拿用户数据,这次一定走success
success: res => {
//拿到用户信息
},
fail: res => {
console.log(res); //用户授权了却没拿到信息,不可知错误
}
})
} else {
//用户在setting页面依然没有打开授权,那么根据业务显示无用户信息的内容
}
}
});
} else if (res.cancel) { //点击了取消,用户再次拒绝授权个人信息
//用户就是不给你授权,自己业务办法解决,要么就直接拒绝用户进入,要么显示其他内容
}
}
})
}
})
这个逻辑也适用于获取用户定位信息的时候用,做地图定位导航的话是必须要有用户定位信息的,不给就不显示地图咯,给用户提示明白。这段逻辑代码就算用户第一次拒绝掉授权,再次进来页面的时候依然会弹窗提示用户自己去授权。