這篇文章主要介紹微信小程序開發(fā)頁面攔截器的示例，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)民勤免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

場景

• 小程序有52個頁面，其中13個頁面無需任何身份，另外39個頁面需要系統(tǒng)角色。對于這39個頁面，如果微信用戶沒有系統(tǒng)角色，則跳轉(zhuǎn)到登錄頁。

• 是否有系統(tǒng)角色信息需要通過異步請求來獲取。

需求分析&實現(xiàn)

對需求進(jìn)行抽象，其實要的就是一個過濾器，對小程序頁面的訪問進(jìn)行過濾，符合條件的通過，不符合條件進(jìn)行其他處理。

使用過php的laravel框架的童鞋，肯定一下子就聯(lián)想到了laravel框架的http中間件:

HTTP 中間件提供一個方便的機(jī)制來過濾進(jìn)入應(yīng)用程序的 HTTP 請求，例如，Laravel 默認(rèn)包含了一個中間件來檢驗用戶身份驗證，如果用戶沒有經(jīng)過身份驗證，中間件會將用戶導(dǎo)向登錄頁面，然而，如果用戶通過身份驗證，中間件將會允許這個請求進(jìn)一步繼續(xù)前進(jìn)。當(dāng)然，除了身份驗證之外，中間件也可以被用來執(zhí)行各式各樣的任務(wù)，CORS 中間件負(fù)責(zé)替所有即將離開程序的響應(yīng)加入適當(dāng)?shù)捻憫?yīng)頭，一個日志中間件可以記錄所有傳入應(yīng)用程序的請求。

令人憂桑的是，微信小程序并沒有提供針對Page實例的中間件機(jī)制。所以只能從Page實例的生命周期處下手。

對于onLoad,一個頁面只會調(diào)用一次；對于onShow,每次打開頁面(比如小程序從后臺轉(zhuǎn)到前臺)都會調(diào)用一次。

在onLoad或者onShow鉤子函數(shù)里，對用戶身份進(jìn)行校驗，通過后則拉取該頁面需要的數(shù)據(jù)，否則跳轉(zhuǎn)到登錄頁。

//orderDetail.js
onShow: function () {
  let that = this;
  //身份校驗
  service.identityCheck(() => {
     //跳轉(zhuǎn)到登錄頁
     wx.redirectTo({
      url: "/pages/common/login/login"
     });
    }, () => {  
     //獲取頁面數(shù)據(jù)等等   
     that.getDetail(this.orderId);
     ...
    }
  );
 },

不過，每個頁面都要這樣寫，重復(fù)代碼好多啊，侵入性也強(qiáng)。不如用裝飾函數(shù)（高大上的說法是裝飾者模式）來包裝一下：

//filter.js
function identityFilter(pageObj){
  if(pageObj.onShow){
    let _onShow = pageObj.onShow;
    pageObj.onShow = function(){
      service.identityCheck(()=>{
        //跳轉(zhuǎn)到登錄頁
        wx.redirectTo({
          url: "/pages/common/login/login"
        });
      },()=>{
        //獲取頁面實例，防止this劫持
        let currentInstance = getPageInstance();
        _onShow.call(currentInstance);
      });
    }
  }
  return pageObj;
}

function getPageInstance(){
  var pages = getCurrentPages();
  return pages[pages.length - 1];
}

exports.identityFilter = identityFilter;

filter.js用以提供過濾器方法，除了現(xiàn)有的用戶身份攔截，后續(xù)如果需要其他攔截，可以在這個文件增加。然后，在需要用戶身份攔截的小程序頁面代碼里，用filter.identityFilter處理一下就可以了:

//orderDetail.js
let filter = require('filter.js');
Page(filter.identityFilter({
  ...
  onShow: function () {
    //獲取頁面數(shù)據(jù)等等
    this.getDetail(this.orderId);
    //...
  },
  ...
}));

使用Promise進(jìn)行優(yōu)化

上面的實現(xiàn)中，每次訪問頁面，都會執(zhí)行一次獲取用戶身份的方法（就是上面代碼里的service. identityCheck ）。其實沒有必要，在小程序啟動的時候獲取一次就行了。也就是說，放在app.js的onLaunch方法里執(zhí)行。

每個小程序頁面實例化時，一般也會執(zhí)行異步方法，用來獲取頁面需要的數(shù)據(jù)。關(guān)鍵在于，我們需要保證，頁面的異步方法 必須在 獲取用戶身份的異步請求 之后執(zhí)行。

毋容置疑，Promise最擅長處理異步請求的執(zhí)行順序了。主子，快放代碼粗來：

//app.js
App({
  onLaunch:function(){
    let p = new Promise(function(resolve,reject){
      service.identityCheck(resolve,reject);
    });
    this.globalData.promise = p; 
  },
  ...
  globalData: {
    promise:null,
  }  
});

//filter.js
const appData = getApp().globalData;
function identityFilter(pageObj){
  if(pageObj.onShow){
    let _onShow = pageObj.onShow;
    pageObj.onShow = function(){
      //改動點(diǎn)
      appData.promise.then(()=>{
        //跳轉(zhuǎn)到登錄頁
        wx.redirectTo({
          url: "/pages/common/login/login"
        });
      },()=>{
        //獲取頁面實例，防止this劫持
        let currentInstance = getPageInstance();
        _onShow.call(currentInstance);
      });
    }
  }
  return pageObj;
}

小結(jié)

基本實現(xiàn)了小程序頁面的用戶身份攔截器，但是比起laravel的http中間件還是遜色一些：

• 需要對每個頁面代碼包裝一層。

• 即使用戶身份校驗不通過，小程序也并不會阻塞頁面的渲染。假如獲取用戶身份的異步方法一分鐘才執(zhí)行完，小程序頁面還是會展示出來，一分鐘之后才跳轉(zhuǎn)到登錄頁。需要自己增加邏輯，比如在這一分鐘內(nèi)，頁面展示空白內(nèi)容。

以上是“微信小程序開發(fā)頁面攔截器的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：微信小程序開發(fā)頁面攔截器的示例
文章源于：http://newbst.com/article34/jhcgpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、小程序開發(fā)、自適應(yīng)網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)建站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)