微信小程序的页面交互1

news2024/11/17 14:27:01

一、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.coloradmin.cn/o/1548438.html

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

相关文章

Oracle参数文件详解

1、参数文件的作用 参数文件用于存放实例所需要的初始化参数&#xff0c;因为多数初始化参数都具有默认值&#xff0c;所以参数文件实际存放了非默认的初始化参数。 2、参数文件类型 1&#xff09;服务端参数文件&#xff0c;又称为 spfile 二进制的文件&#xff0c;命名规则…

【CSDN活动】程序员职业生涯的分水岭:年龄还是经验?

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 程序员职业生涯的分水岭&#xff1a;年龄还是经验&#xff1f;引言技术更新换代…

Vue3中使用paper.js

目录 Paper.js的使用安装Paper引入Paper.js创建画布实例化Paper、Project以及Tool画圆画点和线画矩形导入图片画文字Item组曲线监听键盘事件监听鼠标事件设置动画下载成图片完整代码 Paper.js的使用 安装Paper npm install paper引入Paper.js import * as Paper from "p…

arduino 2.0以上版本上传项目data目录内文件到ESP8266闪存中

开发测试环境&#xff1a; arduino IDE : 2.3.2 开发板 ESP8266 系统&#xff1a;WINDOWS 10 截止目前&#xff0c;arduino版本为2.3.2&#xff0c;在开发项目的时候&#xff0c;发现一个问题&#xff0c;就是项目目录中data内的文件没有办法和主文件.ino一同上传到ESP8266的f…

学习笔记:MYSQL数据库基础知识

MYSQL数据库基础知识学习笔记 MYSQL基础学习数据库相关概念现主流数据库排名数据模型SQL分类SQL数据库基础操作 2024/3/27 学习资料&#xff1a;黑马程序员:MYSQL MYSQL基础学习 数据库和数据库管理系统(DBMS) 数据库: 是存储数据的集合&#xff0c;包括表、视图、索引等对象…

面试八股文之JAVA基础

JAVA基础 DNS、CDN&#xff1f;如何实现对象克隆?父子类静态代码块, 非静态代码块, 构造方法执行顺序?String s new String("abc") 创建了几个对象, 分别放到哪里?OSI网络模型七层&#xff1f;应用层协议&#xff1f;http协议和https协议区别&#xff1f;传输层协…

STM32学习笔记(7_1)- ADC模数转换器

无人问津也好&#xff0c;技不如人也罢&#xff0c;都应静下心来&#xff0c;去做该做的事。 最近在学STM32&#xff0c;所以也开贴记录一下主要内容&#xff0c;省的过目即忘。视频教程为江科大&#xff08;改名江协科技&#xff09;&#xff0c;网站jiangxiekeji.com 本期开…

QGIS开发笔记(一):QGIS介绍、软件下载和加载shp地图数据Demo

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/136888334 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…

大学教材《C语言程序设计》(浙大版)课后习题解析 | 第三、四章

概述 本文主要提供《C语言程序设计》(浙大版) 第三、四章的课后习题解析&#xff0c;以方便同学们完成题目后作为参考对照。后续将更新第五、六章节课后习题解析&#xff0c;如想了解更多&#xff0c;请持续关注该专栏。 专栏直达链接&#xff1a;《C语言程序设计》(浙大版)_孟…

【Python】进阶学习:pandas--describe()函数的使用介绍

&#x1f40d;【Python】进阶学习&#xff1a;pandas——describe()函数的使用介绍 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&am…

抖音弹幕游戏开发:打造全新互动体验,引领潮流风尚

在数字科技迅猛发展的时代&#xff0c;抖音作为一款领先的短视频平台&#xff0c;始终走在创新的前沿。为了满足用户日益增长的互动需求&#xff0c;我们投入大量研发力量&#xff0c;成功推出了抖音弹幕游戏开发项目&#xff0c;旨在为用户带来一种全新的、沉浸式的互动体验。…

鸿蒙(HarmonyOS)Navigation如何实现多场景UI适配?

场景介绍 应用在不同屏幕大小的设备上运行时&#xff0c;往往有不同的UI适配&#xff0c;以聊天应用举例&#xff1a; 在窄屏设备上&#xff0c;联系人和聊天区在多窗口中体现。在宽屏设备上&#xff0c;联系人和聊天区在同一窗口体现。 要做好适配&#xff0c;往往需要开发…

Alpha律所管理系统,助力律师团队管理提效再升级

律师团队管理&#xff0c;是律所成长与发展经久不衰的议题。无论是律所的创办还是扩张&#xff0c;管理者首先要考虑的就是管理模式的选择与更新问题&#xff0c;这几乎成为一个律所能否长远发展的关键“七寸”。那么&#xff0c;到底为什么团队管理如此重要&#xff0c;做好管…

【实现100个unity特效之7】unity 3d实现各种粒子效果

文章目录 先看最终效果下雨效果萤火虫和火花四溅的效果 3d下雨粒子效果涟漪效果雨滴和涟漪效果结合水花效果雨滴涟漪水花结合问题雾气效果萤火虫火花效果萤火虫和火花效果结合其他特效爆炸、闪电、火焰、雷雨特效&#xff08;2023/7/5更新&#xff09;源码完结 先看最终效果 下…

冰岛人[天梯赛]

文章目录 题目描述思路AC代码 题目描述 输入样例 15 chris smithm adam smithm bob adamsson jack chrissson bill chrissson mike jacksson steve billsson tim mikesson april mikesdottir eric stevesson tracy timsdottir james ericsson patrick jacksson robin patrickss…

图片如何做成二维码?手机扫码看图的制作方法

现在用二维码来展示图片、照片时很常用的一种方式&#xff0c;通过扫秒二维码就能够在手机上预览图片&#xff0c;更加的方便快捷。在制作图片二维码的时候&#xff0c;有些情况下需要不定时的在二维码图案不变的情况经常性的修改内容&#xff0c;或者除了图片之外还要加入其它…

【数据结构】受限制的线性表——队列

&#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;个人主页&#x1f388;&#x1f388;&#x1f388;&#x1f388;&#x1f388; &#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;数据结构专栏&#x1f388;&#x1f388;&#x1f388;&…

最新版CleanMyMac X4.15.2有哪些亮眼的更新?

CleanMyMac X是一款专为macOS系统设计的清理和优化工具&#xff0c;它集成了多种功能来帮助用户保持Mac系统的整洁、高效和安全。 首先&#xff0c;CleanMyMac X具备智能扫描和清理功能&#xff0c;能够自动识别并清理Mac上的各种垃圾文件&#xff0c;包括重复文件、无用的语言…

《AI绘画与修图实战:Photoshop+Firefly从入门到精通》

关键点 1.自学教程&#xff1a;内容安排由浅入深、循序渐进&#xff0c;130多个经典AI案例案例助你在实战中掌握技巧 2.技术手册&#xff1a;透彻讲解PSAI、Firefly&#xff0b;AI的绘画和修图实战技巧&#xff0c;高效率学习 3.老师讲解&#xff1a;赠送170分钟频教程和数百个…

企业内推平台招聘信息采集与分析在线项目实习

师傅带练 项目背景 为了实现有效的招聘&#xff0c;企业需要制定明确的招聘需求&#xff0c;根据业务发展需求和市场变化&#xff0c;精准定位所需人才的类型和层次&#xff0c;提高招聘效率和质量。而招聘网站需要积极满足企业的需求&#xff0c;提供针对性的服务&#xff0…