wxPageMixins：为微信小程序Page页面增加mixins功能

最新推荐文章于 2024-08-04 19:01:28 发布

农村的师傅

最新推荐文章于 2024-08-04 19:01:28 发布

阅读量1.6k

点赞数

分类专栏：微信小程序文章标签：微信小程序 merge 参数合并策略 mixin

本文链接：https://blog.csdn.net/qq_33024515/article/details/87858053

版权

本文介绍了如何使用wxPageMixins为微信小程序的Page页面添加mixins功能，实现数据和生命周期函数的合并。内容包括数据的递归合并、生命周期函数的调用合并、事件处理函数的覆盖、其他字段的覆盖以及mixins的深度优先递归合并规则。此外，还提醒了避免循环引用和在mixin中无法访问Page外部作用域的问题。

摘要由CSDN通过智能技术生成

起步

由于之前学习vue源码，在vue源码中学到了如何针对不同的选项参数进行合并，并且为了学以致用，所以就写了一个简单的用于合并微信小程序Page构造数参数的工具函数。因为笔者最近在做微信小程序开发的，我去找了一下，发现微信小程序中好像只有组件拥有一个叫做behaviors用于组件之间的代码复用的选项，对于小程序页面来说并没有类似的mixins这种代码复用机制，便把vue这一套参数合并机制用在微信小程序的Page构造器上，它是一个简单的用于合并微信小程序Page构造器参数的工具函数，用的就是vue的参数合并这一套，不过没vue那么多选项需要合并，只有data和生命周期钩子函数这两个需要合并，不过支持多个mixins选项以及mixins嵌套合并。

github地址：https://github.com/nongcundeshifu/wxPageMixins。喜欢的就点个Star吧。

ps：目前此工具只针对小程序的Page构造器进行参数合并，小程序组件请使用其自带的behaviors进行混入，后续可能出一个通用的，可自定义合并策略函数以及可配置的工具出来吧。

使用

// 引入wxPageMixins
import wxPageMixins from './wxPageMixins.js';
// 引入mixin对象
import mixin from 'mixin.js';
// 在微信小程序中，使用wxPageMixins工具函数合并选项参数
Page(wxPageMixins({
   mixins: [mixin],
   // other props
}));

案例

testMixin.js

// 导入子mixin对象
import subMixins from './subMixin.js';

export default {
   // mixin对象也可以使用mixins字段进行合并
   mixins: [subMixins],

   // 生命周期钩子函数
   onLoad(options) {
      console.log(&