对微信小程序的生命周期进行扩展 – 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

     

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

  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中导入即可。

     

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

     

  4. 定义一个页面生命周期的扩展接口,以便提示页面,可以实现onLoaded这个函数

     

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

     

     

  5. 在具体页面代码中,用如下的方式实现一个自定义的页面构造器

     

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

 

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

发表评论

评论已关闭。

相关文章