专栏首页DeveWork提升用户体验,微信小程序“授权失败”场景的优雅处理

提升用户体验,微信小程序“授权失败”场景的优雅处理

微信小程序中提供了相关API 让开发者能获取到微信用户的相关信息,在首次去获取的时候会展示一个用户是否同意授权的对话框。Jeff 发现有不少线上的小程序都没有处理好用户“拒绝授权”导致的“授权失败”场景。

一个观点

私认为,开发微信小程序在用户授权上有一个要点:除非非常有必要,不要一进入小程序就申请授权,而是仅需要授权的页面才申请——这样让用户的心理负担没那么大。站在用户的角度,有时候我是很讨厌这种一进入小程序就申请授权的行为,毕竟头像昵称这些本质上还是属于用户的隐私,你小程序不给个理由就要拿去,我还是很反感的。同时,也应该做好因用户拒绝授权导致的“授权失败”场景的优雅处理。

分享解决方案

现在就分享我在开发自己的微信小程序“DeveWork+”中针对“授权失败”场景的一种自认为还算优雅的处理方案。如果你有兴趣,可以通过下面的小程序码进入体验一下其用户授权流程。

“DeveWork+”小程序有一个阅读记录页面,用来记录当前使用用户浏览文章的历史。下面是处理方案细节:

1)阅读记录页面我是放在第三个TAB,用户首次进入及加载首页的过程并无申请授权的相关代码。

2)当用户首次点击到阅读记录页面,如下图,除了弹出常规的用户授权对话框,用户也能看到“阅读记录仅保存在设备…”这段文字,消除一些忌讳数据被远程保留的用户的心理负担。

3)用户点击同意授权固然好,但如果是拒绝授权,会弹出一个提示予以详细说明授权的必要性(如下图):

4)用户只有点击“确定”的选择,点击后会跳转到用户信息设置页面,需要手动勾选(如下图)。如果此时用户依然拒绝,后续只要切换到阅读记录页面,均会一直弹上图的对话框。

具体实现

微信小程序在基础库1.2 版本中提供了wx.getSetting 这个接口可以获取到用户的当前设置。利用这个接口我们就可以进行二次判断用户的授权状态,如果回调失败,则可以弹对话框说明并通过wx.openSetting 这个接口进入到设置页面。

以下是“DeveWork+”的实现代码:

1)首先在util.js 中加入一段用来判断是否为空对象的函数。这个函数在后面wx.getSetting 中可以用来判断用户是否是第一次授权。

// https://devework.com/weixin-weapp-auth-failed.html // 是否为空对象 function isEmptyObject(e) { var t; for (t in e) return !1; return !0 }

2)在需要授权的页面的onload 生命周期中添加常规的获取用户信息代码(此代码与官方的quickstart 一致,不全部重复)。

// https://devework.com/weixin-weapp-auth-failed.html var that = this; //调用应用实例的方法获取全局数据 this.getUserInfo(function (userInfo) { //更新用户数据 that.setData({ userInfo: userInfo }) });

3)另外新建一个checkSettingStatu 函数来检测用户授权状态。

// https://devework.com/weixin-weapp-auth-failed.html // 检测授权状态 checkSettingStatu: function(cb) { var that = this; // 判断是否是第一次授权,非第一次授权且授权失败则进行提醒 wx.getSetting({ success: function success(res) { console.log(res.authSetting); var authSetting = res.authSetting; if (util.isEmptyObject(authSetting)) { console.log('首次授权'); } else { console.log('不是第一次授权', authSetting); // 没有授权的提醒 if (authSetting['scope.userInfo'] === false) { wx.showModal({ title: '用户未授权', content: '如需正常使用阅读记录功能,请按确定并在授权管理中选中“用户信息”,然后点按确定。最后再重新进入小程序即可正常使用。', showCancel: false, success: function (res) { if (res.confirm) { console.log('用户点击确定') wx.openSetting({ success: function success(res) { console.log('openSetting success', res.authSetting); } }); } } }) } } } }); }

PS: 如果你觉得这段代码层层回调有点恶心,可自行引入Promise 来改写代码。

4)checkSettingStatu 函数绑定到onShow 生命周期,这样在“授权失败”场景下一进入页面就提醒。

// https://devework.com/weixin-weapp-auth-failed.html onShow: function(){ this.checkSettingStatu(); }

文末

以上就是Jeff 的一个解决方案,本文仅抛砖引玉,如果你觉得有更好的,不妨也告诉我~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 为你的WordPress 主题添加结构化数据/丰富文本摘要,高亮搜索结果(下)

    为了方便写文章与读者阅读,特将本文分为上下两个部分。上一篇请点击这里查阅,这一篇接着上一篇来。特别提醒,要查看添加后的效果,可以使用谷歌的 结构化数据测试工具 ...

    Jeff
  • WordPress 会自动压缩JPEG 格式的图像?

    在老外的一篇文章那里看到一个Jeff 之前不知道的信息:当jpeg 格式的图像被上传到WordPress,它会自动压缩图片为原来的90% 。不过那个谁说得好:“...

    Jeff
  • WordPress中添加自定义评论表情包的方法(附三套表情包下载)

    如果你知道的话,WordPress中的默认评论表情是非常丑陋的。难听点,如果一个不错的主题调用的是WordPress默认的表情包,那么这就成了这个主题的败笔。J...

    Jeff
  • linux服务器安全配置实例(二)用户账户权限配置

    豌豆贴心提醒,本文阅读时间7分钟 没有绝对的安全 在上一篇文章《linux服务器安全配置实例(一)》中介绍了我对ssh服务的一些常用的安全配置和性能优化。 ...

    小小科
  • 干货|抢占流量风口 看三点选出最优零售电商小程序

    腾讯财报显示,微信月活跃用户已达到12亿,小程序能够引流的流量池越来越大。同样,商家的微信小程序用户也越来越活跃,电商类小程序交易量是去年同期的27倍,成为零售...

    云店加小程序分享
  • 计算机网络基础(了解完这些你就不再是小白了)

    一、协议 1.1 随处可见的协议 互联网中常用的代表性的协议有IP、TCP、HTTP等,LAN中常用协议有IPX、SPX等。“计算机网络体系结构”将这些网络...

    不吃小白菜
  • Leetcode【429、559、589、590、669】

    二叉树的最大深度为 max(self.maxDepth(root.left), self.maxDepth(root.right)) + 1,拓展到 N 叉树,...

    echobingo
  • 一起来看看词性标注

    本文根据自己的学习过程以及查阅相关资料的理解,对自然语言基础技术之词性标注进行了相对全面的简绍,包括定义、目前的难点以及常见方法,还推荐了一大波 Python ...

    用户1737318
  • HTML5 简介(三):利用 History API 无刷新更改地址栏

    HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接,配合 AJAX 可以做到无刷新跳转。

    山河木马
  • 正则表达式-分隔符示例

    文本中经常需要匹配分隔符内的内容,像程序中的注释以/*开头,*/结尾;双引号""内的字符等,我们今天以这个例子来一步步的构建这个正则表达式

    Dylan Liu

扫码关注云+社区

领取腾讯云代金券