【微信小程序】基本语法

目录

一、列表渲染(包括wx:for改变默认)

二、事件冒泡和事件捕获

三、生命周期

 

一、列表渲染(包括wx:for改变默认)

1、列表渲染(wx-for、block 改变默认wx:for item等)


<view> {{msg}} </view>    //渲染跟普通vue渲染一样  <view wx:for="{{list}}" wx:key="index">     //for 循环  
{{item.name}} --- {{index}}
</view>                      //双层for循环需要改变item默认值   
<view wx:for="{{list}}" wx:for-item="it"  wx:for-index="idx" wx:key="idx">
{{it.name}} --- {{idx}}
</view><block wx-if={{flag}}>                        // block 不会显示到页面类似 <template><view wx:if="{{it.age>15}}">{{it.age}}</view>    //   wx-if <view wx:else>{{item.age}}</view>
</block>

二、事件冒泡和事件捕获

事件冒泡

  • 当一个子组件上的事件被触发时,该事件会向父节点传递,直到根节点。开发者可以在父节点上捕获到这个事件,并进行相应的处理。这种方式适合于处理从子组件冒泡上来的事件,通常使用catch绑定事件。

事件捕获

  • 与事件冒泡相反,事件捕获是从父节点向子节点传递事件。当一个父节点上的事件被触发时,会先经过捕获阶段,然后再到达目标节点。这种方式适合于在事件到达目标节点之前对事件进行处理,通常使用capture绑定事件。

 

 事件冒泡

<view class="param" catchtap="paramClick"><view class="child" catchtap="childClick"></view>
</view>

事件捕获

<view class="param" capture-bind:tap="paramClick"><view class="child" capture-bind:tap="childClick"></view>
</view>

阻止捕获(点击子还是触发父辈点击了)

<view class="param" capture-catch:tap="paramClick"><view class="child" capture-bind:tap="childClick"></view>
</view>

 

三、生命周期

     每个页面和组件都有自己的生命周期函数,这些生命周期函数可以让开发者在特定的时机添加自己的逻辑代码。以下是小程序中常见的页面生命周期函数

  1. onLoad:页面加载时触发,一般用于页面初始化数据。

  2. onShow:页面显示时触发,包括从其他页面返回当前页面、小程序启动等情况。

  3. onReady:页面初次渲染完成时触发,可以进行页面渲染相关的操作。

  4. onHide:页面隐藏时触发,一般用于页面跳转到其他页面时执行清理工作。

  5. onUnload:页面卸载时触发,一般用于清理页面数据和监听事件。


Page({onLoad(options) {},//生命周期函数--监听页面加载onReady() {},  //生命周期函数--监听页面初次渲染完成onShow() {},  //生命周期函数--监听页面显示onHide() {},   //生命周期函数--监听页面隐藏onUnload() {},   //生命周期函数--监听页面卸载onPullDownRefresh() {}, //页面相关事件处理函数--监听用户下拉动作onReachBottom() {}, //页面上拉触底事件的处理函数onShareAppMessage() {}   //用户点击右上角分享
})

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

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

相关文章

jupyter notebook 调整深色背景与单元格宽度与自动换行

# 安装jupyter主题 pip install jupyterthemes # 列举主题 jt -l # 设置主题 jt -t chesterish设置宽度 打开users 当前用户目录下的custom.css文件 写入.container { width:80% !important; } 即可 设置自动换行 查找创建这个目录以及文件notebook.json 写入配置 “li…

DualSPHysics使用FlowTool工具进行后处理,定义的粒子全在domains外,解决办法

可以知道DualSPHysics官方给了后处理工具使用的示例&#xff0c;如下就是官方给的案例&#xff0c;使用FlowTool工具可以计算出在两个实体domain内的粒子数。 然而我自己也定义了2个domains&#xff0c;但是计算出来Tank1和Tank2里边的粒子数一直是空的&#xff0c;粒子全部在…

保姆级讲解字符串函数(上篇)

目录 字符分类函数 导图 函数介绍 1.getchar 2. isupper 和 islower 字符转换函数&#xff1a;&#xff08;toupper , tolower&#xff09; 与 putchar 字符串函数 导图 string函数的使用和模拟实现 string的使用 求字符串长度 字符串的比较 string函数的模拟实现…

王道机试C++第 4 章 字符串:字符串内容续写几个小程序 Day30

统计字符 习题描述 统计一个给定字符串中指定的字符出现的次数。 输入描述&#xff1a; 测试输入包含若干测试用例&#xff0c;每个测试用例包含2行&#xff0c;第1行为一个长度不超过5的字符串&#xff0c;第2行为一个长度不超过80的字符串。注意这里的字符串包含空格&…

Sora的盈利新视角:从共创经济到产业赋能

随着科技的进步&#xff0c;人工智能和机器学习技术正逐渐成为推动经济增长的新动力。在这样的背景下&#xff0c;Sora作为一款先进的AI视频生成工具&#xff0c;其盈利路径和产业影响也呈现出新的特点。本文将从共创经济和产业赋能的角度&#xff0c;探讨Sora的盈利新路径以及…

kamailio转发电话到目的地,目的返回失败时再转给其他IP

按图中这样测试&#xff1a; A---->kamailio------->B B返回480等失败错误码&#xff08;非200 OK&#xff09;&#xff0c;能进入failure_route[TOVOICEMAIL]&#xff0c;但是t_relay_to_udp执行失败。 好吧&#xff0c;说是&#xff1a;在 failure_route 中处理的是…

苍穹外卖-day01

苍穹外卖-day01 目录 苍穹外卖-day01课程内容1. 软件开发整体介绍1.1 软件开发流程1.2 角色分工1.3 软件环境 2. 苍穹外卖项目介绍2.1 项目介绍2.2 产品原型2.3 技术选型 3. 开发环境搭建3.1 前端环境搭建3.2 后端环境搭建3.2.1 熟悉项目结构3.2.2 Git版本控制3.2.3 数据库环境…

【考研数学】129高分学姐二战经验+资料分享

21年数学三87分 22年数学三129分 可以说这两年该踩的雷我都踩了、该做的题我都做了。 进来看看是什么使我突然醒悟让我数学提分40多分的叭。 李林的880题我也做过&#xff0c;先来说说这本书的优缺点以及适用人群吧。 习题优点 李林老师的880题难度适中&#xff0c;很贴近…

【视频转码】基于ZLMediakit的视频转码技术概述

一、概述 zlmediakit pro版本支持基于ffmpeg的转码能力&#xff0c;在开源版本强大功能的基础上&#xff0c;新增支持如下能力&#xff1a; 1、音视频间任意转码(包括h265/h264/opus/g711/aac等)。2、基于配置文件的转码&#xff0c;支持设置比特率&#xff0c;codec类型等参…

LeetCode-Hot100

哈希 1.两数之和&#xff1a; 给定一个整数数组nums和一个整数目标值target&#xff0c;请你再该数组中找出和为目标值target的那两个整数&#xff0c;并返回它们的数组下标。 思路&#xff1a;暴力解法是使用两层循环来遍历每一个数&#xff0c;然后找出两数之和等于target的…

Unity的PICO项目基础环境搭建笔记(调试与构建应用篇)

文章目录 前言一、为设备开启开发者模式1、开启PICO VR一体机。前往设置>通用>关于本机>软件版本号2、一直点击 软件版本号 &#xff0c;直到出现 开发者 选项3、进入 开发者模式&#xff0c;打开 USB调试&#xff0c;选择 文件传输 二、实时预览应用场景1、下载PC端的…

2024年新手视频剪辑软件推荐-6款视频剪辑软件测评

视频剪辑软件推荐 premiere premiere 直达地址:各大软件网站 说到底,还是得专业的来,虽然很多人觉得他是收费的,但是你懂的,想要免费总是会有办法的.别的不说,剪辑这块,我还是很认可这个软件,虽然我现在还是刚入门. 剪映 剪映 抖音官方推出的一款手机视频编辑剪辑应用,提供切割…

go切片实现原理

近日一直在学习golang,已经产出如下博客一篇 GO闭包实现原理(汇编级讲解) 引言 最近在使用go语言的切片时,出现了一些意料之外的情况,遂查询相关文档学习后写下此篇博客 正文 首先,我们思考,go在通过函数传递一个切片时,是通过引用传递的吗,还是通过值传递的呢(答案将会很…

Transformer之多角度解读

Transformer 文章目录 Transformer  &#x1f449;引言&#x1f48e; 一、 自注意力机制 &#xff1a; 主要用于 长距离依赖捕捉和转换序列二、 Encoder&#xff1a;2.1 多头注意力机制&#xff1a;2.2 残差连接&#xff1a; 三、 Decoder&#xff1a;3.1 Decoder 多头注意力…

hive sql无法停止

排查流程 hive任务停止是调用org.apache.hive.jdbc.HiveStatement的close()方法实现的 其底层是委托给org.apache.hive.service.cli.thrift.TCLIService.Iface客户端实例来实现。 同时&#xff0c;通过JDK动态代理为其织入了synchronized同步机制&#xff1a;其底层是委托给…

申请公众号上限是多少

一般可以申请多少个公众号&#xff1f;公众号申请限额在过去几年内的经历了很多变化。对公众号申请限额进行调整是出于多种原因&#xff0c;确保公众号内容的质量和合规性。企业公众号的申请数量从50个到5个最后到2个&#xff0c;对于新媒体公司来说&#xff0c;这导致做不了公…

【XMU学科实践二】豆瓣爬虫实践

文章目录 分析豆瓣阅读网站具体步骤构造headersBeautiful soup中的定位函数find() 、find_all() 完整爬虫代码 叠甲&#xff1a;仅供学习。。 XMU的小朋友实在不会了可以参考我的思路&#xff0c;但还是建议自己敲一遍哈。 学科实践二还是挺有意思的&#xff01; 分析豆瓣阅读网…

什么是jwt

jwt是JSON Web Token&#xff0c;由3部分构成&#xff1a; 头部Header&#xff1a;头部包含了两部分&#xff0c;token 类型和采用的加密算法&#xff08;可为none&#xff0c;后端应限制加密算法&#xff0c;不以这里为准&#xff09;。 载荷Payload&#xff1a;这部分才是重要…

Compose UI 之 Small TopAppBar

Small 类型 TopAppBar AppBar 主要由2类&#xff0c;顶部 AppBar 和底部 AppBar。 顶部 AppBar&#xff1a;主要包含了标题&#xff0c;action菜单&#xff0c;导航菜单。底部 AppBar&#xff1a;典型地包含主要导航项。 顶部 AppBar 顶部 AppBar 包含了 4 中类型&#xff…

webhook详解

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 webhook简介 在当今高度连接的网络世界中,没有什么可以孤立地发挥最佳作用。完成一项任务(几乎)总是需要多个实体的参与。电子商务应用程序需要与支付系统通信,支付…