小程序授权登录的体验优化
大多数小程序的登录,都是这样设计的:
进来就提示你需要授权,有部分人可能就会点“拒绝”(拒绝的比例可能超出我们的预估) 然后在后续操作的时候,就进行不下去了。而且小程序会缓存一段时间用户的授权数据,所以又没办法再弹出授权登录的页面,只能删除小程序,重新进来,重新允许授权才行 我觉得,好的体验方式是:在必须需要用户授权登录的页面或操作(比如支付,创建表单),再提醒用户。如果用户还是点“拒绝”,再弹出确认框提示“必须授权登录之后才能操作呢,是否重新授权登录?” 以《微生成》的“我的钱包”页面为例,这个页面必须要用户登录的
//公共的登录方法,只演示逻辑
function login(){
var that= this
var sucess = arguments[0] ? arguments[0] : function(){};//登录成功的回调
var fail = arguments[1] ? arguments[1] : function(){};//登录失败的回调
var title = arguments[2] ? arguments[2] : '授权登录失败,部分功能将不能使用,是否重新登录?';//当用户取消授权登录时,弹出的确认框文案
var user = wx.getStorageSync('user');//登录过后,用户信息会缓存
if(!user){
wx.login({
success: function (res) {
var code = res.code;
wx.getUserInfo({
success: function (res) {
var rawData = encodeURIComponent(res.rawData);
var signature = res.signature || '';
var encryptedData = res.encryptedData;
var iv = res.iv;
that.getLoginApi(code, rawData, signature, encryptedData, iv, function (res) {//调用服务器端登录,获得详细用户资料,比如openid(支付用),保存用户数据到服务器
wx.setStorageSync("user",res)//本地缓存user数据 下次打开不需要登录
var app = getApp()
app.globalData.user = res//在当前的app对象中缓存user数据
sucess(res)
})
},
fail: function (res) {//用户点了“拒绝”
wx.showModal({
title: '提示',
content: title,
showCancel: true,
cancelText: "否",
confirmText: "是",
success: function (res) {
if (res.confirm) {
if (wx.openSetting) {// 当前微信的版本 ,是否支持openSetting
wx.openSetting({
success: (res) => {
if (res.authSetting["scope.userInfo"]) {//如果用户重新同意了授权登录
wx.getUserInfo({//跟上面的wx.getUserInfo sucess处理逻辑一样
success: function (res) {
var rawData = encodeURIComponent(res.rawData);
var signature = res.signature || '';
var encryptedData = res.encryptedData;
var iv = res.iv;
that.getLoginApi(code, rawData, signature, encryptedData, iv, function (res) {
wx.setStorageSync("user",res)
var app = getApp()
app.globalData.user = res
sucess(res)
})
}
})
} else {//用户还是拒绝
fail()
}
},
fail: function () {//调用失败,授权登录不成功
fail()
}
})
} else {
fail()
}
}
}
})
}
})
},
fail: function (res) {
fail()
}
})
}else{//如果缓存中已经存在user 那就是已经登录过
var app = getApp()
app.globalData.user = user
sucess(user)
}
}
这样的话,当用户进入“我的钱包”页面,就是这样了(如果用户已经登录过,就会直接显示内容):
1.png
2.png
3.png
|