mp-plus

概述

微信小程序页面、组件增强方法。提供 computed，watch，mixins 等功能。

安装

clone 项目，将mp-plus.js放到你的小程序项目里。使用 mp-plus 提供的 api 代替原生页面、组件注册方法。

注册 Page

import { createPage } from "path/to/mp-plus";
 
createPage({
  // ...
});

注册 Component

import { createComponent } from "path/to/mp-plus";
 
createComponent({
  // ...
});

特性

计算属性和侦听器

仿照vue的风格实现的computed和watch

示例

import { createPage } from "path/to/mp-plus";
 
createPage({
  data: {
    a: 1
  },
  computed: {
    b() {
      return this.data.a + 1;
    }
  },
  watch: {
    b(n) {
      console.log(n);
    }
  }
});

方法合并

小程序原生Page的方法放在配置项的根层级下，和页面事件方法混在一起难以阅读。mp-plus仿照vue的风格将方法全部收集到了methods字段里。

示例

import { createPage } from "path/to/mp-plus";
 
createPage({
  data: {
    a: 1
  },
  methods: {
    test() {
      console.log("hehe");
    }
  }
});

混入 mixin

参考vue的mixin机制，在Page和Component之间实现复用的方式。

为什么不使用Component原生的behaviors？behaviors只能给组件使用，且不能复用自定义的computed和watch。

示例

// myMixin.js
export default {
  data: {
    a: 1
  },
  computed: {
    b() {
      return this.data.a + 1;
    }
  }
};
 
// index.js
import { createPage } from "path/to/mp-plus";
import myMixin from "./myMixin.js";
createPage({
  mixins: [myMixin]
});
 
// componentA.js
import { createComponent } from "path/to/mp-plus";
import myMixin from "./myMixin.js";
createComponent({
  mixins: [myMixin]
});