最近利用业余时间倒腾了一个微信小程序,主要目的是横向比较一些业界小程序平台的架构和做法。因为有在其他平台长期的开发经验,对于小程序的一些机制做了一些辩证的思考。例如,小程序的页面,其实不是一个页面,而只是一个方法构造器,甚至整个应用也都只是一个方法而已。这样的情况下,我们以前学到的很多面向对象的经验,例如继承之类的,在这里通通就没有用武之地了。不可否认这样对于一些新手来说,可能是一个不错的设计。但对于我们这种老炮来说,总是有一种要去改造它的冲动。
于是,我也就开始思考,看看能否对所有的页面做一个通用的功能,而不是每次在每个页面中都去写一遍。例如,很显然几乎所有的小程序,都会有用户个性化的数据。这个数据其实需要到所有的页面,那么到底怎么加载这个数据呢?我们可以在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时特殊的地方。
- 默认情况下,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这个函数
- 在具体页面代码中,用如下的方式实现一个自定义的页面构造器
很多事情都是因为你想去做它,然后你就做到了。不要停止思考和尝试。