我们在上篇博文里面介绍了小程序的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();
},
组件的定义及使用就是这样的,非常简单。