|
小程序授權登錄的體驗優化
大多數小程序的登錄，都是這樣設計的：
進來就提示你需要授權，有部分人可能就會點“拒絕”（拒絕的比例可能超出我們的預估） 然后在后續操作的時候，就進行不下去了。而且小程序會緩存一段時間用戶的授權數據，所以又沒辦法再彈出授權登錄的頁面，只能刪除小程序，重新進來，重新允許授權才行 
我覺得，好的體驗方式是：在必須需要用戶授權登錄的頁面或操作（比如支付，創建表單），再提醒用戶。如果用戶還是點“拒絕”，再彈出確認框提示“必須授權登錄之后才能操作呢，是否重新授權登錄？” 以《微生成》的“我的錢包”頁面為例，這個頁面必須要用戶登錄的
//公共的登錄方法，只演示邏輯
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
|