背景 在小程序的原生开发中，页面中经常会用到一些公共方法，例如在页面onLoad中验证权限、所有页面都需要onShareAppMessage设置分享等 假设我们在编码时每个页面都写一遍，显然不是一个高级程序员会干的事情，太Low了。如果我们定义一个公共文件，导出这些公共方法，每个页面都引入，然后再生命周期或者事件处理函数中调用，虽然看起来很方便，但不够优雅，达不到我们最终的目的（偷懒）。 下面给大家介绍一种相对比较优雅的实现方式，扩展Page来实现以上的操作。 Page（页面） 需要传入的是一个 [代码]object[代码] 类型的参数，那么我们重载一个 [代码]Page[代码] 函数，将这个 [代码]object[代码] 参数拦截改掉就可以了，下面直接上代码。 实现 1、在根目录新建一个 [代码]page-extend.js[代码] 文件，公共的逻辑都写在这里面 [代码]/** * * Page扩展函数 * * @param {*} Page 原生Page */ const pageExtend = Page => { return object => { // 导出原生Page传入的object参数中的生命周期函数 // 由于命名冲突，所以将onLoad生命周期函数命名成了onLoaded const { onLoaded } = object // 公共的onLoad生命周期函数 object.onLoad = function (options) { // 在onLoad中执行的代码 ... // 执行onLoaded生命周期函数 if (typeof onLoaded === 'function') { onLoaded.call(this, options) } } // 公共的onShareAppMessage事件处理函数 object.onShareAppMessage = () => { return { title: '分享标题', imageUrl: '分享封面' } } return Page(object) } } // 获取原生Page const originalPage = Page // 定义一个新的Page，将原生Page传入Page扩展函数 Page = pageExtend(originalPage) [代码] 2、在 [代码]app.js[代码] 中引入 [代码]page-extend.js[代码] 文件 [代码]require('./page-extend') App({ // 其他代码 ... }) [代码] 代码片段 https://developers.weixin.qq.com/s/Cyx8iGmV7Ldp 本文内容及评论未经允许，禁止任何形式的转载与复制（代码可在程序中使用）

习惯于 VUE 或其他一些框架的同学们可能会经常使用它们的 [代码]computed[代码] 和 [代码]watch[代码] 。 小程序框架本身并没有提供这个功能，但我们基于现有的特性，做了一个 npm 模块来提供 [代码]computed[代码] 和 [代码]watch[代码] 功能。 先来个 GitHub 链接：https://github.com/wechat-miniprogram/computed 如何使用？ 安装 npm 模块 [代码]npm install --save miniprogram-computed [代码] 示例代码 [代码]const computedBehavior = require('miniprogram-computed') Component({ behaviors: [computedBehavior], data: { a: 1, b: 1, }, computed: { sum(data) { return data.a + data.b }, }, }) [代码] [代码]const computedBehavior = require('miniprogram-computed') Component({ behaviors: [computedBehavior], data: { a: 1, b: 1, sum: 2, }, watch: { 'a, b': function(a, b) { this.setData({ sum: a + b }) }, }, }) [代码] 怎么在页面中使用？ 其实上面的示例不仅在自定义组件中可以使用，在页面中也是可以的——因为小程序的页面也可用 [代码]Component[代码] 构造器来创建！ 如果你已经有一个这样的页面： [代码]Page({ data: { a: 1, b: 1, }, onLoad: function() { /* ... */ }, myMethod1: function() { /* ... */ }, myMethod2: function() { /* ... */ }, }) [代码] 可以先把它改成： [代码]Component({ data: { a: 1, b: 1, }, methods: { onLoad: function() { /* ... */ }, myMethod1: function() { /* ... */ }, myMethod2: function() { /* ... */ }, }, }) [代码] 然后就可以用了： [代码]const computedBehavior = require('miniprogram-computed') Component({ behaviors: [computedBehavior], data: { a: 1, b: 1, }, computed: { sum(data) { return data.a + data.b }, }, methods: { onLoad: function() { /* ... */ }, myMethod1: function() { /* ... */ }, myMethod2: function() { /* ... */ }, }, }) [代码] 应该使用 [代码]computed[代码] 还是 [代码]watch[代码] ？ 看起来 [代码]computed[代码] 和 [代码]watch[代码] 具有类似的功能，应该使用哪个呢？ 一个简单的原则： [代码]computed[代码] 只有 [代码]data[代码] 可以访问，不能访问组件的 [代码]methods[代码] （但可以访问组件外的通用函数）。如果满足这个需要，使用 [代码]computed[代码] ，否则使用 [代码]watch[代码] 。 想知道原理？ [代码]computed[代码] 和 [代码]watch[代码] 主要基于两个自定义组件特性： 数据监听器 和 自定义组件扩展 。其中，数据监听器 [代码]observers[代码] 可以用来监听数据被 [代码]setData[代码] 操作。 对于 [代码]computed[代码] ，每次执行 [代码]computed[代码] 函数时，记录下有哪些 data 中的字段被依赖。如果下一次 [代码]setData[代码] 后这些字段被改变了，就重新执行这个 [代码]computed[代码] 函数。 对于 [代码]watch[代码] ，它和 [代码]observers[代码] 的区别不大。区别在于，如果一个 data 中的字段被设置但未被改变，普通的 [代码]observers[代码] 会触发，但 [代码]watch[代码] 不会。 如果遇到问题或者有好的建议，可以在 GitHub 提 issue 。

现在主包调用分包的组件时候会报一个路径的错误。

主包太大了，没办法再创建自定义组件了（其他写的，我也不能马上分出一些东西来放到分包里），我在分包里创建了自定义组件，但是提示“Component is not found in path” 有什么办法在分包里创建自定义组件，然后全局调用？

根据分包异步化的能力，是不是可以把所有只在分包中使用的公共组件，单独抽成一个分包，例如：在packages目录下创建一个 components目录用来存放分包中使用的公共组件， 那么这样是不是就既可以减小主包大小，又不用在每个分包中都放置一份组件？

小程序插件太大，导致主包超出2M。插件能弄成分包吗

右键点击云函数开启本地调试成功，node_modules也安装了，没有报错，但是云函数访问还是走云端而不是本地。 本地云函数调试界面没有任何调试信息，network也没有信息 env打印出来一直不是local。 手动触发正常（云函数调试界面有信息），但是换模拟器就是不触发。 工具已经重新安装最新版，还是没有反应，也没有报错 怎么回事？求助