微信小程序开发入门与实战(插槽及组件页面的生命周期)

简介: 微信小程序开发入门与实战(插槽及组件页面的生命周期)

自定义组件 - - 组件所在页面的生命周期


1、什么是组件所在页面的生命周期


有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期。

例如:每当触发页面的 show 生命周期函数的时候,我们希望能够重新生成一个随机的 RGB 颜色值。


在自定义组件中,组件所在页面的生命周期函数有如下 3 个,分别如 👇


image.png

2、pageLifetimes 节点


组件所在页面的生命周期函数,需要定义在 pageLifetimes 节点中 如 👇

代码如 👇

Component({
pageLifetimes:{
show(){
  },
hide(){
  },
resize(size){
  }
}
})

3、生成随机的 RGB 颜色值


实现:每当页面显示时调用组件 生命周期Show 如 👇

showRandomColor(){
this.setData({
_rgbValue:{
r:Math.floor(Math.random()*266),
g:Math.floor(Math.random()*266),
b:Math.floor(Math.random()*266),
      }
    })
  }
pageLifetimes:{
show(){
this.showRandomColor();
    },
  },

自定义组件 - 插槽


1、什么是插槽


在自定义组件的 wxml 结构中,可以提供一个 节点(插槽),用于承载组件使用者提供的 wxml 结构。

2、单个插槽


在小程序中,默认每个自定义组件中只允许使用一个 《slot》 进行占位,这种个数上的限制叫做单个插槽。

使用如 👇

3.gif

3、启用多个插槽


启用多个插槽在小程序的自定义组件中,需要使用多 插槽时,可以在组件的 .js 文件中,通过如下方式进行启用。

使用如 👇

options:{
multipleSlots:true  }

4、定义多个插槽


  1. 可以在组件的 .wxml 中使用多个 标签,以不同的 name 来区分不同的插槽。
  2. 在使用带有多个插槽的自定义组件时,需要用 slot 属性来将节点插入到不同的 中。
  3. 效果如 👇
WXML<text2><viewslot="a1">插槽1</view><view>插槽2</view><viewslot="a2">插槽2</view></text2>组件的WXML<slotname="a1"></slot><view>插槽练习</view><slotname="a2"></slot>开启插槽options:{
multipleSlots:true}

最后


image.png

下篇文章再见ヾ( ̄▽ ̄)ByeBye

image.png

相关文章
|
2月前
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
72 1
微信小程序:轻松实现时间轴组件
|
2月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
96 1
|
2月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
665 1
|
3月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
2月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
83 0
微信小程序:自定义关注公众号组件样式
|
2月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
81 1
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
258 1
|
2月前
|
小程序 JavaScript
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
72 1
|
2月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
500 0
|
3月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)