当前位置: 首页 > news >正文

微信小程序的页面交互1

一、page()函数

每个页面的s代码全部写入对应的js文件的page()函数里面。点击编译,就可以显示js代码的运行效果。注意,每个页面的page()函数是唯一的。

page()函数格式如下:

page({
data{
//data里面写入页面初始数据
eg:msg:‘hello’;
}, //data的值是一个对象
//页面生命周期回调函数:以onload()函数为例【当不需要做特定的事情时它可以不写】
onload:function(){
console.log("onload()函数执行了")
}
//页面事件处理函数:以onPullDownRefresh()为例
onPullDownRefresh:function(){
console.log("onPullDownRefresh()函数执行了")
}
})

二、微信小程序的 页面生命周期

就是:加载-》渲染-》销毁的过程。

(1)每个页面都有生命周期。如果想要在某个特定的时机进行特定的处理可以通过页面生命周期回调函数来完成。

(2)页面生命周期回调函数用于实现在特定的时间点执行特定的操作,随着页面生命周期的变化,页面生命周期回调函数会自动执行。

(3)页面生命周期回调函数:

onLoad()  监听页面加载,且一个页面只会在创建完成后触发一次。就相当于出生
onShow() 监听页面显示,只要页面显示就会触发此函数
onReady()监听页面的初次渲染,一个页面只会调用一次
onHide()   监听页面隐藏,只要页面隐藏就会触发此函数
onUnload()监听页面卸载,只要页面被释放就会触发此函数

三、微信小程序的 页面事件处理函数

(1)上拉、下拉、滚动页面等都是通过页面事件处理函数来完成。它用于监听用户行为

(2)页面事件处理函数:

onPullDownRefresh()    监听用户下拉刷新事件
onReachBottom()          监听页面上拉触底事件
onPageScroll()              监听滚动会连续调用
onShareAppMessage()用户点击页面右上角分享按钮时触发

四、数据绑定

(1)微信小程序的数据绑定实现数据的显示与修改。通过组件绑定事件可以监听用户操作行为,然后在对应的事件处理函数中进行相应的业务处理。
在wxml里映射数据运用Mustache语法 又称双大括号语法  {{ }}

(2)绑定事件前要加上bind/catch

(3)常用绑定事件:
1》点击事件:       

tap   (手指触摸后马上离开)

点击"按钮一"后,控制台显示:


2》长按事件:

longpress     (手指触摸后,超过350ms再离开,如果指定了事件回调函数并且触3发了这个事件,tap事件将不再触发)

3》触摸事件:     

touchstart     (手指触摸动作开始)

touchmove    (手指触摸后移动)

touchcancel  (手指触摸动作被打断。例如来电提醒、弹窗)

touchend      (手指触摸动作结束)

4》其他事件

input             (键盘输入时触发)

submit          (携带form中的数据触发submit事件)

5》事件分类

冒泡事件:点击事件、长按事件、触摸事件  (bind不阻止事件冒泡)
非冒泡事件:其他事件   (catch阻止事件冒泡)

若要为组件绑定事件,可以通过组件添加“bind+事件名称”属性 或 “catch+事件名称”绑定

点击"大家好",因为我们使用了catch阻止了向father冒泡,所以控制台不显示father,只有v1

6》如何获取输入框的值?
    wxml页面上:使用input事件或者change事件
    js上:输入e.detail.value

五、setData()方法

完成数据的设置与更改 (也就是对数据值进行修改与新增)

六、条件渲染

根据不同的判断条件来渲染不同的结果

(1)通过标签wx:if  wx:elif  wx:else控制属性来完成 

(2)hidden属性 控制某一组件的显示与隐藏
<!-- wx:if 条件渲染未显示的部分它的结构代码会彻底消失,但是hidden属性未显示的部分它的结构代码一直存在在wxml里 -->
<!-- 要频繁切换一个控件是否显示还是隐藏——使用hidden -->

相关文章:

微信小程序的页面交互1

一、page&#xff08;&#xff09;函数 每个页面的s代码全部写入对应的js文件的page&#xff08;&#xff09;函数里面。点击编译&#xff0c;就可以显示js代码的运行效果。注意&#xff0c;每个页面的page&#xff08;&#xff09;函数是唯一的。 page&#xff08;&#xff…...

win10 docker zookeeper和kafka搭建

好久没用参与大数据之类的开发了&#xff0c;近日接触到一个项目中使用到kafka&#xff0c;因此要在本地搭建一个简易的kafka服务。时间比较紧急&#xff0c;之前有使用docker的经验&#xff0c;因此本次就使用docker来完成搭建。在搭建过程中出现的一些问题&#xff0c;及时记…...

【Redis】快速入门 数据类型 常用指令 在Java中操作Redis

文章目录 一、简介二、特点三、下载与安装四、使用4.1 服务器启动4.2 客户端连接命令4.3 修改Redis配置文件4.4 客户端图形化界面 五、数据类型5.1 五种常用数据类型介绍5.2 各种数据类型特点 六、常用命令6.1 字符串操作命令6.2 哈希操作命令6.3 列表操作命令6.4 集合操作命令…...

【tingsboard开源平台】下载数据库,IDEA编译,项目登录

一&#xff0c; PostgreSQL 下载 需要看官网的&#xff1a;点此下载直达地址&#xff1a;点此进行相关学习&#xff1a;PostgreSQL 菜鸟教程 二&#xff0c;PostgreSQL 安装 点击安装包进行安装 出现乱码错误&#xff1a; There has been an error. Error running C:\Wind…...

Web3:探索区块链与物联网的融合

引言 随着科技的不断发展&#xff0c;区块链技术和物联网技术都成为了近年来备受瞩目的前沿技术。而当这两者结合在一起&#xff0c;将产生怎样的化学反应呢&#xff1f;本文将深入探讨Web3时代中区块链与物联网的融合&#xff0c;探索其意义、应用场景以及未来发展趋势。 1. …...

[BT]BUUCTF刷题第9天(3.27)

第9天&#xff08;共2题&#xff09; [护网杯 2018]easy_tornado 打开网站就是三个txt文件 /flag.txt flag in /fllllllllllllag/welcome.txt render/hints.txt md5(cookie_secretmd5(filename))当点进flag.txt时&#xff0c;url变为 http://b9e52e06-e591-46ad-953e-7e8c5f…...

html页面使用@for(){},@if(){},利用jquery 获取当前class在列表中的下标

基于以前的项目进行修改优化&#xff0c;前端代码根据List元素在html里进行遍历显示 原先的代码&#xff1a; 其中&#xff0c;noticeGuide.Id是标识noticeGuide的唯一值&#xff0c;但是不是从0开始的【是数据库自增字段】 但是在页面初始化加载的时候&#xff0c;我们只想…...

pulsar: 批量接收消息

接收消息时&#xff0c;和kafka类似&#xff0c;如果topic有多个分区&#xff0c;则只能保证分区内数据的接收有序&#xff0c;不能保证全局有序。 一、发送消息 package cn.edu.tju.test1;import org.apache.pulsar.client.api.*;public class BatchProducer01 {private sta…...

LNMP架构之mysql数据库实战

mysql安装 到官网www.mysql.com下载源码版本 实验室使用5.7.40版本 tar xf mysql-boost-5.7.40.tar.gz #解压 cd mysql-boost-5.7.40/ yum install -y cmake gcc-c bison #安装依赖性 cmake -DCMAKE_INSTALL_PREFIX/usr/local/mysql -DMYSQL_DATADIR/data/mysql -DMYSQL_…...

aws使用记录

数据传输&#xff08;S3) 安装命令行 安装awscli: https://docs.aws.amazon.com/zh_cn/cli/latest/userguide/getting-started-install.html#getting-started-install-instructions 直到 aws configure list 可以运行 身份验证&#xff1a; 运行&#xff1a; aws config…...

区块链食品溯源案例实现(二)

引言 随着前端界面的完成&#xff0c;我们接下来需要编写后端代码来与区块链网络进行交互。后端将负责处理前端发送的请求&#xff0c;调用智能合约的方法获取食品溯源信息&#xff0c;并将结果返回给前端。 通过前后端的整合&#xff0c;我们可以构建一个食品溯源系统&#xf…...

RabbitMQ(简单模式)

2种远程服务调用 1openFeign&#xff1a; 优点&#xff1a;能拿到被调用的微服务返回的数据&#xff0c;系统系耦度高&#xff0c;系统稳定。 缺点&#xff1a;同步调用&#xff0c;如果有很多服务需要被调用&#xff0c;耗时长。 MQ,消息队列&#xff0c;RabbitMQ是消息we…...

ES集群部署的注意事项

文章目录 引言I ES集群部署前期工作II 部署ES2.1 配置安全组2.2 创建ES用户和组2.3 下载安装ES2.4 修改内存相关配置III es集群添加用户安全认证功能3.1 生成 elastic-certificates.p123.2 创建 Elasticsearch 集群密码3.2 设置kibana的 elasticsearch帐号角色和密码3.3 logsta…...

Etcd 基本入门

1&#xff1a;什么是 Etcd ? Etcd 是 CoreOS 团队于2013年6月发起的开源项目&#xff0c;它的目标是构建一个高可用的分布式键值(key-value)数据库。etcd内部采用raft协议作为一致性算法&#xff0c;Etcd基于 Go 语言实现。 名字由来&#xff0c;它源于两个方面&#xff0c;…...

PPT没保存怎么恢复?3个方法(更新版)!

“我刚做完一个PPT&#xff0c;正准备保存的时候电脑没电自动关机了&#xff0c;打开电脑后才发现我的PPT没保存。这可怎么办&#xff1f;还有机会恢复吗&#xff1f;” 在日常办公和学习中&#xff0c;PowerPoint是制作演示文稿的重要工具。我们会在各种场景下使用它。但有时候…...

DBeaver修改sql语句保存位置

1、dbeaver通过工作空间方式来管理Script的sql脚本以及数据库连接。 工作空间&#xff0c;其实也就是一个文件夹 默认保存路径查看&#xff1a; 文件--> 切换工作空间 --> 其他 sql脚本的保存位置默认在工作空间下的 \General\Scripts 文件夹中。 2、 3、点击浏览&#…...

LabVIEW2024中文版软件安装包、工具包、安装教程下载

下载链接&#xff1a;LabVIEW及工具包大全-三易电子工作室http://blog.eeecontrol.com/labview6666 《LabVIEW2024安装图文教程》 1、解压后&#xff0c;双击install.exe安装 2、选中“我接受上述许可协议”&#xff0c;点击下一步 3、点击下一步&#xff0c;安装NI Package …...

对AOP的理解

目录 一、为何需要AOP&#xff1f;1、从实际需求出发2、现有的技术能解决吗&#xff1f;3、AOP可以解决 二、如何实现AOP&#xff1f;1、基本使用2、更推荐的做法2.1 “基本使用”存在的隐患2.2 最佳实践2.2.1 参考Transactional&#xff08;通过AOP实现事务管理&#xff09;2.…...

C 指针数组

C 指针数组是一个数组&#xff0c;其中的每个元素都是指向某种数据类型的指针。 指针数组存储了一组指针&#xff0c;每个指针可以指向不同的数据对象。 指针数组通常用于处理多个数据对象&#xff0c;例如字符串数组或其他复杂数据结构的数组。 让我们来看一个实例&#xf…...

算法系列--动态规划--背包问题(1)--01背包详解

&#x1f495;"趁着年轻,做一些比较cool的事情"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;算法系列–动态规划–背包问题(1)–01背包详解 大家好,今天为大家带来的是算法系列--动态规划--背包问题(1)--01背包详解 一.什么是背包问题 背包问题…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 &#xff0c;不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源&#xff08;最常用&#xff09; conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...