微信小程序自定义组件化原理探究

Posted by 共田君的博客 on November 30, 2017

微信小程序自定义组件化原理探究

组件化是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中引用它

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=''  />

这里有个技巧,用…扩展运算符,把组件中的数据都一次性传递过来,并且传递之后的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

极限水果,专注高端程序员技术与理财人生