小程序 自定义组件和生命周期

文章目录

  • ⾃定义组件
    • 创建⾃定义组件
      • 声明组件
      • 编辑组件
      • 注册组件
    • 声明引⼊⾃定义组件
    • ⻚⾯中使⽤⾃定义组件
    • 定义段与⽰例⽅法
    • 组件-⾃定义组件传参
      • 过程
  • 小程序生命周期
    • 应用生命周期
    • 页面生命周期
    • 页面生命周期

⾃定义组件

类似vue或者react中的自定义组件

⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。

创建⾃定义组件

类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成

可以在微信开发者⼯具中快速创建组件的⽂件结构
在这里插入图片描述

在⽂件夹内 components/myHeader ,创建组件 名为 myHeader

声明组件

首先需要在组件的json文件中进行自定义组件声明
myHeader.json

"component" : true

编辑组件

同时,还要在组件的wxml文件中编写组件模板。在wxss文件中加入组件样式
slot表示插槽,类似vue中的slot

myHeader.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">{{innerText}}<slot></slot>
</view>

在组件的 wxss ⽂件中编写样式
注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

myHeader.wxss

/* 这里的样式只应用于这个自定义组件 */
.inner {color: red;
}

注册组件

在组件的 js ⽂件中,需要使⽤ Component() 来注册组件,并提供组件的属性定义、内部数据和⾃定义⽅法

myHeader.js

Component({properties: {// 这里定义了innerText属性,属性值可以在组件使用时指定innerText: {// 期望要的数据是 string类型type: String,value: 'default value',}},data: {// 这里是一些组件内部数据someData: {}},methods: {// 这里是一个自定义方法customMethod: function(){}}
})

声明引⼊⾃定义组件

⾸先要在⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径
index.wxml

{// 引用声明"usingComponents": {// 要使用的组件的名称     // 组件的路径"my-header":"/components/myHeader/myHeader"}
}

⻚⾯中使⽤⾃定义组件

<view><!-- 以下是对一个自定义组件的引用 --><my-header inner-text="Some text"><view>用来替代slot的</view></my-header>
</view>

定义段与⽰例⽅法

Component 构造器可⽤于定义组件,调⽤ Component 构造器时可以指定组件的属性、数据、⽅法等。

定义段类型是否必填描述
propertiesObject Map组件的对外属性,是属性名到属性设置的映射表,参⻅下⽂
dataObject组件的内部数据,和 properties ⼀同⽤于组件的模板渲染
observersObject组件数据字段监听器,⽤于监听 properties 和 data 的变化,参⻅ 数据监听器
methodsObject组件的⽅法,包括事件响应函数和任意的⾃定义⽅法,关于事件响应函数的使⽤,参⻅ 组件事件
createdFunction组件⽣命周期函数,在组件实例刚刚被创建时执⾏,注意此时不能调⽤ setData ,参⻅ 组件⽣命周期
attachedFunction组件⽣命周期函数,在组件实例进⼊⻚⾯节点树时执⾏,参⻅ 组件⽣命周期
readyFunction组件⽣命周期函数,在组件布局完成后执⾏,参⻅ 组件⽣命周期
movedFunction组件⽣命周期函数,在组件实例被移动到节点树另⼀个位置时执⾏,参⻅ 组件⽣命周期
detachedFunction组件⽣命周期函数,在组件实例被从⻚⾯节点树移除时执⾏,参⻅ 组件⽣命周期

组件-⾃定义组件传参

  1. ⽗组件通过属性的⽅式给⼦组件传递参数
  2. ⼦组件通过事件的⽅式向⽗组件传递参数

过程

  1. ⽗组件 把数据 {{tabs}} 传递到 ⼦组件的 tabItems 属性中
  2. ⽗组件 监听 onMyTab 事件
  3. ⼦组件 触发 bindmytap 中的 mytap 事件
    • ⾃定义组件触发事件时,需要使⽤ triggerEvent ⽅法,指定 事件名 、 detail 对象
    • ⽗ -> ⼦ 动态传值 this.selectComponent(“#tabs”);

父组件代码

// page.wxml
<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >内容-这里可以放插槽
</tabs>
// page.jsdata: {tabs:[{name:"体验问题"},{name:"商品、商家投诉"}]},onMyTab(e){console.log(e.detail);},

子组件代码

// com.wxml
<view class="tabs"><view class="tab_title"  ><block  wx:for="{{tabItems}}" wx:key="{{item}}"><view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view></block></view><view class="tab_content"><slot></slot></view>
</view>
// com.js
Component({properties: {tabItems:{type:Array,value:[]}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {handleItemActive(e){this.triggerEvent('mytap','haha');}}
})

效果
在这里插入图片描述

小程序生命周期

分为应⽤⽣命周期和⻚⾯⽣命周期

应用生命周期

属性类型默认值必填说明
onLaunchfunction监听⼩程序初始化。
onShowfunction监听⼩程序启动或切前台。
onHidefunction监听⼩程序切后台。
onErrorfunction错误监听函数。
onPageNotFoundfunction⻚⾯不存在监听函数。

页面生命周期

属性类型说明
dataObject⻚⾯的初始数据
onLoadfunction⽣命周期回调—监听⻚⾯加载
onShowfunction⽣命周期回调—监听⻚⾯显⽰
onReadyfunction⽣命周期回调—监听⻚⾯初次渲染完成
onHidefunction⽣命周期回调—监听⻚⾯隐藏
onUnloadfunction⽣命周期回调—监听⻚⾯卸载
onPullDownRefreshfunction监听⽤⼾下拉动作
onReachBottomfunction⻚⾯上拉触底事件的处理函数
onShareAppMessagefunction⽤⼾点击右上⻆转发
onPageScrollfunction⻚⾯滚动触发事件的处理函数
onResizefunction⻚⾯尺⼨改变时触发,详⻅ 响应显⽰区域变化
onTabItemTapfunction当前是 tab ⻚时,点击 tab 时触发

页面生命周期

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/411212.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【汽车销售数据】2015~2023年各厂商各车型的探索 数据分析可视化

数据处理的思路&#xff1a; 1 各表使用情况&#xff1a; 汽车分厂商每月销售表&#xff0c;该表主要分析展示top10销量的厂商销量、占比变化情况&#xff08;柱形图、饼图&#xff09;&#xff1b;中国汽车分车型每月销售量表&#xff0c;该表主要分析展示top20销量的车型销…

web架构师编辑器内容-编辑器组件图层面板功能开发-锁定隐藏、键盘事件功能的开发

我们这一部分主要是对最右侧图层面板功能进行剖析&#xff0c;完成对应的功能的开发: 每个图层都对应编辑器上面的元素&#xff0c;有多少个元素就对应多少个图层&#xff0c;主要的功能如下&#xff1a; 锁定功能&#xff1a;点击锁定&#xff0c;在编辑器中没法编辑对应的组…

CNN:Convolutional Neural Network(上)

目录 1 为什么使用 CNN 处理图像 2 CNN 的整体结构 2.1 Convolution 2.2 Colorful image 3 Convolution v.s. Fully Connected 4 Max Pooling 5 Flatten 6 CNN in Keras 原视频&#xff1a;李宏毅 2020&#xff1a;Convolutional Neural Network 1 为什么使用…

基于LabVIEW的压力传感器测试系统

摘要 现在各类压力传感器已广泛应用于各种工业自控环境&#xff0c;对压力传感器的研究 及应用&#xff0c;既可以体现一个国家的科技发展水平&#xff0c;又可以提升国家的综合国力&#xff0c;还 可以在丰富、方便和智能化人们的生活方面做出重要的贡献。而针对不同仪器组 成…

Docker篇之修改docker默认磁盘占用目录

一、前言 通常情况下&#xff0c;当我们默认安装docker服务时&#xff0c;在不指定默认存储路径时&#xff0c;docker会自动创建目录&#xff0c;经常会出现打满根目录的情况。 默认存储路径为&#xff1a;/var/lib/docker 下 可通过如下进行查询&#xff1a; docker info输出…

【目标检测】YOLOv5算法实现(九):模型预测

本系列文章记录本人硕士阶段YOLO系列目标检测算法自学及其代码实现的过程。其中算法具体实现借鉴于ultralytics YOLO源码Github&#xff0c;删减了源码中部分内容&#xff0c;满足个人科研需求。   本系列文章主要以YOLOv5为例完成算法的实现&#xff0c;后续修改、增加相关模…

安全牧场,保障优质奶源 追溯羊奶品质

安全牧场&#xff0c;保障优质奶源 追溯羊奶品质 近年来&#xff0c;人们对食品安全和健康越来越关注&#xff0c;而安全牧场的兴起正能够满足人们对优质奶源的需求。安全牧场以严格的品质监控和科学的管理&#xff0c;为消费者提供可追溯的高品质羊奶产品。本文小编羊大师将为…

蓝桥杯备赛 day 2 —— 二分算法(C/C++,零基础,配图)

目录 &#x1f308;前言&#xff1a; &#x1f4c1; 二分的概念 &#x1f4c1; 整数二分 &#x1f4c1; 二分的模板 &#x1f4c1; 习题 &#x1f4c1; 总结 &#x1f308;前言&#xff1a; 这篇文章主要是准备蓝桥杯竞赛同学所写&#xff0c;为你更好准备蓝桥杯比赛涉及…

Jmeter 测试脚本录制器-HTTP 代理服务器

Jmeter 测试脚本录制器-HTTP 代理服务器 Jmeter 配置代理服务器代理服务器获取请求地址示例图配置步骤 浏览器配置代理Google 浏览器插件配置代理windows 本地网络配置代理 启动录制&#xff0c;生成证书生成证书导入证书Jmeter 配置证书 浏览器点击页面&#xff0c;录制请求地…

【Dynamo学习笔记】Dynamo for Revit建模基础

目录 前言1 Revit模型的结构2 图元的操作2.1 图元的选择2.2 图元参数的读取和写入2.3 图元的创建2.3.2 创建轴网2.3.2 创建结构柱2.3.3 创建结构框架2.3.4 创建墙体 3 自定义节点 参考资料&#xff1a; &#xff08;1&#xff09; 罗嘉祥&#xff0c;宋姗&#xff0c;田宏钧. 《…

港科夜闻|香港科大团队研发多功能,可重构和抗破坏单线感测器阵列

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大团队研发多功能、可重构和抗破坏单线感测器阵列。研究人员开发出一种受人类听觉系统启发的感测器阵列设计技术。透过模仿人耳根据音位分布来区分声音的能力&#xff0c;这种新型感测器阵列方法可能优化感测器阵列…

水质净化厂物联网远程监控系统解决方案

水质净化厂物联网远程监控系统解决方案 随着科技的不断发展&#xff0c;物联网技术逐渐走进我们的生活。在水质净化厂中&#xff0c;物联网技术可以应用于远程监控系统&#xff0c;实现对水质净化过程的实时监测和数据分析&#xff0c;从而提高净化效率和管理水平。 一、需求分…