對微信小程式的生命周期進行擴展 – Typescript 篇

2021 年 1 月 15 日
筆記
typescript

最近利用業餘時間倒騰了一個微信小程式，主要目的是橫向比較一些業界小程式平台的架構和做法。因為有在其他平台長期的開發經驗，對於小程式的一些機製做了一些辯證的思考。例如，小程式的頁面，其實不是一個頁面，而只是一個方法構造器，甚至整個應用也都只是一個方法而已。這樣的情況下，我們以前學到的很多面向對象的經驗，例如繼承之類的，在這裡通通就沒有用武之地了。不可否認這樣對於一些新手來說，可能是一個不錯的設計。但對於我們這種老炮來說，總是有一種要去改造它的衝動。

於是，我也就開始思考，看看能否對所有的頁面做一個通用的功能，而不是每次在每個頁面中都去寫一遍。例如，很顯然幾乎所有的小程式，都會有用戶個性化的數據。這個數據其實需要到所有的頁面，那麼到底怎麼載入這個數據呢？我們可以在App.OnLaunch中嘗試去載入，但一般載入數據的過程都是非同步的，又怎麼通知到所有頁面說數據載入成功了呢？

帶著這樣的問題，本著能用前人經驗就不自己折騰的原則，我在網上搜了一下。下面這一篇文章真是跟我英雄所見略同啊。

//developers.weixin.qq.com/community/develop/article/doc/000a42cdb744b0c00b99eaaba56813

利用上述文章提到的思路，基本上能實現我的目的。本文是寫了一個Typescript的版本，但榮譽屬於上面的這位Stephen同學。

我喜歡Typescript, 這不用多說了，至於如何用Typescript 進行微信小程式開發，請參考我的文章 //www.cnblogs.com/chenxizhang/p/14265729.html

下面上程式碼，並交待一些用Typescript時特殊的地方。

默認情況下，Typescript版本中Page 構造器是不允許修改的，因為它定義時用的是const，你需要手工修改下面這個文件，將其修改為let
創建一個pagex.ts 文件，當然你可以起任何你想要的名字

const pagex = (Page: WechatMiniprogram.Page.Constructor): WechatMiniprogram.Page.Constructor => {

    return (object: any) => {

        const { onLoaded } = object

        //由於我們需要重寫onLoad這個默認方法，為了讓具體頁面還可以定義具體的Load邏輯，我們假定頁面需要實現一個onLoaded方法

        object.onLoad = function (_options: any) {

            //讀取用戶數據

            wx.getUserInfo({

                success: res => {

                    if (typeof onLoaded === “function”)

                        //如果用戶定義了這個函數的話，就調用它

                        onLoaded.call(this, res.userInfo)

                }

            })

        }

        //重寫所有頁面的分享邏輯，這樣不需要在頁面中定義了

        object.onShareAppMessage = () => {

            return {

                title: “轉發標題”

            }

        }

        return Page(object)

    }

}

const original = Page

Page = pagex(original)
將這個擴展程式碼導入到應用中。這個很簡單，只需要在App.ts中導入即可。
定義一個頁面生命周期的擴展介面，以便提示頁面，可以實現onLoaded這個函數
在具體頁面程式碼中，用如下的方式實現一個自定義的頁面構造器