在上几篇文章中,我的小程序版博客已经完成了列表页、专题页、详情页,本文主要记录下授权登陆的插曲,提升下用户体验。
通常授权登陆在第一次登陆小程序时提示,但很多用户会拒绝,接下来的流程就比较尴尬了。
我的想法是,当用户第一次打开小程序时,会提示授权登陆,但拒绝没有关系,依旧能加载首页列表页,专题页。
但当点进去需要阅读文章时就需要再次提醒授权,不然无法阅读,同时回到列表页,当同意时刷新页面正常加载。
具体效果大致如下:
当用户第一次打开小程序,提示授权,但当用户拒绝时依旧可以加载列表页让用户浏览。
截图1
当用户选择具体某一篇文章时,重新验证授权,并友好提示:
截图2
当用户选择是
时进入设置,设置成功后正常浏览文章,否则跳回到列表页
截图3
这里主要用到了wx.login
,wx.getUserInfo
,wx.openSetting
这三个API,可以先根据官方文档熟悉下。
因为授权获取用户基本信息一旦拒绝之后小程序就不会再出现授权窗口,所以之后的授权需要通过wx.openSetting
来实现。
getUserInfo: function (loginType, cb) {
var that = this
if (this.globalData.userInfo) {
typeof cb == "function" && cb(this.globalData.userInfo, true);
}
else {
//1.调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo;
typeof cb == "function" && cb(that.globalData.userInfo, true);
},
fail: function () {
//2.第一次登陆不强制授权,直接返回
if (loginType == 0) {
typeof cb == "function" && cb(that.globalData.userInfo, false);
}
else {
//3.授权友好提示
wx.showModal({
title: '提示',
content: "您还未授权登陆,部分功能将不能使用,是否重新授权?",
showCancel: true,
cancelText: "否",
confirmText: "是",
success: function (res) {
//4.确认授权调用wx.openSetting
if (res.confirm) {
if (wx.openSetting) {//当前微信的版本 ,是否支持openSetting
wx.openSetting({
success: (res) => {
if (res.authSetting["scope.userInfo"]) {//如果用户重新同意了授权登录
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo;
typeof cb == "function" && cb(that.globalData.userInfo, true);
}
})
} else {//用户还是拒绝
typeof cb == "function" && cb(that.globalData.userInfo, false);
}
},
fail: function () {//调用失败,授权登录不成功
typeof cb == "function" && cb(that.globalData.userInfo, false);
}
})
} else {
typeof cb == "function" && cb(that.globalData.userInfo, false);
}
}
else
{
typeof cb == "function" && cb(that.globalData.userInfo, false);
}
}
})
}
}
})
}
})
}
},
在文章详情页onload时直接调用上面的方法:
//回调方法中实现具体逻辑
app.getUserInfo(1,function(userInfo,isLogin) {
//没有授权直接返回上一页
if (!isLogin) {
wx.navigateBack();
}
else {
//具体实现逻辑,加载数据
...
}
});
体验很重要,一天优化一点点,那才会慢慢变成产品。