小程序使用npm包 小程序使用computed

小程序目前是支持npm包引入的，大大增加了扩张性，这次以引入官方的npm包来使小程序的组件支持computed

参考文档：

1.小程序npm支持

https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm

2.官方computer包

https://github.com/wechat-miniprogram/computed

 

接下来演示下使用过程：

1.在根目录下执行npm init 或者npm init -y快速构建

npm install --save miniprogram-computed

安装你需要的npm包

2.点击开发者工具中的菜单栏：工具 --> 构建 npm 

3.点击开发者工具右上角的详情：勾选“使用 npm 模块”选项：

构建完成后即可使用 npm 包。

4.在相应的页面引入使用

const computedBehavior = require('miniprogram-computed')


Component({
  //使用behaviors引用
  behaviors: [computedBehavior],
  data: {
    a: 0,
  },
  computed: {
    b() {
      // 计算属性同样挂在 data 上，每当进行 setData 的时候会重新计算
      // 比如此字段可以通过 this.data.b 获取到
      return this.data.a + 100
    },
  },
  methods: {
    onTap() {
      this.setData({
        a: ++this.data.a,
      })
    }
  }
})

 

补充：

此处并没有强制要求 node_modules 必须在小程序根目录下（即 project.config.js 中的 miniprogramRoot 字段），也可以存在于小程序根目录下的各个子目录中。但是不允许 node_modules 在小程序根目录外。

PS：从开发者工具 v1.02.1811150 版本开始，调整为根据 package.json 的 dependencies 字段构建，所以声明在 devDependencies 里的包也可以在开发过程中被安装使用而不会参与到构建中。如果是这之前的版本，则建议使用--production选项，可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小。