微信小程序组件设计规范
微信小程序组件设计规范
组件化开发的思想贯穿着我开发设计过程的始终。在过去很长一段时间里，我都受益于这种思想。
- 组件可复用 - 减少了重复代码量
- 组件做为抽离的功能单元 - 方便维护
- 组件作为
template使用，可以方便计算各种属性而不是在wxml引入wxs
在日常的小程序开发组件过程中，我一般会遵循如下几个规则：
1.样式独立 & 依赖独立
在组件开发过程中，组件可以依赖于全局样式，组件在引入时，使用该页面样式和全局样式共同渲染。
options: {
addGlobalClass: true,
multipleSlots: true
}但是基于组件的可移植性考虑，建议每个组件配置为不依赖于全局样式。
options: {
addGlobalClass: false,
multipleSlots: true
}选择在每个组件的wxss配置该组件所需的样式。
组件开发过程中，组件可以引入app.js，基于
const app = getApp();但是基于方便移植的角度考虑，组件中获取全局数据使用storge更为合适。
即使依赖于某些js文件，可将该文件放入组件目录下并引入。
- 属性侦听器 & 引用透明
组件可以接收页面传入的值，但是组件内数据格式或许不匹配页面展示需求，需要做某些调整，这些调整建议在组件内实现。组件内数据的修改不会影响到页面内数据。
虽然组件可以通过修改页面栈和其他的方式对父组件进行修改，但是这种方法是不被建议的，设计组件要保证引用透明原则，即一个组件内属性变化不应该对父组件产生影响。
properties: {
active:{
type:Number,
observer:function(newVal,oldVal){
//对数据进行预处理
}
}
}可以在侦听器中做一些对数据简单的处理，对于比较复杂的逻辑计算，请采用计算属性computed。
虽然原生的小程序并不支持该方式，但是可以通过引入第三方依赖完成，具体请参考官方文档computed | 微信开放文档 (qq.com)
3.事件委托
组件中所有会使页面栈发生变化的事件，需要跨页面操作数据的，全部交给父组件(页面)完成。
在A页面内点击组件C会跳转到E页面
在B页面内点击组件C会跳转到F页面
这种情况下可以将点击事件交给页面来处理，组件仅做一个事件通知。具体跳转事件交给页面内函数实现。
组件内使用：
this.triggerEvent('click',args)页面A：
<c-component bind:click="navtoPageE" />页面B：
<c-component bind:click="navtoPageF" />- 组件层级限制
尽量不要在组件中嵌套组件，曾在组件中使用一个 loading组件，但是通过参数控制该loading组件展示，出现无法隐藏问题时，无法定位到具体组件。
其次如果层级比较多，各种 props 传递，事件传递，维护成本比较高。
如果页面逻辑复杂，需要划分组件，请保证逻辑执行都在高层级组件完成，低层组件只做渲染使用。可以理解为低层级组件作为template
- 组件定义统一的
class（锚点）
这是为了方便统一调用组件中某个方法，作为模板使用常使用到该方法。
let acmp = this.selectAllComponents('.card')
acmp.forEach(function (ele, index) {
ele.closeActionBar();
})调用单一组件方法，可以定义ID
- 使用组件的生命周期
组件支持生命周期，某些只需要初始化一次的数据，或者计数器函数，请在attached内完成
lifetimes:{
attached(){
this.setData({
openid:app.globalData.openid
})
}
}参考文档 微信小程序--页面与组件之间如何进行信息传递和函数调用 - Kindear - 博客园 (cnblogs.com) 微信小程序--关于加快小程序开发的几个小建议 - Kindear - 博客园 (cnblogs.com)