微信小程序的页面交互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 -->

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

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

相关文章

k8s入门到实战(十三)—— 认证与鉴权

认证与鉴权 官网&#xff1a;https://kubernetes.io/zh-cn/docs/reference/access-authn-authz/ 访问控制 客户端进行认证和鉴权操作 在 k8s 集群中&#xff0c;客户端通常有两类&#xff1a; User Account&#xff1a;一般是独立于 k8s 之外的其他服务管理的用户账号 Ser…

ComfyUI SDWebUI升级pytorch随记

目前使用的版本是去年10月的1.6版本&#xff0c;有点老。希望支持新的特性&#xff0c;于是乎开始作死。从升级torch开始。先看看已有的版本&#xff1a; (venv) rootubuntu-sd-server:~# pip show torch Name: torch Version: 2.0.1 Summary: Tensors and Dynamic neural net…

设计模式——观察者模式Observer

Q&#xff1a;观察者模式属于哪一类设计模式 A&#xff1a;观察者模式属于行为学模式 Q&#xff1a;什么是观察者模式 A&#xff1a;当一个对象的状态发生改变时&#xff0c;所有依赖它的对象都得到通知&#xff0c;并自动更新 观察者模式解析&#xff1a;报纸类维护了一个…

Calico配置路由反射器 (RR) 模式

RR介绍 在 Calico 网络中&#xff0c;默认使用 Node-to-Node Mesh 全互联模式&#xff0c;即集群中的每个节点之间都会相互建立 BGP 连接&#xff0c;用于路由交换。然而&#xff0c;随着集群规模的扩大&#xff0c;全互联模式会导致连接数成倍增加&#xff0c;产生性能问题。为…

【正点原子FreeRTOS学习笔记】————(12)信号量

这里写目录标题 一、信号量的简介&#xff08;了解&#xff09;二、二值信号量&#xff08;熟悉&#xff09;三、二值信号量实验&#xff08;掌握&#xff09;四、计数型信号量&#xff08;熟悉&#xff09;五、计数型信号量实验&#xff08;掌握&#xff09;六、优先级翻转简介…

23种设计模式之创建型模式 - 单例模式

文章目录 一、单例模式1.1单例模式定义1.2 单例模式的特点 二、实现单例模式的方式2.1 饿汉式2.2 懒汉式2.3 双重检查锁&#xff1a;2.4 静态内部类2.5 枚举实现&#xff08;防止反射攻击&#xff09;&#xff1a; 一、单例模式 1.1单例模式定义 单例模式确保系统中某个类只有…

表格中的状态类型值(tag)

一&#xff1a;数字转换为简单的中文值 ** 不用转换直接用find()方法&#xff1a;在statusList里找&#xff1b; **lastHandleCode是对应的获取到的每行数据的code值&#xff1b; vue: <el-table-column label"执行状态" align"center"><templat…

Collection与数据结构 链表与LinkedList (一):链表概述与单向无头非循环链表实现

1.ArrayList的缺点 上篇文章我们已经对顺序表进行了实现,并且对ArrayList进行了使用,我们知道ArrayList底层是使用数组实现的. 由于其底层是一段连续空间&#xff0c;当在ArrayList任意位置插入或者删除元素时&#xff0c;就需要将后序元素整体往前或者往后搬移&#xff0c;时…

SpringMvc之映射器HandlerMapping

简介 在springmvc的处理流程中&#xff0c;第一步就是查询请求对应的映射器&#xff0c;然后组装成处理器链处理请求&#xff0c;本文意在梳理该过程 重要实现 HandlerMapping是一个接口&#xff0c;该接口用于通过HttpServletRequest寻找对应的处理器&#xff0c;接口介绍如下…

windows系统安装RabbitMQ

RabbitMQ是实现了高级消息队列协议&#xff08;AMQP&#xff09;的开源消息代理软件&#xff08;亦称面向消息的中间件&#xff09;。RabbitMQ服务器是用Erlang语言编写的&#xff0c;而集群和故障转移是构建在开放电信平台框架上的。所有主要的编程语言均有与代理接口通讯的客…

PL/SQL概述

oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 PL/SQL概述 PL/SQL(Procedural Language extension to SQL)是 Oracle 对标准 SQL语言的扩充&#xff0c;是专门用于各种环境下对 Oracle 数据库进行访问和开发的语言。 由…

【有限状态机】- FSM详细讲解 【附Autoware有限状态机模型代码讲解】

参考博客&#xff1a; &#xff08;1&#xff09;FSM&#xff08;有限状态机&#xff09; &#xff08;2&#xff09;关于有限状态机(FSM)的一些思考 &#xff08;3&#xff09;状态设计模式 1 状态机简介 有限状态机FSM&#xff1a;有限个状态以及在这些状态之间的转移和动作…