Mixins 支持

为了能够在组件之间复用一些方法和配置选项,可以通过 mixins 配置项方式混入可复用的组件方法配置。
Mixin 定义支持任何组件选项、生命周期钩子及其它自定义的方法,最终跟要混入的目标组件按一定策略进行合并。

目前原生小程序只支持自定义组件的 mixins 配置(对应原生的 behaviors ),okam 框架把 Page 组件 和 自定义组件做了统一,都支持 mixins 的配置,底层对于自定义组件基于原生 Behavior 实现,对于 Page 组件则直接在框架层面进行实现。注意: 对于内建的 mixin,比如 wx://form-field,由于不同端支持未统一,框架层面也未提供相应的兼容实现,因此使用时候请谨慎。

注意: 支付宝 小程序目前未提供相应的内建 mixin,如果要多端兼容注意规避,其次支付宝的 mixin 策略跟 微信百度 不同,要求多个 mixin 中的属性 key 要确保不同,否则会报错(从 0.4.7@okam-core 开始,统一由 okam 框架提供默认的 mixin 实现,因此不存在报错情况),即不同 mixinmethodsdataprops 里彼此间不能存在同名的 key

!> 快应用 0.4.7@okam-core 开始 支持

!> 0.4.7@okam-core 开始,默认所有 okam 的生命周期钩子都统一由 okam 完成 mixin (之前的 created 原生钩子由原生 behavior 实现),默认所有特殊属性 data props computed methods 都统一由 okam 完成 mixin (之前只有 data props methods 由原生 behavior 实现),这样调整确保了所有平台的 mixin 策略一致性,而不依赖原生实现。

Mixin 合并策略

关于组件 mixins 策略,可以参考微信官方文档

okam 框架扩展了自己的一套生命周期钩子,其混入策略同原生小程序的钩子函数,扩展的 computed 属性混入策略同 props,组件本身的属性会覆盖混入对象的 props 中的属性。注意: 对于使用 mixins,要求 props 不能使用数组形式,即 props: ['title', 'name'],会被当做对象进行混入。

注意: mixins 策略,对于 页面onShowonHide 等原生小程序提供的非生命周期钩子采用的 mixin 策略同其它普通的属性,暂不支持生命周期的混入策略(从 0.4.7@okam-core 开始,可以自定义要混入的钩子名称,参考下面构建配置说明)。

Mixin 定义

  1. export default {
  2. mixins: [], // mixin 里也可以引入其它 mixin
  3. props: {
  4. title: String
  5. },
  6. created() {
  7. },
  8. methods: {
  9. test() {
  10. }
  11. }
  12. };
  1. export default {
  2. props: {
  3. title2: String
  4. },
  5. created() {
  6. },
  7. methods: {
  8. test2() {
  9. }
  10. }
  11. };
  1. <script>
  2. import mixinA from '../common/mixinA';
  3. import mixinB from '../common/mixinB';
  4. export default {
  5. mixins: [mixinA, mixinB],
  6. created() {
  7. },
  8. methods: {
  9. }
  10. };
  11. </script>

构建配置修改

在构建配置 framework 选项里加上 behavior 支持:

  1. {
  2. framework: ['behavior']
  3. }

该扩展支持了如下几个配置属性,具体参考下面。

useNativeBehavior

如果没有使用任何内置的 mixin 属性,比如 wx://form 之类的,期望所有属性的 mixin 策略都交由 okam 来实现,保证所有平台一致性,可以关闭原生的实现使用,增加 behavior 插件扩展的选项 '{useNativeBehavior: false}'(默认为 true),注意第二个参数要求配置为字符串的代码,由于后续代码转译时候会插入该插件选项的代码片段。

  1. {
  2. framework: [ ['behavior', '{useNativeBehavior: false}'] ]
  3. }

注意: 默认情况下,除了框架支持的默认生命周期钩子及特殊属性(见下面)会由 okam 实现 mixin,其它属性字段都是走原生的 mixin (behavior) 实现。

mixinHooks

该插件扩展,默认 mixin 生命周期钩子:

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeDestroy
  • destroyed
  • beforeUpdate
  • updated

如果想新增新的 mixin 钩子,可以在构建配置增加如下配置项:

  1. {
  2. framework: [ ['behavior', '{mixinHooks: ['onShow']}'] ]
  3. }

如果想移除掉某些默认钩子的特殊 mixin 策略,改由原生实现,或者使用默认的 mixin 方式(useNativeBehaviorfalse 时候),可以传入对象方式:

  1. {
  2. // 新增 onShow 钩子 mixin,移除默认 okam mixin 的钩子 created
  3. framework: [ ['behavior', '{mixinHooks: {onShow: true, created: false}}'] ]
  4. }

mixinAttrs

该插件扩展,默认 mixin 特殊属性:

  • data: deepMerge 策略
  • methods: merge 策略
  • props: merge 策略
  • computed: merge 策略

如果想新增新的 mixin 属性,可以在构建配置增加如下配置项:

  1. {
  2. framework: [ ['behavior', '{mixinAttrs: ['myObj']}'] ]
  3. }

注意: 如果新增的 mixin 属性,没有定义 mixinStrategy,会使用默认的 merge 策略。

如果想移除掉某些默认属性的特殊 mixin 策略,改由原生实现,或者使用默认的 mixin 方式(useNativeBehaviorfalse 时候),可以传入对象方式:

  1. {
  2. // 新增 myObj 属性 mixin,移除默认 okam mixin 的属性 data
  3. framework: [ ['behavior', '{mixinAttrs: {myObj: true, data: false}}'] ]
  4. }

mixinStrategy

自定义属性的 mixin 策略,默认 okam 对于要 mixin 的属性有默认的 mixin 策略,见 mixinAttrs 说明,如果期望改变其 mixin 方式,可以按如下配置进行实现:

  1. {
  2. // 修改 data 的 默认 mixin 策略
  3. framework: [ ['behavior', '{mixinStrategy: {data: (parent, target) => Object.assign({}, parent, target)}'] ]
  4. }