微信小程序自定义标签组件component封装、组件生命周期,组件通信
本文来说下小程序的自定义标签组件封装。
相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生命周期,数据接收传递方式也和路由组件不同!
假设你已经创建好了微信小程序项目!
新建component组件
本文以封装一个可用于关闭,添加,删除的按钮组件为例。
首先找到项目里面pages文件夹,鼠标右键pages文件夹,选择新建目录,输入名字globalComponents,该文件夹用于存放component组件。鼠标右键globalComponents文件夹,选择新建目录,输入名字closeAddReduceBtn,再右键closeAddReduceBtn文件夹,选择新建Component,输入名字closeAddReduceBtn。现在一个名为closeAddReduceBtn的component组件就创建好了。
component组件配置
创建好closeAddReduceBtn组件后,到pages下面的index文件夹,找到index.json文件,加上component组件配置,即usingComponents配置项。
index.json文件代码:
{"usingComponents": {"Radios": "../../globalComponents/Radios/closeAddReduceBtn"}}
此行: “Radios”: “…/…/globalComponents/closeAddReduceBtn/closeAddReduceBtn”,closeAddReduceBtn是自定义的标签名,后面是组件相对路径
引入标签组件
配置好后,到index.wxml文件中,写上自定义标签组件即可
component组件关键生命周期
这里只说关键,重要的生命周期
打开closeAddReduceBtn.js,我们可以看到,里面的内容,不同玉路由组件,component组件是由Component构造函数渲染的,onLoad,onShow什么的都没了。
// globalComponents/closeAddReduceBtn/closeAddReduceBtn.jsComponent({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {}})
properties是属性列表,通常用于接收父组件传递的值
data用于存放组件本身的值
methods用于存放自定义的函数,类似vue的methods,在component里面,你直接像在路由组件里面写方法是不能生效的,方法必须写在methods里面。
组件加载执行的函数是attached() {},需要我们手动加上,
组件页面初始化完成执行的函数是ready(){},手动给加上后,组件代码
// globalComponents/closeAddReduceBtn/closeAddReduceBtn.jsComponent({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {},/***组件加载执行*/attached() {},/***组件初始化完成执行*/ready(){},/*** 组件的方法列表*/methods: {}})
closeAddReduceBtn组件页面构建
下面我们将closeAddReduceBtn组件页面写完
closeAddReduceBtn.wxml
<view class="closeAddReduceBox"style="width:{{boxSize}}rpx;height:{{boxSize}}rpx;background-color:{{boxBackgroundColor}};border-width:{{boxBorderWidth}}rpx; transform: rotate({{rotate}});border-color:{{boxBorderColor}}"bindtap="clickBtn"><text style="background-color:{{childBackgroundColor}};width:{{firstChildWidth}}rpx;height:{{firstChildHeight}}rpx"></text><text wx:if="{{!isSingle}}" style="background-color:{{childBackgroundColor}};width:{{lastChildWidth}}rpx;height:{{lastChildHeight}}rpx"></text></view>
closeAddReduceBtn.wxss
.closeAddReduceBox{position: relative;border-radius: 50%;border-style: solid;}.closeAddReduceBox text{position: absolute;left:50%;top:50%;transform: translate(-50%,-50%) }
需要重点说的是closeAddReduceBtn.js
首先在properties中定义需要父组件传递的数据,定义数据为对象,其中type属性是定义接收的数据类型,value是默认值,如果需要默认值,可以在value里面定义。observer是定义传递值有变化时的监听函数,不过注意observer的值是函数名字符串,然后需要到methods中定义该函数
属性示例:
boxSize:{ type:Number, value: 32, observer:“getBoxSize” },//按钮尺寸
Component({/*** 组件的属性列表*/properties: {boxSize:{type:Number,value: 32,observer:"getBoxSize"},//按钮尺寸boxBackgroundColor:{type:String},//背景颜色boxBorderWidth:{type:Number},//边框宽度boxBorderColor:{type: String},//边框颜色rotate:{type:String},//选择角度childBackgroundColor:{type:String,value:'#ffffff'},//按钮里面横线颜色,即加减图标颜色childSize:{type:Number,value:0},//按钮里面横线尺寸,即加减图标尺寸isSingle:{type:Boolean,value:false},//是否只有一条线,即删除按钮,或者减号按钮bold:{type:Boolean,value:false}//是否加粗边框},/*** 组件的初始数据*/data: {firstChildWidth:0,//第一根横线宽度firstChildHeight:0,//第一根横线高度lastChildWidth:0,//第二根横线宽度lastChildHeight:0,//第二根横线高度},/***组件加载执行*/attached() {let {boxSize, boxBorderWidth, boxBorderColor, childSize, childHeight, rotate, onPressFun, bold } = this.dataif (boxSize !== 32) {; !childSize && (childSize = (20 / 32) * boxSize)// console.log(boxSize); !childHeight && (childHeight = (2 / 20) * childSize)}; !childSize && (childSize = 20); !childHeight && (childHeight = 2)childHeight = bold ? (childHeight + 2) : childHeightboxBorderColor && !boxBorderWidth && (boxBorderWidth = 2)// console.log(boxBorderWidth)this.setData({firstChildWidth:childSize,firstChildHeight: childHeight,lastChildWidth: childHeight,lastChildHeight: childSize,boxBorderWidth})},/*** 组件的方法列表*/methods: {//a按钮点击事件clickBtn(){//组件按钮点击事件,若需要向父组件传递数据或者让父组件监听到相应的操作,通过this.triggerEnent向父组件传递,三个参数,第一个参数是父组件的监听事件名,第二个是传递给父组件的值,第三个参数是触发事件的选项let value='click'let eventOption={bubbles:false,//默认false,事件是否冒泡composed:false,//默认false,事件是否可以穿越组件边界,为false时,事件将只能在引用组件的节点树上触发,不进入其他任何组件内部capturePhase:false,//默认false,事件是否拥有捕获阶段}this.triggerEvent('event',value,eventOption)},//尺寸监听getBoxSize(value){//value是监听到的值console.log(value)}}})
父组件使用
接下来看父组件的使用
在index.wxml中
<closeAddReduceBtn class="closeAddReduceBtn" boxBackgroundColor="#999999" rotate="45deg" bindevent="delImg" data-index="{{index}}"/>
将需要的属性直接传递即可。
特别注意的是bindevent,这是bind和组件事件名event的组合,event就是组件里面this.triggerEvent(‘event’,value,eventOption)定义的event,假设我们在组件里面写成this.triggerEvent(‘getBtn’,value,eventOption),那么在父组件就要对应写成bingetBtn
下面看父级组件触发的事件,component组件向父级组件传递的数据,父级组件通过e.detail获取
// 删除图片delImg(e){let {index}=e.currentTarget.datasetlet value=e.detail //value是component组件向父组件传递的数据console.log(value)let {showImgs}=this.datashowImgs.splice(index,1)this.setData({showImgs})},
关键生命周期函数的其他写法以及其他类型生命周期
关键生命周期函数也可以用下面写法
lifetimes: {attached: function () {// 在组件实例进入页面节点树时执行},detached: function () {// 在组件实例被从页面节点树移除时执行},},
即将函数都写在lifetimes中。
还有一些特殊的生命周期,它们并非与组件有很强的关联,但有时组件需要获知,以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”,在 pageLifetimes 定义段中定义
pageLifetimes: {show: function() {// 页面被展示},hide: function() {// 页面被隐藏},resize: function(size) {// 页面尺寸变化}}
在 behaviors 中也可以编写生命周期方法,同时不会与其他 behaviors 中的同名生命周期相互覆盖。但要注意,如果一个组件多次直接或间接引用同一个 behavior ,这个 behavior 中的生命周期函数在一个执行时机内只会执行一次。
behaviors :{created(){},//在组件实例刚刚被创建时执行attached(){},//在组件实例进入页面节点树时执行ready(){},//在组件在视图层布局完成后执行moved(){},//在组件实例被移动到节点树另一个位置时执行detached(){},//在组件实例被从页面节点树移除时执行error(){},//Object Error每当组件方法抛出错误时执行}
配置全局组件
有些组件,我们可能在很多页面都会使用,因此希望只做一次配置即可,只需要在app.json中添加usingComponents配置即可
app.json
{"pages": ["pages/index/index","pages/hmongb/hmongb"],"window": {"backgroundColor": "#633319","backgroundTextStyle": "light","navigationBarBackgroundColor": "#633319","navigationBarTitleText": "苗文hmongb","navigationBarTextStyle": "white"},"tabBar": {"selectedColor": "#633319","color": "#898888","list": [{"iconPath": "./images/index-gray.png","selectedIconPath": "./images/index-active.png","text": "查询","backgroundColor": "#ffffff","pagePath": "pages/index/index"},{"iconPath": "./images/hmongb-gray.png","selectedIconPath": "./images/hmongb-active.png","text": "我的","backgroundColor": "#ffffff","pagePath": "pages/hmongb/hmongb"}]},"subpackages": [{"name": "hmongbPage","root": "hmongbPage","pages": ["giveUsMsg/giveUsMsg"]}],"sitemapLocation": "sitemap.json","style": "v2","usingComponents": {"Radios": "../../globalComponents/Radios/Radios","doubleTopBar": "../../globalComponents/doubleTopBar/doubleTopBar","leftScroll": "../../globalComponents/leftScroll/leftScroll","searchTopBar": "../../globalComponents/searchTopBar/searchTopBar","topTitleBar": "../../globalComponents/topTitleBar/topTitleBar"}}