微信小程序组件化（上），微信小程序组件化

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

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

猜其原因可能有两方面：

从小程序开放的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编译后对比源码和编译后的代码来探究其实现组件化的思路。

标签： 支持程序页面组件