258资源分享网

小程序对组件化的“支持”情况微信小程序（以下简称“小程序”，版本）虽然默认定义了很多有用的组件，但是在开发小程序过程中，往往需要自定义业务组件。而小程序开发者文档中却未对自定义组件给出很好的解决方案或 ...

微信小程序（以下简称“小程序”，版本）虽然默认定义了很多有用的组件，但是在开发小程序过程中，往往需要自定义业务组件。
而小程序开发者文档中却未对自定义组件给出很好的解决方案或示例。

猜其原因可能有两方面：

从小程序开放的API来看，它去除了DOM和BOM，视图与数据层交互采用简单的单向数据绑定和事件绑的形式。可能其初衷是想降低开发难度和学习门槛，尽量减少概念。

小程序推出时间不到一年，这些功能可能还在完善中。

微信的组件化，总体而言，目标就是把具有特定功能和样式的wxml、wxss、js（可选）文件抽取出来，以便不同页面之间进行复用。
我们从实现上来考虑是否可行：

wxss支持文件之间的引用，采用命名隔离的话应该可以支持组件化的需求。即把不同组件拆成不同的wxss，通过一致的命名与组件的试图、逻辑对应，同时组件样式选择器都挂载在跟样式下。使用时记得引用该wxss就好。当然预编译语言中所使用的变量、函数什么的就不要想了~

wxml也支持引用，两种方式：template和include。区别在于作用域。include相当于把代码拷贝到当前位置，与页面共享作用域，而import拥有自己的独立作用于，一般需要传入对应的参数。这么看似乎template更适合，可是template的事件绑定却仍是和父页面共享作用域，也就是说数据在template独立作用域中，事件绑定在页面内作用域，两者之间的相互引用就会变得相当尴尬，还不如include顺畅。

小程序支持ES6，所以我们可以用ES6的模块管理方式来引入对应的js文件。

因为json是针对于页面进行的配置，组件关心的是局部样式和逻辑，所以组件化的时候我们并不需要它。

因为我们采用了include的方式共享了作用域，在简单页面的情况这种方式也不会出现什么问题，如果变量名或事件名被占用的时候换一个就好了。
但是在页面引用多个组件的情况下如何保证它们之间不产生冲突？你可能想到了用老办法命名隔离，组件内部变量和事件添加组件前缀用来和其它组件区分。
OK，在组件名不重复的情况下这是可行的。但是如果一个组件要同时触发自身内部事件和父页面事件就不是这么简单了。
所以我们需要解决的一个关键问题是：组件如何隔离作用域，并暴露属性或接口（函数）给页面或其它组件？

我们在探索组件化实现方式时，有一个第三方模块wepy脱颖而出。star数量超过了1k，文档清晰简约。
看看它的主要功能：

将小程序开发模式转为MVVM方式

支持类Vue.js 2.x风格的组件开发，包括单文件组件，支持scss、pug等。

支持加载外部NPM包

使用babel编译，支持ES6/ES7特性

MVVM多用于web单页应用，而小程序明显不是单页应用，而且也不支持双数据绑定，转为MVVM方式更多只是习惯上的喜好，谈不上什么优点。
小程序也支持ES6特性（以前也支持ES7，不知道为什么新版本取消了），用ES6特性可以完成外部NPM包引用。

所以最吸引人的功能就是第二点：支持组件化。

拿到官方给的示例wepy-wechat-demo编译后对比源码和编译后的代码来探究其实现组件化的思路。

整个项目非常清晰简单，我们以index页面调用tab组件为例进行分析。