组件化是web、移动开发的大趋势，一次开发多次使用，调用方便，解耦性好。当然在小程序开发是一个趋势。
官网：https://mp.weixin.qq.com/debug/wxadoc/dev/component/
虽然说从自定义组件化有其官网介绍，但是在开发过程中总是不尽如人意，踩过 几次坑后还是决定自己基于基础的原理按照极简的思想搞一下吧。
0x00 原理
本篇文章倾向于对于小程序或组件化原理有一定了解的群体。说来很简单，所谓的组件化包括几个部分，类html,css,和js，这几个部分分别控制元素，样式，和代码逻辑，这几个部分是要在被加载的地方分别把这三样加入到容器里面去，可以说是重新为这个组件开辟了一块内存空间，重新在加载的地方渲染了样式和元素。简单点说是，在page中把模板里面的东西塞进去，在一定的条件下显示出来。或者说是把本来属于本页面的东西独立开了放在了另外的文件里面。拆分出去的元素样式和逻辑只是跟自己相关，加上一些数据传递和接收，就变成了组件。
0x01 插槽/模板加载
小程序里面有个template的东西，就是一个插槽，在一次申明中
<template name="ShareData">
this is a template
</template>
即完成了包装。里面的样式写法就是普通的方式，这就是模板的写法
在需要用的时候,在wxml中引用它
<import src="ShareData"/>
0x01 CSS加载
样式是在wxss里面设定的，在容器中添加
@import "../../componts/section/index";
@import "ShareData";
即可把样式添加到对应的page或其他组件中去。
0x02 JS加载与转移
这个是重点，很多人并不知道组件化的根本原因是不知道组件的js属性和方法是要添加到page里面去的。基于此其实也是两句话的问题就可以完成导入方法和组件。
做一个简单的例子，实现sectioncontrol
let __outcomp__ = "__SegmentedControl__"
let SegmentedControl = {
data: {
radioValues: [
{'value': '男','selected': false},
{'value': '女','selected': true},
{'value': '保密','selected': false},
],
clazz: ['selected','last']
},
methods:{
indexChanged: function (e) {
// 点中的是组中第个元素
var index = e.target.dataset.index;
// 读取原始的数组
var radioValues = this.data[__outcomp__].radioValues;
for (var i = 0; i < radioValues.length; i++) {
// 全部改为非选中
radioValues[i].selected = false;
// 当前那个改为选中
radioValues[index].selected = true;
}
// 写回数据
this.setData({
[__outcomp__]: this.data[__outcomp__]
});
// clazz状态
this.clazzStatus();
},
onLoad: function () {
// onLoad 比 onReady 更早调用，后者为选中时屏幕闪动一下
this.clazzStatus();
},
clazzStatus: function () {
/* 此方法分别被加载时调用，点击某段时调用 */
// class样式表如"selected last","selected"
var clazz = [];
// 参照数据源
var radioValues = this.data[__outcomp__].radioValues;
for (var i = 0; i < radioValues.length; i++) {
// 默认为空串，即普通按钮
var cls = '';
// 高亮，追回selected
if (radioValues[i].selected) {
cls += 'selected ';
}
// 最后个元素, 追加last
if (i == radioValues.length - 1) {
cls += 'last ';
}
//去掉尾部空格
cls = cls.replace(/(\s*$)/g, '');
clazz[i] = cls;
}
// 写回数据
this.data[__outcomp__].clazz = clazz;
this.setData({
[__outcomp__]: this.data[__outcomp__]
});
}
},
};
function LoadSegmentedControl(fromData) {
let pages = getCurrentPages()
let curPage = pages[pages.length - 1]
Object.assign(curPage, SegmentedControl.methods);
curPage.setData({ [__outcomp__]: SegmentedControl.data });
console.log(curPage.data[__outcomp__])
return this;
}
module.exports = {
LoadSegmentedControl
};
重点看model.exports={LoadSegmentedControl},这其实是导出一个加载的方法的，这个方法用来把该组件中的data和method复制到当前页面中去。是的，使用的是object.assign,另外data里面的数据是放到页面data中的[outcomp]属性值中。
0x03 数据传递
有几种数据需要传递，在wxml中如何传递，组件中的js如何更改里面的属性，组件间的数据如何传递。
还是基于模板的思想，从原理得知，组件中的标签和方法其实已经加入到page中去了，所以只需要去page树中取值和方法即可。
如在加载模板的过程中如下传递数据
<template is="SegmentedControl" data='{{...SegmentedControl}}' />
这里有个技巧，用...扩展运算符，把组件中的数据都一次性传递过来，并且传递之后的key和value都是同一个，这是es6的语法。
然而在js中的method需要改变属性的方式则可以用
FSHeaderItemTap:function(e){
var index = e.currentTarget.dataset.idx;
console.log(e.currentTarget.dataset.idx);
this.data[outcomp].fsSelectIdx = e.currentTarget.dataset.idx;
this.setData({ [outcomp]: this.data[outcomp]})
if(index == 1){
LoadShareData();
}
},
可以看到，更改本组件中的属性用的是this.data[outcomp]取值和赋值
0x04 应用
组件与组件的嵌套，或者Page直接的使用都是用的这个原理，在使用的过程中需要注意几个规范，组件名要有前缀，这样方便查找方法和属性。其他方式使用的命名空间就是这个作用吧。下面再来看看下面的界面，这高仿“阿拉丁小程序统计”的界面，有兴趣的可以去看看如何实现，结合本例原理简要分析一下。
image.png
极限水果，专注高端程序员技术与理财人生
网友评论