miniprogrampatch - 微信小程序增强补丁

时间：2024-01-22 09:33:10

项目地址：miniprogrampatch

概述

miniprogrampatch 不是一个框架，它非常简单易用，它只有 patchPage 和 patchComponent 两个函数，分别用以增强微信小程序提供的 Page 和 Component 对象，使得页面（Page）和自定义组件（Component）具有属性监听（watch）和计算属性（computed）特性。

小程序示例片段

示例代码片段：wechatide://minicode/je7bLnmD7d3Q

示例代码目录：./miniprogramapp

安装

使用 npm 安装

npm install --save miniprogrampatch

或者直接拷贝文件 ./dist/miniprogrampatch.js 到项目中。

用法

以下示例假定 miniprogrampatch.js 文件放置于项目根目录，示例代码参见miniprogramapp。

全局增强

在 app.js 中：

const { patchPage, patchComponent } = require('./miniprogrampatch')

Page = patchPage(Page);
Component = patchComponent(Component);

App({});

在全局增强模式下，在编写页面或自定义组件时，无需再做任何事情就可以使用 watch 和 computed 特性。

例如 ./index/index.js 中：


Page({
    watch: {
        total(value, old) {
            // do something
        }
    },

    computed: {
        total: {
            require: ['count', 'countByTen', 'countByHundred'],
            fn({ count, countByTen, countByHundred }) {
                return count + countByTen + countByHundred;
            }
        }
    },

    data: {
        count: 1
    }
});

局部增强

你也可以选择在需要使用 watch 或 computed 特性的页面（或自定义组件）中，局部增强 Page 或 Component 对象：

例如在 ./index/index.js 中：

const { patchPage } = require('../miniprogrampatch');

patchPage(Page)({
    watch: {
        // add some watchers
    },

    computed: {
        // add some computed props
    },

    // todo
})

配置与方法

配置项

watch

该配置项用以定义需要监听的属性，支持多路径属性名监听。

Page({
    watch: {
        // 嵌套路径监听
        'x.y': function (value, old) {
            console.log('x.y', value === old);  // x.y true
        },

        // 监听属性
        x(value, old) {
            console.log('x', value === old); // x true
        },
    }
})

computed

计算属性并非只读属性，你完全可以覆写某个计算属性，但该计算属性会在计算依赖属性发生变化，自动重新计算。

Page({

    data: {
        count: 10
    },

    computed: {
        /** 页面加载的时间戳（不依赖其他属性） */
        timestamp() {
            return Date.now();
        },

        /** count 乘以 10（依赖属性 count） */
        countByTen: {
            require: ['count'],
            fn({ count }) {
                return count * 10
            }
        },

        /** count 乘以 100（依赖另一个计算属性 countByTen）*/
        countByHundred: {
            require: ['countByTen'],
            fn({ countByTen }) {
                return countByTen * 10;
            }
        },
    }
});

方法

$setData 别名：updateData

在使用 patchPage 或 patchComponent 增强后的 Page 或 Component 实例拥有一个名为 $setData 的方法，用来设置 data 同时触发 computed 属性更新以及 watch 监听检查。

在微信小程序基础库 v2.2.2 以下版本，Page 或 Component 的 setData 方法由于会被定义为只读属性，无法覆写，因此必须使用 $setData 来触发数据更新检查。

在微信小程序基础库 v2.2.3 以上版本，Page 和 Component 的 setData 等效于 $setData，可以直接使用 setData 来触发数据更新。

相关文章