对微信小程序的生命周期进行扩展 – Typescript 篇

最近利用业余时间倒腾了一个微信小程序，主要目的是横向比较一些业界小程序平台的架构和做法。因为有在其他平台长期的开发经验，对于小程序的一些机制做了一些辩证的思考。例如，小程序的页面，其实不是一个页面，而只是一个方法构造器，甚至整个应用也都只是一个方法而已。这样的情况下，我们以前学到的很多面向对象的经验，例如继承之类的，在这里通通就没有用武之地了。不可否认这样对于一些新手来说，可能是一个不错的设计。但对于我们这种老炮来说，总是有一种要去改造它的冲动。

于是，我也就开始思考，看看能否对所有的页面做一个通用的功能，而不是每次在每个页面中都去写一遍。例如，很显然几乎所有的小程序，都会有用户个性化的数据。这个数据其实需要到所有的页面，那么到底怎么加载这个数据呢？我们可以在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. 在具体页面代码中，用如下的方式实现一个自定义的页面构造器

   

很多事情都是因为你想去做它，然后你就做到了。不要停止思考和尝试。