小程序组件化开发之component组件

我们在上篇博文里面介绍了小程序的template模板，这里介绍一下component组件。
我们创建template模板的时候，只创建了wxml和wxss文件，并没有json和js文件，而且数据交换以及事件都是在调用的时候操作。今天介绍的component组件则有自己的业务逻辑，可以看做一个独立的page页面，里面也有js和json文件。简单来说，如果只是展示，使用template就足够了，如果涉及到的业务逻辑交互比较多，那就最好使用component组件了。

创建组件

和template一样，也是在根目录创建一个存放组件的目录，里面创建二级目录，用于区分不同的组件，然后创建对应的页面文件，如下：

组件文件内容

我们还是以弹窗为例来介绍。
popup.wxml文件：

<view class="wx-popup" hidden="{{!isShow}}">
<view class='popup-container'>
<view class="wx-popup-title">{{title}}</view>
<view class="wx-popup-con">{{content}}</view>
<view class="wx-popup-btn">
<text class="btn-no" bindtap='_error'>{{btn_no}}</text>
<text class="btn-ok" bindtap='_success' class='confirm'>{{btn_ok}}</text>
</view>
</view>
</view>

可以看到里面不需要任何标签。

wxss文件：

wxss文件内容和template的wxss文件内容一样，这里不在赘述

popup.json文件：

{
"component": true,
"usingComponents": {}
}

这里是固定格式，把component 设为true

wxjs文件：

Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: {
isShow:{
type: Number,
value:1
},
title: {            // 属性名
type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: '标题'     // 属性初始值（可选），如果未指定则会根据类型选择一个
},
// 弹窗内容
content: {
type: String,
value: '内容'
},
// 弹窗取消按钮文字
cancelText: {
type: String,
value: '取消'
},
// 弹窗确认按钮文字
confirmText: {
type: String,
value: '确定'
}
},
/**
* 组件的初始数据
*/
data: {
flag: true,
},
/**
* 组件的方法列表
*/
methods: {
//隐藏弹框
hidePopup: function () {
this.setData({
isShow: !this.data.isShow
})
},
//展示弹框
showPopup() {
this.setData({
flag: !this.data.flag
})
},
/*
* 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
*/
_cancelEvent() {
//触发取消回调==和外界交换的事件是cancel
this.triggerEvent("cancel");
},
_confirmEvent() {
//触发成功回调==和外界交换的事件是confirm
this.triggerEvent("confirm");
}
}
})

组件创建完成。

父模板使用组件

index.json文件引入组件（不需要单独引入wxml和wxss文件）：

{
"usingComponents": {
"popup": "/component/popup/popup"
}
}

前面的popup是自己给组件起的名字，在wxml里面使用：

index.wxml使用组件：

<popup id='popup'
title='标题'
content='我是内容'
cancelText='取消'
confirmText='确定'
bind:cancel="cancel"
bind:confirm="confirm">
</popup>

上面id的内容就是json文件定义的组件名字。
title、content等都是组件的属性值，这些值可以在父组件里面修改：

this.popup.setData({'title':'我是标题'});

bind 后面是组件的事件。在调用组件的js文件里面使用此方法,如下：

  cancel(){
console.log('点击了取消');
this.popup.setData({'title':'我是标题'});},
confirm() {
console.log('点击了确定');
},
showPopup() {
this.popup.showPopup();
},

组件的定义及使用就是这样的，非常简单。