欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何全局重寫小程序Page函數(shù)wx對象詳解

 更新時間:2022年08月23日 10:24:01   作者:HullQin  
這篇文章主要給大家介紹了關于如何全局重寫小程序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);時,不要帶varconstlet,因為帶了后就只在本頁面生效。不帶才是全局生效。
  • 必須在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ù)的方法

    今天小編就為大家分享一篇關于使用post方法實現(xiàn)json往返傳輸數(shù)據(jù)的方法,小編覺得內容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2019-03-03
  • JavaScript實現(xiàn)微信飛機大戰(zhàn)游戲

    JavaScript實現(xiàn)微信飛機大戰(zhàn)游戲

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)微信飛機大戰(zhàn)游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • 解析JavaScript數(shù)組方法reduce

    解析JavaScript數(shù)組方法reduce

    本文主要介紹了JavaScript數(shù)組方法reduce的概述、語法、參數(shù)、工作原理等,由淺入深,便于理解。需要的朋友可以看下
    2016-12-12
  • js表單序列化判斷空值的實例

    js表單序列化判斷空值的實例

    下面小編就為大家?guī)硪黄猨s表單序列化判斷空值的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • layui監(jiān)聽下拉選框選中值變化的方法(包含監(jiān)聽普通下拉選框)

    layui監(jiān)聽下拉選框選中值變化的方法(包含監(jiān)聽普通下拉選框)

    今天小編大家分享一篇layui監(jiān)聽下拉選框選中值變化的方法(包含監(jiān)聽普通下拉選框),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • TypeScript類型斷言VS類型守衛(wèi)示例詳解

    TypeScript類型斷言VS類型守衛(wèi)示例詳解

    這篇文章主要為大家介紹了TypeScript類型斷言VS類型守衛(wèi)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • JavaScript中的回調函數(shù)實例講解

    JavaScript中的回調函數(shù)實例講解

    今天小編就為大家分享一篇關于JavaScript中的回調函數(shù)實例講解,小編覺得內容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • JavaScript中常見的幾種獲取元素的方式

    JavaScript中常見的幾種獲取元素的方式

    這篇文章主要介紹了JavaScript中常見的幾種獲取元素的方式,需要的朋友可以參考下
    2023-05-05
  • JS實現(xiàn)的二叉樹算法完整實例

    JS實現(xiàn)的二叉樹算法完整實例

    這篇文章主要介紹了JS實現(xiàn)的二叉樹算法,結合完整實例形式分析了基于JS定義、創(chuàng)建二叉樹及常用的各種遍歷、訪問二叉樹操作技巧,需要的朋友可以參考下
    2017-04-04
  • JS中產生標識符方式的演變

    JS中產生標識符方式的演變

    本文記錄下JS中產生標識符方式的演變,從ES5到ES6,ES5及其之前是一種方式,只包含兩種聲明(var/function),ES6則增加了一些產生標識符的關鍵字,如 let、const、class。
    2015-06-06

最新評論