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

文章目录

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

⾃定义组件

类似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.mzph.cn/news/630739.shtml

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

相关文章

CSS||选择器

目录 作用 分类 基础选择器 标签选择器 ​编辑类选择器 id选择器 通配符选择器 作用 选择器&#xff08;选择符&#xff09;就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说&#xff0c;就是选择标签用的。 选择器的使用一共分为两步&#xff1a; 1.…

java-包详解

1、包介绍 为了更好的组织类&#xff0c;用于区别类名的命名空间&#xff0c;其实就是基于工程的一个文件路径&#xff0c;如&#xff1a; 2、作用 三个作用&#xff1a; 1&#xff09;区分相同名称的类。 2&#xff09;能够较好地管理大量的类。 3&#xff09;控制访问范围…

PAT甲级刷题日记

1001 AB Format PTA | 程序设计类实验辅助教学平台 #include <iostream> #include <iomanip>int main() {int a, b, sum;int three_digits[5];//sum从右到左每3位为一个数组元素std::cin >> a >> b;sum a b;if(sum 0)//防止输出three_digits[-1]{…

云边协同的 RTC 如何助力即构全球实时互动业务实践

作者&#xff1a;即构科技 由 51 CTO 主办的“WOT 全球技术创新大会 2023深圳站”于 11 月 24 日 - 25 日召开&#xff0c;即构科技后台技术总监肖潇以“边缘容器在全球音视频场景的探索与实践”为主题进行分享。 边缘计算作为中心云计算的补充&#xff0c;通过边缘容器架构和…

2、机器学习基础数据探索

加载并理解您的数据。 本课程所需数据集夸克网盘下载链接:https://pan.quark.cn/s/9b4e9a1246b2 提取码:uDzP 文章目录 1、使用Pandas了解你的数据2、解释数据描述1、使用Pandas了解你的数据 任何机器学习项目的第一步都是熟悉数据。您将使用Pandas库进行此操作。Pandas是数…

jmeter解决返回unicode编辑

一般乱码有两种方法来解决&#xff1a; 1、修改配置文件jmeter.properties中默认编码格式ISO-8859-1&#xff08;不支持中文),修改为utf-8 sampleresult.default.encoding utf-82、添加BeanShell PostProcessor加入 prev.setDataEncoding("utf-8")3、还有一种返回…

springboot(ssm母婴全程服务管理系统 母婴用品服务商城Java系统

springboot(ssm母婴全程服务管理系统 母婴用品服务商城Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xf…

iOS base64 转 data |图片Base64转NSData | UIImageView | UIImage

Api 接口返回 base64 图片字符串&#xff0c;需要显示在UIImageView 上。 假设 string类型的 base64ImageStr 为 api返回的 base64字符串 将base64字符串进行处理 //去除掉首尾的空白字符和换行字符NSString * img64 [img stringByTrimmingCharactersInSet:[NSCharacterSet …

RTMP对接腾讯云问题记录

RTMP对接腾讯云问题分析报告 问题现象及原因分析 1. 连不上腾讯云RTMP服务器 连不上腾讯云RTMP服务器&#xff0c;抓包显示服务器在握手完成后&#xff0c;主动断开了当前TCP链接。问题原因可能是connect中的tcUrl不能把域名转为IP&#xff0c;导致在握手不久服务器主动断开…

【创作活动】ChatGPT 和文心一言哪个更好用?

文章目录 文心一言优点缺点 ChatGPT优点缺点 Java编码能力比较对人工智能的看法 ChatGPT是由OpenAI开发的交互式AI大模型&#xff0c; 文心一言是由百度研发的知识增强大语言模型&#xff0c;本文从Java开发的角度对比一下哪个更好用&#xff08;本文仅用于投稿CSDN创造活动&am…

ERP进出库+办公用品管理系统

系统架构 简介系统架构部分页面结构图UML逻辑图办公用品入出库 简介 本系统适用于ERP企业公司职员关于系统化的申请相关办公用品&#xff0c;提高整体系统整合行&#xff0c;加大上下级之间的联系&#xff0c;规避因人员过多&#xff0c;而浪费人力在简单重复的工作中&#xf…

PTA 6-11 先序输出叶结点

本题要求按照先序遍历的顺序输出给定二叉树的叶结点。 函数接口定义&#xff1a; void PreorderPrintLeaves( BinTree BT ); 其中BinTree结构定义如下&#xff1a; typedef struct TNode *Position; typedef Position BinTree; struct TNode{ElementType Data;BinTree Left…

x264中的avg_w8函数汇编实现

函数参数说明&#xff1a; dst 结果存储地址&#xff0c; i_dst 存储结果的linesize src1 计算源数据地址1&#xff0c;i_src1 计算源数据linesize src2 计算源数据地址2, i_src2 计算源数据linesize 一 对应的c语言实现 static inline void pixel_avg2_w8_altivec( uint8…

uni-app中代理的两种配置方式

方式一: 在项目的 manifest.json 文件中点击 源码视图 在最底部的vue版本下编写代理代码 方式二: 在项目中创建 vue.config.js 文件然后进行配置 在页面中发起请求 完整的url&#xff1a;http://c.m.163.com/recommend/getChanListNews?channelT1457068979049&size10 …

Django的mysql数据库问题:同一个模型(同一张表)中的不同记录也是可以相互关联的【使用“自引用关系”】

01-在Django的mysql数据库中&#xff0c;同一模型中的不同记录是不是也是可以相互关联&#xff1f; 是的&#xff0c;确实可以在Django的模型中使用外键来建立同一模型中不同记录之间的关联关系。这样的关联关系被称为自引用关系&#xff08;self-referential relationship&am…

【Leetcode】269.火星词典(Hard)

一、题目 1、题目描述 现有一种使用英语字母的火星语言,这门语言的字母顺序与英语顺序不同。 给你一个字符串列表 words ,作为这门语言的词典,words 中的字符串已经 按这门新语言的字母顺序进行了排序 。 请你根据该词典还原出此语言中已知的字母顺序,并 按字母递增顺序…

Spark SQL函数定义

目录 窗口函数 SQL函数分类 Spark原生自定义UDF函数 Pandas的UDF函数 Apache Arrow框架基本介绍 基于Arrow完成Pandas DataFrame和Spark DataFrame互转 基于Pandas完成UDF函数 自定义UDF函数 自定义UDAF函数 窗口函数 分析函数 over(partition by xxx order by xxx [as…

嵌入式开发--STM32G4系列片上FLASH的读写

这个玩意吧&#xff0c;说起来很简单&#xff0c;就是几行代码的事&#xff0c;但楞是折腾了我大半天时间才搞定。原因后面说&#xff0c;先看代码吧&#xff1a; 读操作 读操作很简单&#xff0c;以32位方式读取的时候是这样的&#xff1a; data *(__IO uint32_t *)(0x080…

Python GUI库大汇总

所有程序都是基于命令行的&#xff0c;这些程序可能只有一些“专业”的计算机人士才会使用。例如前面编写的五子棋等程序&#xff0c;恐怕只有程序员自己才愿意玩这么“糟糕”的游戏&#xff0c;很少有最终用户愿意对着黑乎乎的命令行界面敲命令。 相反&#xff0c;如果为程序…

如何禁用WordPress站点的管理员电子邮件验证或修改检查频率?

今天boke112百科登录某个WordPress站点时&#xff0c;又出现“管理员邮件确认”的提示&#xff0c;要求确认此站点的管理员电子邮箱地址是否仍然正确。具体如下图所示&#xff1a; 如果点击“稍后提醒我”&#xff0c;那么管理员邮件验证页面就会在3天后重新显示。 说实话&…