小程序组件化开发
一、组件实现方式：template模板和component构造器
除了component，小程序中还有另一种组件化你的方式template模板
区别：
1、template主要是展示，方法则需要在调用的页面中定义。简单来说，如果只是展示，使用template就足够了
2、而component组件则有自己的业务逻辑，可以看做一个独立的page页面。如果涉及到的业务逻辑交互比较多，那就最好使用component组件了。
二、template模板
1、模板定义
建议单独创建template目录，在template目录中创建管理模板文件。
由于模板只有wxml、wxss文件，一个template的模板文件和样式文件只需要命名相同即可，方法则需要在调用的页面中定义
模板文件（wxml）：用name区分多个模板
[代码]<template name="packModule">
<view class="packModule">packModule</view>
</template>
[代码]
模板文件（wxss）：自定义模板的样式文件（略），实例中模块相关样式都统一集中在module.wxss中
2、页面引用：(如首页引用)
index.wxml：
[代码]<!--导入模板-->
<import src="./modules/pack.wxml"/>
<!--嵌入模板-->
<view class="moduleWrap" wx:for="{{moduleInfoList}}" wx:for-item="moduleInfo" wx:key="index">
<!--自由容器模块 里面还有子模块-->
<template is="packModule" data="{{moduleInfo}}" wx-if="{{moduleInfo.style == 5}}"></template>
<view>
[代码]
index.wxss：
[代码]@import "../../libs/templates/module.wxss";
[代码]
备注：
一个模板文件中可引用多个template,每个template均以name进行区分，页面调用的时候也是以name指向对应的template；
template模板没有配置文件(.json)和业务逻辑文件（.js）,所以template模板中的变量引用和业务逻辑事件都需要在引用页面的js文件中进行定义；
三、Component组件：
[图片]
1. 组件创建：
新建component目录——创建子目录——新建Component（如示例组件：dialog组件）
示例dialog组件也由4个文件构成，与page文件类型相同，但是js文件和json文件与页面有所不同。
dialog.wxml：
[代码]<view class="dialog" wx:if="{{ isShow }}">
<!-- 遮罩层 -->
<view class="dialog_mask" catchtouchmove="_catchTouch"></view>
<!-- 内容 -->
<view class="container" catchtouchmove="_catchTouch">
<view class="title" wx:if="{{title}}">{{title}}</view>
<view class="content" wx:if="{{content}}">
{{content}}
</view>
<view class="footer">
<view class="btn cancel_btn" wx:if="{{showCancelButton}}" bindtap="hide" style='background-color:{{globalColor}};'>{{cancelButton}}</view>
<view class="btn comfirm_btn" bindtap="comfirm" style='background-color:{{globalColor}};'>{{confirmButton}}</view>
</view>
</view>
</view>
[代码]
dialog.json：
[代码]{
"component": true,
"usingComponents": {}
}
[代码]
dialog.wxss：（组件对应 wxss 文件的样式，只对组件wxml内的节点生效）
[代码]/* components/dialog/dialog.wxss */
.dialog {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top:0;
z-index: 9999;
}
...
[代码]
dialog.js：
[代码]/*
* dialog 模态对话框
* Props
* 通过事件调用组件
* globalColor:全局色
* Event
* show 模态对话框 @param {Object} 配置参数
* hide 模态对话框
* Example
* 1、页面中引用dialog：（示例index页面）
* 1-1：index.json中声明组件引用
* {
* "usingComponents": {
* "dialog": "../../components/dialog/dialog"
* }
* 1-2：index.wxml引用模板
* <dialog id='dialog' global-color="{{globalColor}}"></toast>
* 1-3：index页面所引用js文件中，获取组件实例
* onReady: function () {
* //获得组件
* this.dialog = this.selectComponent("#dialog");
* }
* 2、根据业务条件进行调用：
* 2-1、页面中调用：
* this.dialog.show({
* title: "提交成功",
* content: "描述信息",
* cancelButton: "取 消",
* showCancelButton:false,//是否显示取消按钮，可缺省，默认不显示
* confirmButton: '确 定',
* callback: function () {}//确定按钮回调函数，可缺省，默认只关闭对话框
* });
* 2-1、页面组件中调用：
* getCurrentPages()[getCurrentPages().length - 1].dialog.show(...);//传参同上
* 备注：不直接在组件ready中获取dialog组件，会产生多个组件实例，故直接调用页面已有组件实例方法
*/
Component({
/**
* 组件的属性列表
*/
properties: {
'globalColor': String
},
/**
* 组件的初始数据
*/
data: {
isShow: false,
title: '标题',// 弹窗标题
content: "", // 弹窗内容
cancelButton: '取 消',
showCancelButton:false,//是否显示"取消"按钮
confirmButton: '确 定',
callback: null //回调函数
},
/**
* 组件的方法列表
*/
methods: {
//隐藏信息提示
hide() {
this.setData({
isShow: !this.data.isShow
})
},
// 阻止页面滚动
_catchTouch: function () {
return;
},
//展示信息提示
show(options) {
this.setData({
isShow: !this.data.isShow,
callback:null
});
let _this = this;
// 通过options参数配置
if (options) {
this.setData(options);
}
},
// 确定回调
comfirm(){
this.hide();
this.data.callback && this.data.callback();//执行各dialog的回调逻辑
}
}
})
[代码]
2、页面引用：
index.json：（需在json配置文件中进行配置开启使用组件）
[代码]{
"usingComponents": {
"dialog": "/components/dialog/dialog"
}
}
[代码]
index.wxml：（模板文件中引用）
[代码]<!-- 自定义dialog组件 -->
<dialog id='dialog' global-color="{{globalColor}}"></dialog>
[代码]
四、注意点：
1、component组件中扩展自定义节点：
在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。
默认情况下，一个组件的wxml中只能有一个slot。需要使用多slot时，可以在组件js中声明启用，以不同的 name 来区分。
[代码]Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
}
})
[代码]
2、component组件样式注意点：
组件对应 wxss 文件的样式，只对组件wxml内的节点生效。
2-1、组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
2-2、组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
2-3、子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
2-4、继承样式，如 font 、 color ，会从组件外继承到组件内。
2-5、除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。
[代码] #a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */
[代码]
五、组件间通信与事件：
1、父组件（调用页面）向子组件传值通讯：
通过properties向自定义组件传递数据
2、子组件向父组件（调用页面）传值通讯：
1、监听事件
自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件
[代码]<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" name="{{name}}" />
Page({
data:{
name:"test"
},
onMyEvent: function(e){
e.detail // 自定义组件触发事件时提供的detail对象
}
})
[代码]
2、触发事件
自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：
[代码]<!-- 在自定义组件中 -->
<view>{{name}}</view>
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
Component({
properties: {
name: {
type: String,
value: ''
}
},
methods: {
onTap: function(){
var myEventDetail = {} // detail对象，提供给事件监听函数
var myEventOption = {} // 触发事件的选项
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})
[代码]
总结
自定义组件，可以理解为一个自定义的标签，页面的一个片段，可以分为template方式和component组件方式实现；如果是简单的内容展示，逻辑单一，使用template方式即可，但如果每一个组件都有自己的业务逻辑，各自独立，建议使用component组件方式实现，灵活性更高。
参考文献
官方文档
