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