一、自定义组件介绍
1. 什么是自定义组件?
当微信官方提供的组件,不能满足我们的需求时,且使用系统组件构造模板 wxml 较为复杂,我们就可以考虑使用微信官方提供的组件架构,定义符合我们需求的组件。
2. 自定义组件组成
自定义的组成和小程序的一般页面的结构一样。由:js\json\wxml\wxss
四个文件构成,其中:
js : 负责组件的逻辑。 json: 负责定义组件的配置。 wxml: 负责定义组件的布局。 wxss: 负责组件的样式。
我将按照如下顺序,定义一个简单的组件。
1、编写组件的页面,仅仅显示一行文字,以演示建立和编写组件的文件。
2、引用上一步编写的组件,以演示如何引用自定义组件。
3、编写组件逻辑结构,实现组件数据由 js 逻辑控制,组件内部实现响应用于操作事件。
4、提供接口用于回调组件内部事件。
5、提供方法以便外部直接调用使用组件。
复制代码
二、实现自定义组件
1、新建组件
在定好的目录下右键新建一个 Component 目录,系统会自动帮助我们创建好自定义组件的四个必要文件,步骤与结果如图一、二所示。
下面我们来编写组件 wxml 文件内容。
// test-component.wxml 的内容
<text>这是自定义组件</text>
复制代码
组件 json 内容 如果是使用微信开发者工具建立的 component 文件,那么 ide 会帮助我们自动创建如下代码(手动的自己添加就好):
{
"component": true,
"usingComponents": {}
}
// component 表明组件的身份。
// usingComponents 组件引用的子组件(组件是可以使用别的自定义组件的,系统组件无需声明)
复制代码
组件 js 内容,ide 会自动创建如下代码:
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
复制代码
组件的 wxss 我们可以暂时不用理会,就是一般的样式代码。
到这里我们的一个简单的自定义组件就已经完成,下面进行引用。
2、使用自定义组件
使用自定义组件只需要两步:
第一、在需要引用的页面 json 配置代码中添加如下配置:
"usingComponents": {
"test-1": "/pages/component/test-component"
}
// usingComponents 为依赖组件的配置项
// test-1 为依赖组件的别名(可以随意定),在使用页面的布局中使用此别名。
// /pages/component/test-component 为依赖组件的路径(无需添加后缀)。
复制代码
第二、在对于布局页面中使用,和使用系统组件一样,上一步定的 「别名」作为标签名。
<!-- index.wxml 文件内容 -->
<view>
<test></test>
</view>
复制代码
保存重新编译之后,页面就出现了我们自定义组件的内容。
3、实现响应用户操作事件
这一步将实现用户的点击事件。在用户点击自定义组件之后,将改变自定义组件的文字内容。
第一、捕获自定义组件的点击事件。
自定义组件的事件处理和在一般页面一样,catchtap
对应的事件,然后在 js 文件中定义好对应的处理函数。代码如下:
<!-- test-component.wxml 的内容 -->
<text catchtap='onClick'>{{text}}</text>
复制代码
// pages/component/test-component.js
Component({
/**
* 组件的初始数据
*/
data: {
text:'这是初始文字'
},
methods:{ // 方法一定要放在这个里面
/**
* 响应用于点击的方法
*/
onClick: function (e) {
// 设置数据也是采用数据判定的方法,和一般页面一致。
this.setData({
text: '点击了'
});
}
}
})
复制代码
效果如下
4、在外部监听上一步的文字改变时间。
这一部分主要的代码还是位于自定义组件的 js 文件内。
第一、在自定义组件内部触发一个组件的自定义事件,代码如下:
// pages/component/test-component.js
Component({
/**
* 组件的初始数据
*/
data: {
text:'这是初始文字'
},
methods:{
/**
* 响应用于点击的方法
*/
onClick: function (e) {
// 设置数据也是采用数据判定的方法,和一般页面一致。
this.setData({
text: '点击了'
});
// 自定义一个组件触发事件
this.triggerEvent('onTextChange');
}
}
})
复制代码
第二、在引用组件的页面(wxml)捕获这个事件
<!-- index.xml 文件内容 -->
<view>
<test catch:onTextChange='onTextChange'></test>
</view>
复制代码
第三、在引用组件页面 js 逻辑内建立这个捕获事件
// index.js 页面内容
Page({
data: {
},
onLoad: function () {
},
// 捕获事件
onTextChange: function(){
wx.showToast({
title: '捕获事件',
})
}
})
复制代码
效果如下:
5、自定义组件提供给外部调用的方法
第一步、编写对外提供的方法
这里给外部提供一个改变文字内容的方法,代码如下:
// pages/component/test-component.js
Component({
/**
* 组件的初始数据
*/
data: {
text:'这是初始文字'
},
methods:{
/**
* 响应用于点击的方法
*/
onClick: function (e) {
// 设置数据也是采用数据判定的方法,和一般页面一致。
this.setData({
text: '点击了'
});
// 自定义一个组件触发事件
this.triggerEvent('onTextChange');
}
},
// 这个方法是给外部调用,用来改变这个组件的文字内容
setText: function (text) {
this.setData({
text: text
});
}
})
复制代码
第二步、通过 id 获取组件实例,使用组件实例直接调用组件方法
代码如下:
Page({
data: {
},
onLoad: function () {
},
// 捕获事件
onTextChange: function(){
wx.showToast({
title: '捕获事件',
})
},
// 响应点击事件
change:function(e){
// 使用官方提供的 selectComponent 方法通过 id 获取组件实例
var mComponent = this.selectComponent('#mComponent');
// 通过实例,直接调用组件内部提供的方法
mComponent.setText('外部调用了');
}
})
复制代码
<!-- index.wxml 内容 -->
<view>
<test catch:onTextChange='onTextChange' id='mComponent'></test>
<button catch:tap='change'>点击改变文字内容</button>
</view>
复制代码
最终效果如下: