Mixin

vue开发者应该很熟悉的一个概念，通过抽离组件公共逻辑到单独一个js文件，再需要使用的时候只需做一次mixin操作即可。mixin提高了代码复用率，但是降低了代码的可读性，开发过程中还是需要谨慎使用。

混合规则为：组件（页面也算组件的一种）方法methods项和数据data项按引入顺序依次覆盖，生命周期函数按引入顺序依次执行。

定义一个页面的方法如下：

  1. // common.js
  2. export default class Common {
  3.     data = {
  4.         email: 'genuifx@gmail.com',
  5.     },
  6.     onLoad(q) {
  7.         console.log('common mixin onLoad');
  8.         console.log(q);
  9.         console.log(this.data);
  10.     },
  11.     bindViewTap() {
  12.         this.router.push('../logs/logs');
  13.     },
  14. };

使用Mixin有两种方式：

  • 在页面类指定mixins属性。
  • 使用Mixins装饰器实现混合。

两种方式只是写法不同，最终wxa都会在实例化之前把mixins的内容做好合并。

  1. // 直接指定mixins项
  2. @Page
  3. export default class Index{
  4.     mixins = [common]
  5. }
  7. // 使用Mixins装饰器
  8. @Page
  9. @Mixins(common)
  10. export default class Index{}

需要注意的是，上述操作一样适用于App实例，也就是说App level的mixin只对App实例有效，需要使用全局mixin可以参考进阶教程。

注意

onShareAppMessage由于该回调的特殊性，多个onShareAppMessage只会返回最后一个函数的返回。