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