首先附上官方文檔地址和授權(quán)流程
官方地址：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
流程圖：
大致邏輯：授權(quán) -> 發(fā)送code到服務(wù)器獲取session_key - > 保存在小程序緩存內(nèi) -> 調(diào)用wx.getUserInfo和session_key獲取用戶信息 -> 登錄成功返回訪問token -> 記錄登錄狀態(tài) -> 執(zhí)行登錄成功監(jiān)聽（失敗則不監(jiān)聽）
直接上代碼，一下均為小程序組件模式有興趣的可以看下官方文檔
創(chuàng)建components（自定義名稱）文件夾pages文件夾同級主要放置組件文件
創(chuàng)建 authorize （自定義名稱）文件夾 還是一樣的創(chuàng)建 對應(yīng)的authorize.js ，authorize.wxml .authorize.wxss,authorize.json特別注意這里的 authorize.json 文件里面要定義當前頁面為組件
{"component": true}到這里準備工作完成
authorize.js 換成組件的寫法，具體參考小程序官方文檔，這里展示我定義的
Component({ //組件的對外屬性 說的確實很官方，用過vue組件的就很容易理解這點 //父級向子級傳值這里就是接收值得地方 properties:{ //名稱要和父級綁定的名稱相同 //這里主要是控制自動授權(quán)彈框是否顯示 true=隱藏 false=顯示 iShidden:{ type:Boolean,//定義類型 value: true,//定義默認值 }, //是否自動登錄 這里主要用于沒有授權(quán)是否自動彈出授權(quán)提示框 //**用在不自動登錄頁面但是某些操作需要授權(quán)登錄** isAuto:{ type: Boolean, value: true, }, }, //組件的內(nèi)部數(shù)據(jù)，和 properties 一同用于組件的模板渲染 data:{ cloneIner:null }, //組件所在頁面的生命周期聲明對象 pageLifetimes:{ //頁面隱藏 hide:function(){ //關(guān)閉頁面時銷毀定時器 if(this.data.cloneIner) clearInterval(this.data.clearInterval); }, //頁面打開 show:function(){ //打開頁面銷毀定時器 if (this.data.cloneIner) clearInterval(this.data.clearInterval); }, }, //組件生命周期函數(shù)，在組件實例進入頁面節(jié)點樹時執(zhí)行 attached(){ }, //組件的方法 methods:{ } }）;注：以下的方法都需寫在 methods 內(nèi)
第一步：未授權(quán)用戶判斷是否執(zhí)行授權(quán)還是直接進行獲取用戶信息
//檢測登錄狀態(tài)并執(zhí)行自動登錄 setAuthStatus(){ var that = this; that.setErrorCount(); wx.getSetting({ success(res) { //這里會檢測是否授權(quán)，如果授權(quán)了會直接調(diào)用自動登錄 if (!res.authSetting['scope.userInfo']) { //沒有授權(quán)不會自動彈出登錄框 if (that.data.isAuto === false) return; //自動彈出授權(quán) that.setData({ iShidden: false }); } else { //自動登錄 that.setData({ iShidden: true }); if (app.globalData.token) { //這里是授權(quán)回調(diào) that.triggerEvent('onLoadFun', app.globalData.token); that.WatchIsLogin(); } else { wx.showLoading({ title: '正在登錄中' }); //這里是已授權(quán)調(diào)用wx.getUserInfo that.getUserInfoBydecryptCode(); } } } }) }第二步，沒有授權(quán)執(zhí)行打開授權(quán)彈出框
//授權(quán) setUserInfo(e){ var that = this, pdata={}; pdata.userInfo = e.detail.userInfo; pdata.spid = app.globalData.spid; wx.showLoading({ title: '正在登錄中' }); wx.login({ success: function (res) { if (!res.code) return app.Tips({ title: '登錄失??！' + res.errMsg}); //獲取session_key并緩存 that.getSessionKey(res.code, function () { that.getUserInfoBydecryptCode(); }); }, fail() { wx.hideLoading(); } }) }, //從緩存中獲取session_key，如果沒有則請求服務(wù)器再次緩存 getSessionKey(code,successFn,errotFn){ var that=this; wx.checkSession({ success: function (res){ if(wx.getStorageSync('session_key')) successFn && successFn(); else that.setCode(code, successFn, errotFn); }, fail:function(){ that.setCode(code, successFn, errotFn); } }); }, //訪問服務(wù)器獲得session_key 并存入緩存中 setCode(code, successFn, errotFn){ var that = this; app.basePost(app.U({ c: 'Login', a: 'setCode' }), { code: code }, function (res) { wx.setStorageSync('session_key', res.data.session_key); successFn && successFn(res); }, function (res) { if (errotFn) errotFn(res); else return app.Tips({ title: '獲取session_key失敗' }); }); }第三步：執(zhí)行g(shù)etUserInfoBydecryptCode 登錄獲取訪問權(quán)限
getUserInfoBydecryptCode: function () { var that = this; var session_key = wx.getStorageSync('session_key') //沒有獲取到session_key,打開授權(quán)頁面 //這里必須的判斷存在緩存中的session_key是否存在，因為在第一步的時候，判斷了 //授權(quán)了將自動執(zhí)行獲取用戶信息的方法 if (!session_key) { wx.hideLoading(); if(that.data.isAuto) that.setData({ iShidden: false }) return false; }; wx.getUserInfo({ lang: 'zh_CN', success: function (res) { var pdata = res; pdata.userInfo = res.userInfo; pdata.spid = app.globalData.spid;//獲取推廣人ID pdata.code = app.globalData.code;//獲取推廣人分享二維碼ID if (res.iv) { pdata.iv = encodeURI(res.iv); pdata.encryptedData = res.encryptedData; pdata.session_key = session_key; //獲取用戶信息生成訪問token app.basePost(app.U({ c: 'login', a: 'index' }), { info: pdata},function(res){ if (res.data.status == 0) return app.Tips( { title: '抱歉，您已被禁止登錄!' }, { tab: 4, url: '/pages/login-status/login-status' } ); else if(res.data.status==410){ wx.removeStorage({ key:'session_key'}); wx.hideLoading(); if (that.data.iShidden == true) that.setData({ iShidden: false }); return false; } //取消登錄提示 wx.hideLoading(); //關(guān)閉登錄彈出窗口 that.setData({ iShidden: true, ErrorCount:0}); //保存token和記錄登錄狀態(tài) app.globalData.token = res.data.token; app.globalData.isLog = true; //執(zhí)行登錄完成回調(diào) that.triggerEvent('onLoadFun', app.globalData.uid); //監(jiān)聽登錄狀態(tài) that.WatchIsLogin(); },function(res){ wx.hideLoading(); return app.Tips({title:res.msg}); }); } else { wx.hideLoading(); return app.Tips({ title: '用戶信息獲取失敗!'}); } }, fail: function () { wx.hideLoading(); that.setData({ iShidden: false }); }, }) }第四步：監(jiān)聽登錄狀態(tài)
再服務(wù)器無法獲取到token時，當前頁面會一直監(jiān)聽token是否為空，防止無限獲取token設(shè)置錯誤次數(shù)，終止監(jiān)聽
監(jiān)聽token的用意為：token是服務(wù)器返回當前用戶的訪問憑證，憑證有過期的時候這時候所有的網(wǎng)絡(luò)請求將無法訪問，所以用了一個愚蠢的方法來監(jiān)聽token
//監(jiān)聽登錄狀態(tài) WatchIsLogin:function(){ this.data.cloneIner=setInterval(function(){ //防止死循環(huán),超過錯誤次數(shù)終止監(jiān)聽 if (this.getErrorCount()) return clearInterval(this.data.clearInterval); if (app.globalData.token == '') this.setAuthStatus(); }.bind(this),800); this.setData({ cloneIner:this.data.cloneIner}); } /** * 處理錯誤次數(shù),防止死循環(huán) * */ setErrorCount:function(){ if (!this.data.ErrorCount) this.data.ErrorCount=1; else this.data.ErrorCount++; this.setData({ ErrorCount: this.data.ErrorCount}); }, /** * 獲取錯誤次數(shù),是否終止監(jiān)聽 * */ getErrorCount:function(){ return this.data.ErrorCount >= 10 ? true : false; }以上就是組件內(nèi)全部的方法需要在組件生命周期函數(shù)內(nèi)調(diào)用第一步的方法檢測授權(quán)，執(zhí)行登錄
attached(){ this.setAuthStatus(); }注：在網(wǎng)絡(luò)請求中一定要處理token失效的操作，主要把 app.globalData.token和app.globalData.isLog 設(shè)置回空和false
這里附上沒有定義的一些app內(nèi)公用的快捷方法以下的方法最好是寫在其他文件里面在app.js里面寫一個快捷調(diào)用的方法
/** post網(wǎng)絡(luò)請求 * @param string | object 請求地址* @param object data POST請求數(shù)組* @param callable successCallback 成功執(zhí)行方法* @param callable errorCallback 失敗執(zhí)行方法*/const basePost = function (url, data, successCallback, errorCallback, header) { if (typeof url == 'object') url = U(url); wx.request({ url: url, data: data, dataType : 'json', method: 'POST', header: header, success: function (res) { try{ if (res.data.code == 200) { successCallback && successCallback(res.data); } else { if (res.data.code == 402) getApp().globalData.token = '', getApp().globalData.isLog = false; //返回狀態(tài)為401時,用戶被禁止訪問 關(guān)閉當前所有頁面跳轉(zhuǎn)至用戶禁止登錄頁面 if (res.data.code == 401) return Tips({ title: res.data.msg}, { tab: 4, url:'/pages/login-status/login-status'}); errorCallback && errorCallback(res.data); } } catch (e) { console.log(e); } }, fail: function (res) { errorCallback && errorCallback(res); }, complete: function (res) { } });}/** 組裝URl*@param object opt */const U = function (opt, url) { var m = opt.m || 'routine_two', c = opt.c || 'auth_api', a = opt.a || 'index', q = opt.q || '', p = opt.p || {}, params = '', gets = ''; if (url == undefined) url=getApp().globalData.url; params = Object.keys(p).map(function (key) { return key + '/' + p[key]; }).join('/'); gets = Object.keys(q).map(function (key) { return key + '=' + q[key]; }).join('&'); return url + '/' + m + '/' + c + '/' + a + (params == '' ? '' : '/' + params) +'.html'+ (gets == '' ? '' : '?' + gets);}代碼量有點多，都是能用到的，望大神們多多指點
本小程序后臺框架由 http://github.crmeb.net/u/blue 提供
TP5+EasyWeChat技術(shù)支持
如果對微信小程序授權(quán)不熟悉的可以用 EasyWeChat，確實好用；不是來吹這個EasyWeChat來了，只是個人覺得好用勿噴
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點
疑難解答
