微信小程序函数处理之保姆级讲解

news2025/4/12 23:36:40

 

 

目录

生命周期函数

 生命周期函数的调用过程

页面事件函数

页面路由管理

自定义函数

setData设值函数


 

 

生命周期函数

在使用Page()构造器注册页面时,需要使用生命周期函数,包括onLoad()页面加载时生命周期函数、onShow()页面显示时生命周期函数、onReady()页面初次渲染完成时生命周期函数、onHide()页面隐藏生命周期函数和onUnload()页面卸载生命周期函数。

1.onLoad页面加载时生命周期函数;一个页面只会调用一次,可以再onLoad的参数中获取打开当前页面路径中的参数,接收页面参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>页面跳转时携带的参数。

2.onShow页面显示生命周期函数:每次打开页面都会调用一次,页面显示/切入前台时触发。

3.onReady页面初次渲染完成生命周期函数:页面初次渲染完成时触发,一个页面只会调用一次,代表页面已经准备妥当,可以和视图进行交互,对界面的设置,如:wx.setNavigationBarTitle,需在onReady之后进行。

4.onHide页面隐藏生命周期函数:页面隐藏/切入后台时触发,如页面之间跳转或通过底部Tab切换到其他页面,小程序切入后台等。

5.onUnload页面卸载生命周期函数:页面卸载时触发,如页面跳转或者返回到之前的页面时。

 

 

 生命周期函数的调用过程

1.业务逻辑层线程创建、完成时会调用onLoad页面加载时生命周期函数、onShow页面显示生命周期函数。

2.视图层线程创建完成后,异步通知业务逻辑层来获取数据,业务逻辑层在给视图层线程发送数据来渲染页面时会调用onReady页面初次渲染完成生命周期。

3.页面隐藏/切入后台时会调用onHide页面隐藏生命周期函数。

4.业务逻辑层线程在摧毁时会调用onUnload页面卸载生命周期函数。

页面事件函数

微信小程序针对页面事件提供了5歌函数,分别时onPullDownRefresh()监听用户下拉刷新事件处理函数、onReachBottom()监听用户上拉触底事件处理函数、onPageScroll(Object object)监听用户华东页面事件处理函数、onResize()监听页面尺寸发生改变的事件处理函数、onShareApp-Message(Object object)监听用户点击页面内转发处理函数。

1.onPullDownRefresh()监听用户下拉刷新事件处理函数:需要在app.json文件的window选项中或页面配置中开启enablePullDownRefresh。可以通过wx.startPullDownRefresh出发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一直。当处理完数据刷新后,wx.stopPullDown-Refresh可以停止当前页面的下拉刷新。

2.onReachBottom()监听用户上拉触底事件处理函数:可以在app.json文件的window选项中或页面配置中设置触发距离onReachBottomDistance。再出发距离内滑动期间,本事件只会呗触发一次。

3.onPageScroll(Object object)监听用户滑动页面处理函数:可以获取页面在垂直方向已滚动的距离(单位为像素)

4.onResize()监听页面尺寸发生的时间处理函数:可以使用页面的onResize来监听页面尺寸发生改变的事件。对于自定义组件。可以使用resize生命周期来监听。回调函数中将返回显示区域的尺寸信息。

5.onShareAppMessage(Object object)监听用户点击页面内转发处理函数:监听用户点击页面转发按钮(buton组件open-type=“share”)或右上角菜单中“转发”按钮的行为,并自定义转发内容,只有定义了此事件处理函数,右上角菜单中才会显示“转发”按钮。此事件需要返回一个Object对象,由于自定义分享内容。

页面路由管理

微信小程序页面路由管理是由微信小程序宽假管理的,框架以栈的形式维护了所有的页面,栈作为一种数据结构,时一种只能在一段进行插入和删除操作的特殊线代表,他按照后进先出的原则存储数据,先进入的数据呗压入栈底,最后进入的数据在栈顶,需要读取数据的时候从栈顶开始读出数据(最后进入的一个数据呗第一个读出来)。

微信小程序页面交互也是通过栈来完成的。微信小程序初始化时,新页面入栈;打开新页面时,新页面入栈;页面重定向时,当前页面出栈,新页面入栈;页面返回时,页面不断出栈,知道返回指定页面,新页面入栈;Tab(导航标签)切换时,页面全部出栈,只留下新的Tab页面;重加载时,页面全部出栈,只留下新的页面。

自定义函数

除了初始化数据和生命周期函数外,Page中还可以定义一些特殊的函数:事件处理函数。在渲染层可以在组件加入事件绑定,当达到触发事件时,就会执行Page中定义的事件处理函数。

setData设值函数

Page.prototype.setData()为设值函数,用于将数据从逻辑层发送到视图层,同时改变对应的this.data的值。

setData()参数格式:接收一个对象,以key、value的形式表示将this.data中的key对应的值改变成value。

其中,key可以非常灵活,一数据路径的形式给出,如array[2].message,a.b.c.d,并且不需要在this.data中预先定义。

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

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

相关文章

硬件工程师成长之路(10.1)——芯片选型

系列文章目录 1.元件基础 2.电路设计 3.PCB设计 4.元件焊接 5.板子调试 6.程序设计 7.算法学习 8.编写exe 9.检测标准 10.项目举例 11.职业规划 文章目录前言一、电机驱动类1 、直流电机驱动芯片2、步进电机③、资料前言 送给大学毕业后找不到奋斗方向的你&#xff08;每周…

【车间调度】基于全球邻域和爬坡来优化模糊柔性作业车间调度问题(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️❤️&#x1f4a5;&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑…

VS Studio 搭建跨平台开发环境

VS Studio 搭建跨平台开发环境 增加VS的工作负载 打开Visual Studio Installer 安装器&#xff0c;点击修改 在这个界面找到Linux开发环境&#xff0c;勾上然后在点击右下角的修改等待安装。我的是因为已经有了所以下面那里显示的是关闭&#xff0c;没有的是显示的修改 等待安…

LabVIEW强制重新安装无法运行或损坏的NI软件

LabVIEW强制重新安装无法运行或损坏的NI软件 可以参考附件的录像说明。LabVIEW强制重新安装无法运行或损坏的NI软件 - 北京瀚文网星科技有限公司 (bjcyck.com) 某些NI软件&#xff0c;工具包或驱动程序已损坏&#xff0c;损坏或无法按预期运行&#xff0c;想尝试重新安装以进…

【ArchSummit】众安金融微服务架构演进实战

前言 &#x1f4eb; 作者简介&#xff1a;小明java问道之路&#xff0c;专注于研究 Java/ Liunx内核/ C及汇编/计算机底层原理/源码&#xff0c;就职于大型金融公司后端高级工程师&#xff0c;擅长交易领域的高安全/可用/并发/性能的架构设计与演进、系统优化与稳定性建设。 &a…

网络原理——传输层_UDP

JavaEE传送门JavaEE JavaEE——No.2 套接字编程(TCP) JavaEE——网络原理_应用层 目录传输层UDP传输层 端到端之间的传输, 重点关注的是起点和终点 核心的协议有两个: UDP: 无连接, 不可靠传输,面向数据报, 全双工 TCP: 有链接, 可靠传输, 面向字节流, 全双工 UDP UDP协议…

nginx+tomcat(二)

四层代理: 四层代理: 一般使用七层代理也就是http应用层代理&#xff0c;可以反向代理和负载均衡。但是项目要使用长连接&#xff0c;此时内网服务器肯定不能暴漏&#xff0c;还是需要接入层网关进行转发&#xff0c;一般有使用lvs&#xff0c;lvs专门用作四层代理和负载均衡基…

【C++】模板初阶

文章目录一、泛型编程二、函数模板1、概念与格式2、底层原理3、实例化4、参数的匹配规则三、类模板1、概念与格式2、实例化一、泛型编程 我们通过实现一个通用的交换函数来引入泛型编程&#xff1a; void Swap(int& left, int& right) {int temp left;left right;r…

Linux 命令(147) —— truncate 命令

文章目录1.命令简介2.命令格式3.选项说明4.常用示例参考文献1.命令简介 truncate 将文件的大小缩小或扩展到指定的大小。 如果指定的文件不存在将被创建。 如果文件大于指定的大小&#xff0c;则会丢失额外的数据。如果较短&#xff0c;它将被扩展&#xff0c;扩展的稀疏部分…

【牛客刷题--SQL篇】多表查询组合查询SQL25 查找山东大学或者性别为男生的信息

&#x1f496;个人主页&#xff1a;与自己作战 &#x1f4af;作者简介&#xff1a;CSDN博客专家、CSDN大数据领域优质创作者、CSDN内容合伙人、阿里云专家博主 &#x1f49e;牛客刷题系列篇&#xff1a;【SQL篇】】【Python篇】【Java篇】 &#x1f4cc;推荐刷题网站注册地址&a…

Python数据分析与挖掘————图像的处理

系列文章目录 文章目录系列文章目录前言图片的马赛克一.安装matplotlib&#xff0c;numpy等模块二.马赛克图片一.导入图片二.定位区域三.图片的合成图片拼接图像的灰度化一.max()方法二.min&#xff08;&#xff09;方法三.平均值法mean()函数四.加权平均值法图片的分割总结源代…

基于tauri+vue3.x多开窗口|Tauri创建多窗体实践

最近一种在捣鼓 Tauri 集成 Vue3 技术开发桌面端应用实践&#xff0c;tauri 实现创建多窗口&#xff0c;窗口之间通讯功能。 开始正文之前&#xff0c;先来了解下 tauri 结合 vue3.js 快速创建项目。 tauri 在 github 上star高达53K&#xff0c;而且呈快速增长趋势。相比elect…

DDoS报告团伙规模

攻击资源活跃度分析 在攻击源活时间的监测中发现&#xff0c;和 2019 年趋势一致&#xff0c;存活时间大于 10 天的攻击资源占比 11%。像这种能够长期被控制的肉鸡大部分都是物联网 设备&#xff0c;物联网设备大都存在设备系统老&#xff0c;人员维 护少&#xff0c;更新慢等…

vue当中的事件处理

1.绑定监听v-on 最简单的一个绑定监听的事件 <body><div id"root"><h1>my name is {{name}}</h1><button v-on:click"showInfo">click me</button></div><script type"text/javascript">Vue.…

HotSpot 虚拟机对象探秘-对象的创建、内存布局、访问定位

目录对象的创建检查类的符号引用&#xff0c;是否执行过类的加载过程分配内存指针碰撞&#xff1a;空闲列表&#xff1a;线程安全的问题&#xff0c;对分配内存空间的动作进行同步处理——TLAB初始化虚拟机对对象进行必要的设置&#xff0c;执行构造方法对象的内存布局对象头包…

Spring、MySQL、日期、BigDecimal、集合、反射、序列化中的坑与使用指南

文章目录MySQL中的坑MySQL断开连接Mysql表字段设置为not null如何解决网络瓶颈核心流程的性能查看Spring中的坑与使用注意springboot的配置文件先后顺序定时任务不进行lombok的不适用场景Spring的Bean默认名称生成规则new出来的对象不被Spring所管理SpringBean相关的注解Spring…

Java 类和对象 详解+通俗易懂

文章目录类和对象1. 面对对象的初步认识1.1 什么是面向过程&#xff1f;什么又是面向对象&#xff1f;1.2 对象、成员变量和成员方法的关系和理解2. 类的定义和使用2.1 简单认识类2.2 类的定义格式2.3 小试身手3. 类的实例化3.1 什么是实例化3.2 类和对象的说明4. this 引用4.1…

k8s上部署seata-server集群并注册到nacos上

部署前准备 第一步&#xff1a; 创建seata-server需要的表,有现成的阿里云RDS&#xff0c;就直接在RDS上创建数据库了&#xff0c;方便后面统一管理。 具体的 SQL 参考script/server/db &#xff0c;这里使用的是 MySQL 的脚本&#xff0c;数据库名称为 seata&#xff0c;还需…

对外 API 接口,请把握这3 条原则,16 个小点

对外API接口设计 安全性 1、创建appid,appkey和appsecret 2、Token&#xff1a;令牌&#xff08;过期失效&#xff09; 3、Post请求 4、客户端IP白名单 &#xff08;可选&#xff09; 5、单个接口针对IP限流&#xff08;令牌桶限流&#xff0c;漏桶限流&#xff0c;计数器…

git如何回滚,返回到之前的记录

文章目录1.建立一个reset的测试文件&#xff0c;并连续提交。2.进行回滚测试。2.1测试,回滚到第二次提交2.1.1首先使用git log命令查看commit记录2.1.2查看结果.2.1.3回滚结果提交到远程2.2.你发现自己回滚的多了3.1撤销测试3.1建立文件&#xff0c;多次填写内容上传到git3.2撤…