在小程序中使用mixins

mixins我们提供了一个保持代码可重用性的方式，从而使我们的代码保持干净和易于维护。
在vue中当有多个组件的功能是相似的，我们可以用mixins共享相同的功能，那么在小程序中当有多个页面需要公用相似的功能时，我们是如何使用mixins的呢？

代码实现

在小程序中，每个页面都由 Page(options) 函数定义，而 Mixins 则作用于这个函数当中的 options 对象。因此我们实现 Mixins 的思路就有了——劫持并改写 Page 函数，最后再重新把它释放出来。

//mixins/mixins.js
let native = Page;
Page = (obj) => {
  let { mixins = [] } = obj;
  let merge = new Merge();
  Reflect.deleteProperty(obj, "mixins");
  let pageData = mixins.length <= 0 ? obj : merge.start(obj, ...mixins);
  native(pageData);
}
class Merge {
  constructor() { }
  start(rootObj, ...objs) {
    let root = {};
    objs.forEach((el) => {
      root = Merge.recursive(rootObj, el);
    })
    return root;
  }
  static recursive = (rootObj, obj) => {
    for (let attr in obj) {
      if (rootObj[attr] === undefined) {
        rootObj[attr] = obj[attr];
      }
      else if (Merge.isObject(obj[attr])) {
        Merge.recursive(rootObj[attr], obj[attr])
      }
      else {
        rootObj[attr] = obj[attr];
      }
    }
    return rootObj;
  }
  static isObject = (obj) => {
    return Object.prototype.toString.call(obj).includes("Object");
  }
}

定义自己的mixins

//mixins/myMixin.js
//常量存不变的数据
const PHONENUMBER='10086'
module.exports = {
  //可写数据部分
  data: { 

  },
  //这里可以写对数据的操作
  callme() {
    wx.makePhoneCall({
      phoneNumber: PHONENUMBER
    })
  },
  //生命周期部分 可以在这里写onload，onShow的混入啊等等
  // onShow() { 
  //   console.log('hello candy')
  //  }
}

引入改写的Page 函数

//app.js
//引入mixins.js
import './mixins/mixins.js'

引入minxin并且使用

//index.js
//引入mymixin
import mymixin from "../mixins/myMixin.js";

//注册mymixin
Page({
  mixins: [mymixin],
})

调用

<view bindtap="callme">拨打10086</view>