对⼩程序的⽣命周期进⾏扩展–Typescript篇
最近利⽤业余时间倒腾了⼀个⼩程序，主要⽬的是横向⽐较⼀些业界⼩程序平台的架构和做法。因为有在其他平台长期的开发经验，对于⼩程序的⼀些机制做了⼀些辩证的思考。例如，⼩程序的页⾯，其实不是⼀个页⾯，⽽只是⼀个⽅法构造器，甚⾄整个应⽤也都只是⼀个⽅法⽽已。这样的情况下，我们以前学到的很多⾯向对象的经验，例如继承之类的，在这⾥通通就没有⽤武之地了。不可否认这样对于⼀些新⼿来说，可能是⼀个不错的设计。但对于我们这种⽼炮来说，总是有⼀种要去改造它的冲动。
于是，我也就开始思考，看看能否对所有的页⾯做⼀个通⽤的功能，⽽不是每次在每个页⾯中都去写⼀遍。例如，很显然⼏乎所有的⼩程序，都会有⽤户个性化的数据。这个数据其实需要到所有的页⾯，那么到底怎么加载这个数据呢？我们可以在App.OnLaunch中尝试去加载，但⼀般加载数据的过程都是异步的，⼜怎么通知到所有页⾯说数据加载成功了呢？
带着这样的问题，本着能⽤前⼈经验就不⾃⼰折腾的原则，我在⽹上搜了⼀下。下⾯这⼀篇⽂章真是跟我英雄所见略同啊。
利⽤上述⽂章提到的思路，基本上能实现我的⽬的。本⽂是写了⼀个Typescript的版本，但荣誉属于上⾯的这位Stephen同学。
我喜欢Typescript, 这不⽤多说了，⾄于如何⽤Typescript 进⾏⼩程序开发，请参考我的⽂章
下⾯上代码，并交待⼀些⽤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⽅法
//读取⽤户数据
success: res => {
if (typeof onLoaded === "function")
//如果⽤户定义了这个函数的话，就调⽤它
onLoaded.call(this, res.userInfo)
如何制作app小程序}
})
}
//重写所有页⾯的分享逻辑，这样不需要在页⾯中定义了
return {
title: "转发标题"
}
}
return Page(object)
}
}
const original = Page
Page = pagex(original)
3. 将这个扩展代码导⼊到应⽤中。这个很简单，只需要在App.ts中导⼊即可。
4. 定义⼀个页⾯⽣命周期的扩展接⼝，以便提⽰页⾯，可以实现onLoaded这个函数
5. 在具体页⾯代码中，⽤如下的⽅式实现⼀个⾃定义的页⾯构造器
很多事情都是因为你想去做它，然后你就做到了。不要停⽌思考和尝试。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。