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

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

因而，我也就開始思考，看看可否對全部的頁面作一個通用的功能，而不是每次在每一個頁面中都去寫一遍。例如，很顯然幾乎全部的小程序，都會有用戶個性化的數據。這個數據其實須要到全部的頁面，那麼到底怎麼加載這個數據呢？咱們能夠在App.OnLaunch中嘗試去加載，但通常加載數據的過程都是異步的，又怎麼通知到全部頁面說數據加載成功了呢？

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

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

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

我喜歡Typescript, 這不用多說了，至於如何用Typescript 進行微信小程序開發，請參考個人文章 http://www.javashuo.com/article/p-bjsqotra-nz.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. 在具體頁面代碼中，用以下的方式實現一個自定義的頁面構造器

    

 

    不少事情都是由於你想去作它，而後你就作到了。不要中止思考和嘗試。