1.原理

对Page函数进行数据拦截，将需要混入的属性与原属性先行混合再进行Page处理

对Page函数进行拦截

1
2
3
4
5
6
7
8
9
10
11
12
// 保存原Page函数的指针
const _Page = Page
// 对Page传入Page函数的options中的mixins进行展开处理混入options中并删除
Page = (options = {}) => {
  const mixins = options.mixins
  if (Array.isArray(mixins)) {
    Reflect.deleteProperty(options, 'mixins')
    options = merge(mixins, options)
  }
  console.log(options);
  _Page(options)
}

对传入的options中的mixins中的属性进行合并处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// Page原生组件
const properties = ['data', 'properties', 'options']
const methods = ['onLoad', 'onShow', 'onReady', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll', 'onResize', 'onTabItemTap']

const merge = (mixins, options) => {
  mixins.forEach(mixin => {
    if (Object.prototype.toString.call(mixin).slice(8, -1) !== 'Object') {
      throw new Error('mixin is not an object')
    }
    for (const [k, v] of Object.entries(mixin)) {
      if (properties.includes(k)) {
        options[k] = { ...v, ...options[k]}
      }
      else if (methods.includes(k)) {
        const func = options[k]
        options[k] = function(...arg) {
          v.call(this, ...arg)
          func && func.call(this, ...arg)
        }
      }
      else {
        console.log(mixin[k])
        options = { ...mixin, ...options}
        console.log(options);
      }
    }
  })
  return options
}

注意

1.混入中的属性会被原页面中的属性覆盖

2.使用

1.项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
mixins
  ├── index
  |     ├─ index.js
  |     ├─ index.json
  |     ├─ index.wxml
  |     └─ index.wxss
  ├── mixins
  |     ├─ a.js
  |     └─ b.js
  ├── util
  |     └─ mixin.js
  ├── app.js
  ├── app.json
  └── app.wxss

2.项目引入mixin功能

在app.js中引入util中的mixin.js

1
2
3
4
5
// app.js
require('./util/mixin.js')
App({
  onLaunch() {}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// util>mixin.js
const _Page = Page
Page = (options = {}) => {
  const mixins = options.mixins
  if (Array.isArray(mixins)) {
    Reflect.deleteProperty(options, 'mixins')
    options = merge(mixins, options)
  }
  console.log(options);
  _Page(options)
}

// Page原生组件
const properties = ['data', 'properties', 'options']
const methods = ['onLoad', 'onShow', 'onReady', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll', 'onResize', 'onTabItemTap']

const merge = (mixins, options) => {
  mixins.forEach(mixin => {
    if (Object.prototype.toString.call(mixin).slice(8, -1) !== 'Object') {
      throw new Error('mixin is not an object')
    }
    for (const [k, v] of Object.entries(mixin)) {
      if (properties.includes(k)) {
        options[k] = { ...v, ...options[k]}
      }
      else if (methods.includes(k)) {
        const func = options[k]
        options[k] = function(...arg) {
          v.call(this, ...arg)
          func && func.call(this, ...arg)
        }
      }
      else {
        console.log(mixin[k])
        options = { ...mixin, ...options}
        console.log(options);
      }
    }
  })
  return options
}

3.编写需要混入的js文件

1
2
3
4
5
6
7
8
9
10
11
12
// mixins>a.js
module.exports = {
  data: {
    id: 1
  },
  onload() {
    console.log('mixin a onload');
  },
  a() {
    console.log('mixin a');
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
// mixins>b.js
module.exports = {
  data: {
    id: 2
  },
  onload() {
    console.log('mixin b onload');
  },
  b() {
    console.log('mixin b');
  }
}

4.页面中引入mixins

1
2
3
4
5
6
7
8
9
10
11
12
// index>index.js
const app = getApp()
Page({
  mixins: [require('../mixins/a.js'), require('../mixins/b.js')],
  data: {
    id: 3
  },
  onLoad() {
    console.log(this.a);
    console.log(this.b);
  }
})

小程序mixin混入

最后更新： 2023年09月14日 09:49