好记性不如烂笔头
组件开发，让代码看起来更加整洁，代码复用性更高，能够减少维护成本，可以让我们少写很多代码。
所以，备忘一下小程序的组件开发流程。
1. 创建组件
使用微信开发者工具可以很方便的创建组件，如图所示，微信开发者工具会为我们自动生成组件相关的文件，组件名称可以随便起，建议最好统一，方便调用，我习惯统一为index
2. 设置组件
在组件的wxml文件中创建一个示例view。
<view class="container"></view>
在组件的wxss文件中设置属性，方便查看。
.container {
width: 200rpx;
height: 200rpx;
background-color: red;
}
3. 调用组件
在要调用组件的页面的json文件中配置组件
c-one是我给这个组件自定义的名称，这个名称可以随便定义，建议最好统一风格，这样有利于代码维护
{
"usingComponents": {
"c-one": "/components/one/index"
}
}
在调用组件的页面的wxml文件中使用配置好的组件
<c-one />
效果就出来了
4. 组件的属性
当然，组件不可能就这么简单，它还有组件的属性和组件的方法等
组件的属性一般定义在组件的js文件中的properties里，这里的属性都是对外公开的，外界是可以调用的，如定义一个text属性，并在组件的wxml文件中绑定
type属性的类型
value属性的初始值(可选)
observer属性值改变的监听方法(可选)
Component({
/**
* 组件的属性列表
*/
properties: {
text: {
type: Number,
value: 1,
observer: function() {
}
}
}
})
<view class="container">{{text}}</view>
在调用组件的页面就可以通过组件的属性对其进行赋值
<c-one text="{{999}}" />
组件的属性值改变的监听方法接收三个参数
newVal改变后的值
oldVal改变前的值
changedPath改变路径
properties: {
text: {
type: Number,
observer: function(newVal, oldVal, changedPath) {
}
}
该监听方法还可以使用字符串方法定义
properties: {
text: {
type: Number,
observer: 'myFunction'
}
},
methods: {
myFunction: function() {
}
}
5.组件的事件
如果需要在页面监听组件的事件怎么办，那就需要把组件的事件传递到外部，供调用组件的页面监听，在调用组件的页面获取到组件的事件，并获取到事件携带的信息
如，给组件添加一个点击方法，点击后把组件的当前属性值+1，并在调用组件的页面获取到组件事件和组件改变后的属性值，如下所示
组件的wxml文件
<view bind:tap="onTap" class="container">{{text}}</view>
组件的js文件
定义
info是获取组件的属性值，并+1
通过this.triggerEvent('', {}, {})可以把组件的事件传递给外界
其中接收的第一个参数为事件的传递名称，可以随意定义，外界就是通过这个名称来监听事件的
第二个参数为要传递的属性，通过key-value的方式传递，外界通过事件的detail.key来获取key对应的值
第三个参数一般不进行设置，使用系统默认就行
methods: {
onTap: function() {
const info = this.properties.text + 1
this.triggerEvent('tapping', {
info: info
}, {})
}
}
这样就完成了组件的事件传递
调用组件的页面的wxml文件中，监听组件的事件，其中
bind:tapping就是组件中this.triggerEvent('', {}, {})中的自定义的方法名
设置text标签用来展示获取到的值，
<c-one bind:tapping="onTapping" text="{{999}}" />
<text>{{info}}</text>
调用组件的页面的js文件中，实现监听方法
onTapping: function(event) {
const info = event.detail.info
this.setData({
info: info
})
}
点击后的效果
6. 组件的生命周期
组件和页面一样，也有自己的生命周期，常用的是
attached，组件加载时会调用该生命周期方法，我们可以在此方法中对组件的数据进行初始化
attached: function(event) {
// 组件加载
}
7. 组件的通用行为behaviors
① 创建
js文件，定义属性、数据或方法
② 在组件中导入创建的js文件，在Component中声明behaviors
③ 组件就可以使用这些属性和方法
如，创建一个testBeh.js文件，定义一个公用属性和公用方法
const testBeh = Behavior({
properties: {
title: String
},
methods: {
test: function() {
}
}
})
export { testBeh }
在组件中声明behaviors
import {
testBeh
} from '../behaviors/testBeh.js'
Component({
behaviors: [testBeh],
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
attached: function() {
// 调用通用属性
const title = this.properties.title
// 调用通用方法
this.test()
},
/**
* 组件的方法列表
*/
methods: {
}
})
网友评论