原理

重写小程序的Page办法，合并Page办法的默认参数中的属性、办法和生命周期等

准则

属性和办法会进行笼罩，以后页面申明的属性和办法会笼罩mixin中的属性和办法，生命周期函数不会进行笼罩，执行程序为全局mixin>独自mixin>当前页生命周期函数

具体操作

  • 创立一个mixins.js
// 把原本的Page办法缓存下来const ori_page = Pageconst lifecycle = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll']let globalMixin = null // 全局混入// 全局mixin办法wx.mixin = config => {    if (isType(config, 'object')) {        globalMixin = config    }}// 重写Page办法Page = config => {    let mixins = config.mixins    // 退出全局mixin，首先执行全局的    if(globalMixin) {        (mixins || (mixins = [])).unshift(globalMixin)    }    if(isType(mixins, 'array') && mixins.length > 0) {        // 删除config的mixins属性        Reflect.deleteProperty(config, 'mixins')        // 把mixins中的货色，混入到config外面去        merge(mixins, config)    }    // 调用默认的Page办法进行初始化    ori_page(config)}function merge(mixins, config) {    mixins.forEach(mixin => {        if(isType(mixin, 'object')) {            Object.keys(mixin).forEach(key => {                if(key === 'data') {                    // 合并data                    config.data = Object.assign({},mixin[key],config[key])                }else if (lifecycle.includes(key)) {                    // 缓存以后页面的生命周期函数                    let ori_lifecycle = config[key]                    config[key] = function() {                        // arguments对象转数组                        let arg = Array.prototype.slice.call(arguments)                        // 执行minxin的生命周期函数                        mixin[key].call(this, arg)                        // 执行当前页的生命周期函数                        ori_lifecycle && ori_lifecycle.call(this, arg)                    }                }else {                    // 合并methods                    config[key] = mixin[key]                }            })        }    })}//判断类型函数function isType(target, type) {    let targetType = Object.prototype.toString.call(target).slice(8, -1).toLowerCase()    type = type.toLowerCase()    return targetType === type}
  • 引入mixins.js
// aap.jsimport './mixins'
  • 申明一个mixin
module.exports = {    test: {        data: {            msg: 'Hello world'        }    }}
  • 应用
import {test} from './someMixins'Page({    mixins: [test]})