微信小程序开发-增加mixin扩展

Mixin这个概念在React, Vue中都有支持，它为我们抽象业务逻辑，代码复用提供了方便。然而小程序原生框架并没直接支持Mixin。我们先看一个很实际的需求：

为所有小程序页面增加运行环境class，以方便做一些样式hack。具体说就是小程序在不同的运行环境（开发者工具|iOS|Android）运行时，platform值为对应的运行环境值（"ios|android|devtools"）

回顾vue中mixin的使用

文章开始提到的问题是非常适合使用Mixin来解决的。我们把这个需求转换成一个Vue问题：在每个路由页面中增加一个platform的样式class（虽然这样做可能没实际意义）。实现思路就是为每个路由组件增加一个data: platform。代码实现如下：

这样，在index,detail两个路由页的viewModel上就都有platform这个值，可以直接在模板中使用。

vue中mixin分类

data mixin

normal method mixin

lifecycle method mixin

用代码表示的话，就如：

vue中mixin合并，执行策略

如果mixin间出现了重复，这些mixin会有具体的合并，执行策略。如下图：

如何让小程序支持mixin

在前面，我们回顾了vue中mixin的相关知识。现在我们要让小程序也支持mixin，实现vue中一样的mixin功能。

实现思路

我们先看一下官方的小程序页面注册方式：

假如我们加入mixin配置，上面的官方注册方式会变成：

小结

本文主要讲了如何为小程序增加mixin支持。实现思路为：预处理configObj

Page(createPage(configObj))

在处理mixin重复时，与vue保持一致：