小程序授权登录的体验优化

大多数小程序的登录，都是这样设计的：

进来就提示你需要授权，有部分人可能就会点“拒绝”（拒绝的比例可能超出我们的预估）

然后在后续操作的时候，就进行不下去了。而且小程序会缓存一段时间用户的授权数据，所以又没办法再弹出授权登录的页面，只能删除小程序，重新进来，重新允许授权才行

我觉得，好的体验方式是：在必须需要用户授权登录的页面或操作（比如支付，创建表单），再提醒用户。如果用户还是点“拒绝”，再弹出确认框提示“必须授权登录之后才能操作呢，是否重新授权登录？”

以《微生成》的“我的钱包”页面为例，这个页面必须要用户登录的

//公共的登录方法，只演示逻辑

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

转载于:https://www.cnblogs.com/wwlww/p/8410155.html

小程序授权登录的体验优化相关推荐

提高微信小程序的应用速度的常见方式有哪些? 小程序怎么实现下拉刷新? 简述微信小程序原理？小程序的发布流程（开发流程）分析下微信小程序的优劣势？小程序授权登录流程？小程序支付如何实现
小程序部分常见面试题提高微信小程序的应用速度的常见方式有哪些? 提高页面加载速度用户行为预测减少默认data的大小组件化方案分包预下载小程序与原生App相比优缺点? 优点: 基于微信平台开 ...
微信小程序授权登录，跳转页面后在跳回首页不用再次登录
小程序授权登录要使用wx.getUserProfile,获得用户投头像后,做一些页面跳转功能,但是如果需要再次跳转首页的话,小程序就会有回到登录前的状态,这样体验感会很差.要想不用再次登录,也不难,只 ...
新版微信小程序授权登录流程及问题汇总（getUserProfile）
问题来源:前不久去面试的时候有面试官问我你有自己的博客啥的吗?只能很尴尬的说没有.其实一直想有一个属于自己的博客啥的去记录自己在开发过程中遇到的问题,正好现在微信小程序比较流行,就花了两天自己搞了一个 ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
SpringBoot微信小程序授权登录
SpringBoot微信小程序授权登录一.appId 1.1.自己是管理者:微信公众平台,申请或登录自己的微信小程序,在开发者管理中即可看到 2.2.自己是开发者:让管理员将自己加入到小程序开发者管 ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
基于Thinkphp5+EasyWeChat+fastadmin微信小程序授权登录获取手机号微信公众号网页---联合授权登录
战前准备 1.使用 composer 安装 EasyWeChat $ composer require overtrue/wechat:~4.0 -vvv 或者在composer.json文件renq ...
微信小程序授权登录取消授权重新授权处理方法附可用代码
微信小程序授权登录基本是小程序的标配了,但是官方的demo,取消授权后,就不能再重新点击登录,除非重新加载小程序才可以,这下怎么办? 我们可以先在首页引导用户点击,然后跳转到一个新的页面,在新的页面进 ...
简单实现小程序授权登录功能
本人给大家带来了关于微信小程序的相关知识,其中主要介绍了怎么实现小程序授权登录功能的相关内容,下面一起来看一下,希望对大家有帮助. 在我们平时工作.学习.生活中,微信小程序已成为我们密不可分的一部分, ...

小程序授权登录的体验优化

小程序授权登录的体验优化相关推荐

最新文章

热门文章