如何全局重寫小程序Page函數(shù)wx對(duì)象詳解
背景
如果能夠全局改寫小程序的Page里的生命周期方法或wx里的函數(shù),那么可以做很多有意思的事情。與其說是改寫,不如說是代理或裝飾。屬于是設(shè)計(jì)模式中的代理模式或裝飾器模式。
方案
重寫Page函數(shù)
在app.js中調(diào)用:
Page = pageProxy(Page);
實(shí)現(xiàn)對(duì)Page里生命周期方法裝飾。文章后面會(huì)繼續(xù)聊怎么實(shí)現(xiàn)pageProxy。
重寫wx對(duì)象
在app.js中調(diào)用:
wx = wxProxy(wx); 復(fù)制代碼
實(shí)現(xiàn)對(duì)wx里函數(shù)的裝飾。文章后面會(huì)繼續(xù)聊怎么實(shí)現(xiàn)wxProxy。
注意事項(xiàng)
上面二者都是全局生效的。
- 在
app.js中調(diào)用Page = pageDecorator(Page);和wx = wxDecorator(wx);時(shí),不要帶var或const或let,因?yàn)閹Я撕缶椭辉诒卷?yè)面生效。不帶才是全局生效。 - 必須在
app.js中調(diào)用,或在app.js中引用相關(guān)的文件中執(zhí)行上面2個(gè)語(yǔ)句。如果在頁(yè)面的js中調(diào)用,會(huì)來(lái)不及,那時(shí)候可能存在一些頁(yè)面初始化用了舊的Page對(duì)象。 - 只能執(zhí)行一次,多次執(zhí)行會(huì)導(dǎo)致多次代理/裝飾,不可取。
pageProxy
直接舉個(gè)例子,比如要修改onLoad生命周期函數(shù)的行為。
function onLoadProxy(onLoad?: WechatMiniprogram.Page.ILifetime['onLoad']): WechatMiniprogram.Page.ILifetime['onLoad'] {
return function newOnLoad(query) {
doSomethingWith(query); // 可訪問參數(shù)query,做一些事情,比如上報(bào)
if (onLoad) { // 如果開發(fā)者在Page中定義了onLoad,我們需要調(diào)用一下開發(fā)者定義的onLoad
return onLoad.call(this, query); // 注意這里必須用call(this)。這里也可以把query換成個(gè)新對(duì)象,達(dá)到修改參數(shù)的目的。(不建議直接修改query,因?yàn)闀?huì)把傳入的數(shù)據(jù)給改掉,而業(yè)務(wù)開發(fā)者不知情)
}
};
}
function pageProxy(Page: WechatMiniprogram.Page.Constructor): WechatMiniprogram.Page.Constructor {
return function newPage(options) {
const newOptions = { ...options };
newOptions.onLoad = onLoadProxy(options.onLoad);
Page(newOptions);
};
}關(guān)鍵點(diǎn):重寫方法時(shí),務(wù)必使用call(this)保持this引用,否則會(huì)導(dǎo)致業(yè)務(wù)開發(fā)者寫onLoad的函數(shù)體時(shí),無(wú)法訪問到符合預(yù)期的this。
wxProxy
舉個(gè)例子,比如要修改wx.navigateTo導(dǎo)航函數(shù)的行為。
function navigateToProxy(navigateTo: WechatMiniprogram.Wx['navigateTo']): WechatMiniprogram.Wx['navigateTo'] {
return function newNavigateTo(object) {
doSomethingWith(object); // 可訪問參數(shù)object,做一些事情,比如上報(bào)
// 這里可以直接把參數(shù)換個(gè)新對(duì)象,達(dá)到修改參數(shù)的目的
// 注意下面是淺拷貝,不建議直接修改原始o(jì)ptions,因?yàn)闀?huì)把傳入的數(shù)據(jù)給改掉,而業(yè)務(wù)開發(fā)者不知情
return navigateTo({
...object,
});
};
}
function wxProxy(wx: WechatMiniprogram.Wx): WechatMiniprogram.Wx {
const newWx = { ...wx };
newWx.navigateTo = navigateToProxy(wx.navigateTo);
return newWx;
}總結(jié)
到此這篇關(guān)于如何全局重寫小程序Page函數(shù)wx對(duì)象的文章就介紹到這了,更多相關(guān)重寫小程序wx對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用post方法實(shí)現(xiàn)json往返傳輸數(shù)據(jù)的方法
今天小編就為大家分享一篇關(guān)于使用post方法實(shí)現(xiàn)json往返傳輸數(shù)據(jù)的方法,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-03-03
JavaScript實(shí)現(xiàn)微信飛機(jī)大戰(zhàn)游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)微信飛機(jī)大戰(zhàn)游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05
layui監(jiān)聽下拉選框選中值變化的方法(包含監(jiān)聽普通下拉選框)
今天小編大家分享一篇layui監(jiān)聽下拉選框選中值變化的方法(包含監(jiān)聽普通下拉選框),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-09-09
JavaScript中的回調(diào)函數(shù)實(shí)例講解
今天小編就為大家分享一篇關(guān)于JavaScript中的回調(diào)函數(shù)實(shí)例講解,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
JS實(shí)現(xiàn)的二叉樹算法完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的二叉樹算法,結(jié)合完整實(shí)例形式分析了基于JS定義、創(chuàng)建二叉樹及常用的各種遍歷、訪問二叉樹操作技巧,需要的朋友可以參考下2017-04-04
JS中產(chǎn)生標(biāo)識(shí)符方式的演變
本文記錄下JS中產(chǎn)生標(biāo)識(shí)符方式的演變,從ES5到ES6,ES5及其之前是一種方式,只包含兩種聲明(var/function),ES6則增加了一些產(chǎn)生標(biāo)識(shí)符的關(guān)鍵字,如 let、const、class。2015-06-06

