微信小程序中添加mixins

技术博客 / 4188人浏览 / 0人评论

1、新建mixins.js文件

function mixinPage() {
    // 保存原生的 Page 函数
    const originPage = Page
    Page = (options) => {
        const mixins = options.mixins
        // mixins 必须为数组
        if (Array.isArray(mixins)) {
            delete options.mixins
            // mixins 注入并执行相应逻辑
            options = mergePage(mixins, options)
        }
        originPage(options)
    }
}

const ORIGIN_PROPERTIES_PAGE = [
    'data'
]

const ORIGIN_METHODS = [
    'onLoad',
    'onReady',
    'onShow',
    'onHide',
    'onUnload',
    'onPullDownRefresh',
    'onReachBottom',
    'onShareAppMessage',
    'onPageScroll',
    'onResize',
    'onTabItemTap'
]

function mergePage(mixins, options) {
    mixins.forEach((mixin) => {
        // if (isObject(mixin)) {
        if (Object.prototype.toString.call(mixin) == '[object Object]') {
            // 遍历 mixin 里面的所有属性
            for (let key in mixin) {
                // for (let [key, value] of Object.entries(mixin)) {
                if (ORIGIN_PROPERTIES_PAGE.includes(key)) {
                    // 内置对象属性混入
                    options[key] = { ...mixin[key], ...options[key] }
                } else if (ORIGIN_METHODS.includes(key)) {
                    // 内置方法属性混入,优先执行混入的部分
                    const originFunc = options[key]
                    options[key] = function (...args) {
                        mixin[key].call(this, ...args)
                        return originFunc && originFunc.call(this, ...args)
                    }
                } else {
                    // 自定义方法混入
                    options = { ...mixin, ...options }
                }
            }
        }
    })
    return options
}
mixinPage()

2、新建个人mixins.js文件

module.exports = {
    data: {
      regionCode: [],
      regionText: ''
    },
    onLoad(options){
        console.log('mixins-load');
        console.log(options);
        console.log('mixins-load');
    },
    onShow() {
        console.log('mixins-show');
    },
    initList(afterInit) {
      if (afterInit && typeof afterInit === 'function') {
        afterInit()
      }
    }
  }

3、在每个页面的js文件中引入自己定义的mixins.js文件,自己的业务逻辑在定义的个人mixins.js文件中添加

Page({
    mixins: [require('../../models/myMixins')]
})

简单三步,实用且有效,所有个人逻辑在个人mixins文件中编写就可以了。

0 条评论

还没有人发表评论

发表评论 取消回复

记住我的信息,方便下次评论
有人回复时邮件通知我