微信小程序的页面交互1

news/2024/7/20 1:39:17 标签: 微信小程序, 小程序, 前端

一、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.niftyadmin.cn/n/5471082.html

相关文章

关于Linux系统中使用Kazam录制的视频在Win系统中无法播放的问题解决办法

今天在linux系统【ubuntu】中录制了一段视频&#xff0c;想要在win系统中进行剪辑&#xff0c;但是发现无法打开&#xff0c;使用的是Kazam录制的mp4格式视频。 Kazam录制安装与使用方式&#xff1a; 安装方式——linux终端输入&#xff1a; sudo apt-get install kazam使用…

若依项目名、包名修改器

Updater.java import java.io.File; import java.util.*;public class Updater {public static void main(String[] args) {String projectPath"D:\\workspace\\idea\\RuoYi-Cloud-Plus-2.X";updateNames(new File(projectPath));}//需要改名的目录名称&#xff08;…

负载均衡:实现高效稳定的网络服务

随着互联网技术的快速发展&#xff0c;网络应用服务的规模和复杂性日益增加。为了满足日益增长的用户需求&#xff0c;确保服务的高可用性和稳定性&#xff0c;负载均衡技术应运而生。本文将详细介绍负载均衡的概念、原理、分类以及应用场景&#xff0c;帮助读者深入了解这一关…

解决Quartus与modelsim联合仿真问题:# Error loading design解决,是tb文件中没加:`timescale 1ns/1ns

解决Quartus与modelsim联合仿真问题&#xff1a;# Error loading design解决&#xff0c;是tb文件中没加&#xff1a;timescale 1&#xff0c;一直走下来&#xff0c;在modelsim中出现了下面问题2&#xff0c;rtl文件、tb文件2.1&#xff0c;rtl代码2.2&#xff0c;tb测试2.3&a…

零基础轻松入门Java数据库连接(JDBC)

什么是JDBC&#xff1f; Java数据库连接&#xff08;JDBC&#xff09;就像是Java程序和数据库之间的翻译官。它是一个官方的标准接口集&#xff0c;让Java程序能和不同的数据库“对话”。甭管你是在跟MySQL、Oracle还是SQL Server打交道&#xff0c;只要有了JDBC&#xff0c;J…

代码随想录-14day:二叉树3

一、二叉树最大深度 最大深度&#xff1a;根节点到最远叶子节点的最长路径上的节点数。 可以使用迭代法和递归法&#xff0c;以递归法为例&#xff1a;还是以递归三要素为基准&#xff0c;进行解决。 int maxDepth(struct TreeNode* root) {// struct TreeNode** NodeList …

【蓝桥杯嵌入式】RTC——实时时钟

一、RTC简介 RTC RTC—real time clock&#xff0c;实时时钟&#xff0c;主要包含日历、闹钟和自动唤醒这三部分的功能&#xff0c;其中的日历功能我们使用的最多。日历包含两个32bit的时间寄存器&#xff0c;可直接输出时分秒&#xff0c;星期、月、日、年。 从Cubemx里的配置…

滑动窗口(尺取法/Python)

滑动窗口&#xff08;尺取法&#xff09; 算法含义&#xff1a; 在解决关于区间特性的题目时保存搜索区间左右端点&#xff0c;然后根据实际要求不断更新左右端点位置的算法 时间复杂度&#xff1a; O ( n ) O(n) O(n) 空间复杂度&#xff1a; O ( 1 ) O(1) O(1) 在历年真题…