微信小程序开发中增加 mixin 扩展详细解读分析

mixin是一种思想,用部分实现的接口来实现代码复用。可以用来解决多继承的问题,又可以用来扩展功能。下面这篇文章主要给大家介绍了关于为微信小程序增加mixin扩展的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。

Mixin简介

Mixin（织入）模式并不是GOF的《设计模式》归纳中的一种，但是在各种语言以及框架都会发现该模式（或者思想）的一些应用。简单来说，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配置，上面的官方注册方式会变成：

这里有两个点，我们要特别注意：

• Page(configObj) - 通过configObj配置小程序页面的data, method, lifecycle等

• onLoad方法 - 页面main入口

要想让mixin中的定义有效，就要在configObj正式传给Page()之前做文章。其实Page(configObj)就是一个普通的函数调用，我们加个中间方法：

在createPage这个方法中，我们可以预处理configObj中的mixin，把其中的配置按正确的方式合并到configObj上，最后交给Page() 。这就是实现mixin的思路。

具体实现

具体代码实现就不再赘述，可以看下面的代码。更详细的代码实现，更多扩展，测试可以参看github

小结

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

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

      data, methods会合并，组件自身具有最高优先级，其次mixins中后配置的mixin优先级较高。

      lifecycle不会合并。先顺序执行mixins中的lifecycle，再执行组件自身的lifecycle。

总结

以上就是微信小程序开发中增加 mixin 扩展详细解读分析的详细内容！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。