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

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

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


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

相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
26天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
27天前
|
人工智能 小程序 vr&ar
AI运动小程序开发常见问题集锦二
截至当前,我们的AI运动识别小程序插件已迭代至第23个版本,广泛应用于健身、体育、体测、AR互动等场景。本文针对近期用户咨询,汇总了常见问题,帮助用户减少开发成本,提高效率。主要涵盖计时与计数模式的区别、综合排行榜生成方法、全屏模式适配及无开发能力用户的解决方案。
|
26天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
2月前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先,我们需要明确跳绳计数小程序的核心功能:为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数,并为用户提供清晰、直观的计数展示。
|
2月前
|
人工智能 编解码 小程序
【一步步开发AI运动小程序】四、小程序如何抽帧
随着AI技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等APP使云上运动会、线上健身等概念备受关注。本文将引导您从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”。文中详细介绍了微信小程序抽帧的相关API、设置及注意事项,帮助开发者更好地实现AI运动功能。下篇将介绍人体识别技术,敬请期待。
|
2月前
|
传感器 存储 小程序
跳绳计数小程序开发
跳绳计数小程序旨在通过智能设备(如手机或智能手表)记录用户在跳绳过程中的次数、时间、速度等关键数据,为用户提供便捷的运动记录和数据分析服务
|
2月前
|
小程序 搜索推荐 前端开发
小剧场短剧影视小程序开发
小剧场短剧影视小程序旨在为用户提供一个便捷、互动的平台,让用户能够随时随地观看、分享和评论各类小剧场短剧。通过小程序,用户可以浏览热门短剧、搜索感兴趣的内容、参与社区互动,以及享受个性化的推荐服务。
|
2月前
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先,明确你的短剧平台的目标用户群体和他们的需求。比如,年轻用户可能更倾向于轻松、幽默的短剧内容,而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面
|
2月前
|
机器学习/深度学习 人工智能 小程序
【一步步开发AI运动小程序】三、运动识别处理流程
随着人工智能技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等AI运动APP备受关注。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章介绍了视频帧、帧率FPS、抽帧和人体识别等基本概念,并详细说明了处理流程,包括抽帧、人体识别检测、骨骼图绘制和运动分析等步骤。下篇将介绍如何在小程序中实现抽帧。