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

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

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

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

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

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

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

1. 預設情況下，Typescript版本中Page 構造器是不允許修改的，因為它定義時用的是const，你需要手工修改下面這個檔案，將其修改為let

    

   

2. 建立一個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)

    

    

3. 將這個擴充套件程式碼匯入到應用中。這個很簡單，只需要在App.ts中匯入即可。

    

   

    

4. 定義一個頁面生命週期的擴充套件介面，以便提示頁面，可以實現onLoaded這個函式

    

   

    

    

5. 在具體頁面程式碼中，用如下的方式實現一個自定義的頁面構造器

    

   

    很多事情都是因為你想去做它，然後你就做到了。不要停止思考和嘗試。