案例:
自定义tabbar组件 https://blog.csdn.net/qq_39232387/article/details/109121257
自定义组件导航栏切换 https://blog.csdn.net/qq_39232387/article/details/109121257
一、创建组件:
比如创建mybox这个组件
1.根目录下创建一个components文件夹(和pages同级),用来存放所有自定义的组件。
2.components文件夹右键创建一个mybox文件夹。
3.mybox文件夹 右键->新建Component创建组件。这样创建的目的是在json文件中添加"component": true,将其申明为一个组件。
二、使用组件:
比如index页面需要使用这个组件
1.在index.json文件中注册组件。添加类似如下代码:
{
"usingComponents": {
"mybox": "/components/mybox/mybox"
}
}
2.然后在index.wxml文件中使用组件:
<mybox></mybox>
三、给自定义组件添加属性:
1.在组件的js文件中,在properties中添加属性,添加属性的时候,需要指定两个值,一个是type,代表的是这个属性的类型,一个是value,代表的是这个属性的默认值。示例代码如下:
Component({
properties: {
showInner: {
type: Boolean,
value: false
}
}
})
2.然后在wxml模板中就可以使用了。示例代码如下:
<view class="outter">
<view wx:if="" class="inner">知了课堂</view>
</view>
3.在使用组件的时候,可以直接在组件上给这个属性设置值:
<mybox showInner="true"></mybox>
4.还有另外一种使用data的形式,data中的数据可以渲染到组件的代码中,但是使用data不能作为属性来使用。
三、在组件中添加节点:
在使用小程序内置的组件的时候,比如view,我们还可以在view中添加其他的组件。这个功能可以通过slot节点来实现。示例代码如下:
<view class="outter">
<view wx:if="" class="inner">知了课堂</view>
<slot></slot>
</view>
以后在使用这个组件的时候,还可以添加自己的节点。示例代码如下:
<mybox showInner="true">
<view>这是index中添加的</view>
</mybox>
以上是添加一个slot,如果想要添加多个slot,那么需要在js文件中添加一个multipleSlots属性,示例代码如下:
Component({
options: {
multipleSlots: true
},
...
然后在wxml文件中,需要给每一个slot都指定name。示例代码如下:
<view class="outter">
<slot name="before"></slot>
<view wx:if="" class="inner">课堂</view>
<slot name="after"></slot>
</view>
最后在使用这个组件的时候,也需要指定放在那个slot中。示例代码如下:
<mybox showInner="true">
<view slot="before">这是before的组件</view>
<view slot="after">这是after的组件</view>
</mybox>
组件样式注意事项:
1.组件对应 wxss 文件的样式,只对组件wxml内的节点生效。编写组件样式时,需要注意以下几点:
2.组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。
3.组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。
4.子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。
继承样式,如 font 、 color ,会从组件外继承到组件内。
5.除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。
#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点,否则不一定会生效 */
事件:
1.引用组件的页面,可以直接绑定事件。
<my-component bindtap="tapEvent"></my-component>
2.自定义组件事件。直接在组件内绑定事件。并且如果我们想在组件内捕获到事件后,要通知到父组件,那么可以通过triggerEvent方法来触发自定义的事件。示例代码如下:
// 组件代码
<view class="outter">
<view class="inner" bindtap="onInnerTapEvent"></view>
</view>
然后在组件的js文件中,使用以下代码进行捕获和传递给父组件。示例代码如下:
Component({
method: {
onInnerTapEvent: function(event){
console.log("组件内监听到了innerTapEvent事件");
var detail = {} // detail对象,提供给事件监听函数
var option = {} // 触发事件的选项
this.triggerEvent("customevent",detail,option);
}
}
})
然后在使用组件的地方,需要给自定义事件绑定监听方法。示例代码如下:
<my-component bindcustomevent="onCustomEventEvent">
</my-component>
其中的detail是在触发innerEvent事件的时候,传递给外面接收这个事件的对象一些额外的信息,option是一些选项。这些选项可以如下:
选项名 | 类型 | 是否必填 | 默认值 | 描述 |
---|---|---|---|---|
bubbles | Boolean | 否 | false | 事件是否冒泡 |
composed | Boolean | 否 | false | 事件是否可以穿越组件边界,为false时,事件将只能在引用组件的节点树上触发,不进入其他任何组件内部 |
capturePhase | Boolean | 否 | false | 事件是否拥有捕获阶段 |
生命周期:
组件本身的生命周期:
组件的生命周期,指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
其中,最重要的生命周期是created/attached/detached,包含一个组件实例生命流程的最主要时间点。(注意:在2.2.3基础库之前,生命周期函数写在Component中就可以,在2.2.3后应该写在lifetimes中。)
1.组件实例刚刚被创建好时,created生命周期被触发。此时,组件数据this.data就是在Component构造器中定义的数据data。此时还不能调用setData。通常情况下,这个生命周期只应该用于给组件this添加一些自定义属性字段。
2.在组件完全初始化完毕、进入页面节点树后,attached生命周期被触发。此时,this.data已被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个时机进行。
3.在组件离开页面节点树后,detached生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则 detached会被触发。
lifetimes: {
created: function() {
console.log("刚被创建好")
},
attached: function() {
},
detached: function() {
}
}
监听组件所在页面的生命周期:
还有一些特殊的生命周期,它们并非与组件有很强的关联,但有时组件需要获知,以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”,在 pageLifetimes 定义段中定义。其中可用的生命周期包括:
pageLifetimes : {
show: function() {
}
}