【微信小程序】基本语法

news2024/12/23 13:30:57

目录

一、列表渲染(包括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.coloradmin.cn/o/1500058.html

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

相关文章

云计算项目十:ES集群安装|部署kibana

ES集群安装 部署ES集群&#xff0c;用于ELK日志分析平台的构建 es-0001 主机更改 /etc/hosts [rootes-0001 ~]# vim /etc/hosts 192.168.1.71 es-0001 192.168.1.72 es-0002 192.168.1.73 es-0003 192.168.1.74 kibana 192.168.1.75 logstash # 将最新的/etc/hosts配置文件更…

Python绘图-12地理数据可视化

Matplotlib 自 带 4 类别 地理投影&#xff1a; Aitoff, Hammer, Mollweide 及 Lambert 投影&#xff0c;可以 结 合以下四 张 不同 的 图 了解四 种 不同投影 区别 。 12.1Aitoff投影 12.1.1图像呈现 12.1.2绘图代码 import numpy as np # 导入numpy库&#xff0c;用于…

2024年大语言模型的微调

一个LLM的生命周期包含多个步骤&#xff0c;下面将讨论这个周期中最活跃、最密集的部分之一 -- fine-tuning(微调)过程。 LLM的生命周期 下面展示了LLM的生命周期&#xff1a; 愿景和范围&#xff1a;首先需要定义项目的愿景&#xff0c;你想让你的LLM作为一个更加通用的工具…

双体系Java学习之关键字,标识符以及命名规范

刚开学&#xff0c;然后之前的课程暂时停在了多态&#xff0c;接下来开始跟着学校的步伐重新开始学一下&#xff0c;谢谢&#xff01;&#xff01;&#xff01; 之前的课程也会找个时间补起来的&#xff0c;谢谢大家&#xff01; 关键字 标识符 命名规范

STM 32 HAL库 内部FLash读写调试的问题

问题1&#xff1a;STM32G0 系列 256KB内部FLash大小&#xff0c;无法读写 分析&#xff1a;从STM32F103C8 移植过来的Flash操作代码&#xff0c;发现无法进行读写&#xff0c;返回 HAL_ERROR 错误&#xff0c;随后&#xff0c;检查在写之前是否擦除成功&#xff0c;检查代码发…

Oracle VM VirtualBox 安装完Ubuntu系统后一直提示安装Ubuntu

是因为存储设置有问题&#xff0c;把Ubuntu镜像添加进去了,移除后重启虚拟机就不会提示了 以下是配置的移除后的界面。

羊大师揭秘,女性喝羊奶有什么好处

羊大师揭秘&#xff0c;女性喝羊奶有什么好处 女性喝羊奶有多种好处。首先&#xff0c;羊奶富含钙元素&#xff0c;有助于预防女性体内缺钙和老年女性骨质疏松&#xff0c;从而增强骨骼密度。其次&#xff0c;羊奶中的色氨酸和烟酸等成分有助于促进睡眠&#xff0c;改善睡眠质…

NLP_文本张量表示方法_2(代码示例)

目标 了解什么是文本张量表示及其作用.文本张量表示的几种方法及其实现. 1 文本张量表示 将一段文本使用张量进行表示&#xff0c;其中一般将词汇为表示成向量&#xff0c;称作词向量&#xff0c;再由各个词向量按顺序组成矩阵形成文本表示. ["人生", "该&q…

探索安全与灵活性的边界,波卡账户抽象与多签管理的创新之路

相信大家在刚刚进入 web3 的时候都或多或少面临着一个普遍而棘手的问题&#xff0c;私钥的安全管理。私钥一旦丢失或被盗&#xff0c;用户将永久失去对他们加密资产的访问权。此外&#xff0c;随着区块链应用场景的多样化&#xff0c;这种单一模式已经无法满足复杂的交易结构和…

鸿蒙App基础

像素单位 .1、基础单位 为开发者提供4种像素单位&#xff0c;框架采用vp为基准数据单位。 PS&#xff1a;个人建议使用lpx&#xff0c;配置好配置文件&#xff0c;这里就可以按照UI设计稿实际的来&#xff0c;可以更好的实现设计效果 名称描述px屏幕物理像素单位vp屏幕密度相…

Unity 给刚体一个力或速度

创建平面和小球&#xff0c;给力或给速度让其弹起 给小球挂载刚体&#xff08;Rigibdody&#xff09;和脚本 &#xff08;力是累计或者衰减的&#xff0c;直接给速度就是赋值&#xff0c;但如果速度就和力类似了&#xff09; using System.Collections; using System.Collect…

防御保护IPSEC实验

要求&#xff1a;在FW5和FW3之间建立一条IPSEC通道&#xff0c;保证10.0.2.0/24网段可以正常访问到192.168.1.0/24. 因为是双机热备状态则只需要配置FW1主设备。 新建ACL待加密数据流 安全建议&#xff1a; IPSec参数配置 FW3配置如下与FW1类似&#xff1a; FW1中新建安全策略…

根据xlsx文件第一列的网址爬虫

seleniumXpath 在与该ipynb文件同文件下新增一个111.xlsx&#xff0c;第一列放一堆需要爬虫的同样式网页 然后使用seleniumXpath爬虫 from selenium import webdriver from selenium.webdriver.common.by import By import openpyxl import timedef crawl_data(driver, url)…

如何选择VR全景设备,才能拍摄高质量的VR全景?

随着VR全景技术的不断成熟和发展&#xff0c;VR全景已经成为了摄影爱好者乐于尝试的新手段&#xff0c;VR全景也为广大用户提供了一个全新的视角来探索世界&#xff0c;如果想要拍摄出高质量的VR全景&#xff0c;选择合适的VR全景拍摄设备以及掌握正确的拍摄技巧才是关键。 VR全…

SpringMVC的工作流程简介

SpringMVC控制器工作流程 用户通过浏览器向服务器发送请求&#xff0c;请求会被Spring MVC的前端控制器DispatcherServlet所拦截; DispatcherServlet拦截到请求后&#xff0c;会调用HandlerMapping处理器映射器; 处理器映射器根据请求URL找到具体的处理器&#xff0c;生成处理…

备忘 clang diagnostic 类的应用示例 ubuntu 22.04

系统的ncurses环境有些问题 通过源码安装了ncurses6.3后&#xff0c;才可以在 llvmort-18.1.rc4中编译通过示例&#xff1a; 1&#xff0c;折腾环境 ncurses-6.3$ ./configure ncurses-6.3$ make -j ncurses-6.3$ sudo make install sudo apt install libtinfo5 sudo…

企业计算机服务器中了halo勒索病毒如何解密,halo勒索病毒数据恢复流程

随着网络技术的不断发展&#xff0c;企业的生产运营效率得到了极大提升&#xff0c;越来越多的企业开始利用网络开展各项工作业务&#xff0c;企业的网络数据安全问题&#xff0c;成为大家关心的主要话题。近期&#xff0c;云天数据恢复中心接到多家企业的求助&#xff0c;企业…

Mybatis从入门到CRUD到分页到日志到Lombok到动态SQL再到缓存

Mybatis 入门 1.导入maven依赖 <dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>x.x.x</version> </dependency>2.配置核心文件 <?xml version"1.0" encoding"U…

Flask python开发篇: 写一个简单的接口

第一步&#xff1a;新建flask项目 参考使用pycharm新建一个项目 打开pycharm&#xff0c;根据下面图中箭头顺序&#xff0c;新建一个flask的项目&#xff1b; 第二步&#xff1a;运行项目&#xff0c; 安装成功以后&#xff0c;会有个app.py文件&#xff0c;打开以后&#…

【博士每天一篇文献-实验】Is a Modular Architecture Enough?

阅读时间&#xff1a;2023-11-26 1 介绍 年份&#xff1a;2022 作者&#xff1a;Sarthak Mittal&#xff0c;Yoshua Bengio&#xff0c;蒙特利尔大学 期刊&#xff1a; Advances in Neural Information Processing Systems 引用量&#xff1a;22 这篇论文探讨了模块化架构在机…