|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 本篇文章主要介紹了微信小程序之頁面攔截器的示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧場景
需求分析&實現 對需求進行抽象,其實要的就是一個過濾器,對小程序頁面的訪問進行過濾,符合條件的通過,不符合條件進行其他處理。 使用過php的laravel框架的童鞋,肯定一下子就聯想到了laravel框架的http中間件: HTTP 中間件提供一個方便的機制來過濾進入應用程序的 HTTP 請求,例如,Laravel 默認包含了一個中間件來檢驗用戶身份驗證,如果用戶沒有經過身份驗證,中間件會將用戶導向登錄頁面,然而,如果用戶通過身份驗證,中間件將會允許這個請求進一步繼續前進。當然,除了身份驗證之外,中間件也可以被用來執行各式各樣的任務,CORS 中間件負責替所有即將離開程序的響應加入適當的響應頭,一個日志中間件可以記錄所有傳入應用程序的請求。 令人憂桑的是,微信小程序并沒有提供針對Page實例的中間件機制。所以只能從Page實例的生命周期處下手。
對于onLoad,一個頁面只會調用一次;對于onShow,每次打開頁面(比如小程序從后臺轉到前臺)都會調用一次。 在onLoad或者onShow鉤子函數里,對用戶身份進行校驗,通過后則拉取該頁面需要的數據,否則跳轉到登錄頁。 //orderDetail.js
onShow: function () {
let that = this;
//身份校驗
service.identityCheck(() => {
//跳轉到登錄頁
wx.redirectTo({
url: "/pages/common/login/login"
});
}, () => {
//獲取頁面數據等等
that.getDetail(this.orderId);
...
}
);
},不過,每個頁面都要這樣寫,重復代碼好多啊,侵入性也強。不如用裝飾函數(高大上的說法是裝飾者模式)來包裝一下: //filter.js
function identityFilter(pageObj){
if(pageObj.onShow){
let _onShow = pageObj.onShow;
pageObj.onShow = function(){
service.identityCheck(()=>{
//跳轉到登錄頁
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;
//orderDetail.js
let filter = require('filter.js');
Page(filter.identityFilter({
...
onShow: function () {
//獲取頁面數據等等
this.getDetail(this.orderId);
//...
},
...
}));使用Promise進行優化 上面的實現中,每次訪問頁面,都會執行一次獲取用戶身份的方法(就是上面代碼里的service. identityCheck )。其實沒有必要,在小程序啟動的時候獲取一次就行了。也就是說,放在app.js的onLaunch方法里執行。 每個小程序頁面實例化時,一般也會執行異步方法,用來獲取頁面需要的數據。關鍵在于,我們需要保證,頁面的異步方法 必須在 獲取用戶身份的異步請求 之后執行。 毋容置疑,Promise最擅長處理異步請求的執行順序了。主子,快放代碼粗來: //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(){
//改動點
appData.promise.then(()=>{
//跳轉到登錄頁
wx.redirectTo({
url: "/pages/common/login/login"
});
},()=>{
//獲取頁面實例,防止this劫持
let currentInstance = getPageInstance();
_onShow.call(currentInstance);
});
}
}
return pageObj;
}小結 基本實現了小程序頁面的用戶身份攔截器,但是比起laravel的http中間件還是遜色一些:
以上就是微信小程序開發頁面攔截器的詳解的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!