微信小程序 第四节课

Page

注册小程序中的一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。 

参数

属性类型默认值必填说明
dataObject页面的初始数据
onLoadfunction生命周期回调—监听页面加载
onShowfunction生命周期回调—监听页面显示
onReadyfunction生命周期回调—监听页面初次渲染完成
onHidefunction生命周期回调—监听页面隐藏
onUnloadfunction生命周期回调—监听页面卸载
onPullDownRefreshfunction监听用户下拉动作
onReachBottomfunction页面上拉触底事件的处理函数
onShareAppMessagefunction用户点击右上角转发
onShareTimelinefunction用户点击右上角转发到朋友圈
onAddToFavoritesfunction用户点击右上角收藏
onPageScrollfunction页面滚动触发事件的处理函数
onTabItemTapfunction当前是 tab 页时,点击 tab 时触发

一  生命周期回调函数

1.1onLoad(Object query)

页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。

参数:

名称类型说明
queryObject打开当前页面路径中的参数

1.2onShow()

页面显示/切入前台时触发。

1.3onReady()

页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

1.4onHide()

页面隐藏/切入后台时触发。 如底部 tab 切换到其他页面,小程序切入后台等。

1.5onUnload()

页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。

二  页面事件处理函数

2.1onPullDownRefresh()

监听用户下拉刷新事件。

  • 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh
  • 可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
  • 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

2.2onReachBottom()

监听用户上拉触底事件。

  • 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance
  • 在触发距离内滑动期间,本事件只会被触发一次。

2.3onPageScroll(Object object)

监听用户滑动页面事件。

参数 Object object:

属性类型说明
scrollTopNumber页面在垂直方向已滚动的距离(单位px)

注意:请只在需要的时候才在 page 中定义此方法,不要定义空方法。以减少不必要的事件派发对渲染层-逻辑层通信的影响。 注意:请避免在 onPageScroll 中过于频繁的执行 setData 等引起逻辑层-渲染层通信的操作。尤其是每次传输大量数据,会影响通信耗时。

2.4onShareAppMessage(Object object)

听用户点击页面内转发按钮(button 组件 open-type="share")或右上角菜单“转发”按钮的行为,并自定义转发内容。

注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮

参数 Object object:

参数类型说明最低版本
fromString转发事件来源。
button:页面内转发按钮;
menu:右上角转发菜单
1.2.4
targetObject如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined1.2.4
webViewUrlString页面中包含web-view组件时,返回当前web-view的url1.6.4

此事件处理函数需要 return 一个 Object,用于自定义转发内容,返回内容如下:

自定义转发内容 基础库 2.8.1 起,分享图支持云图片。

字段说明默认值最低版本
title转发标题当前小程序名称
path转发路径当前页面 path ,必须是以 / 开头的完整路径
imageUrl自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。使用默认截图1.5.0
promise如果该参数存在,则以 resolve 结果为准,如果三秒内不 resolve,分享会使用上面传入的默认参数

2.5 onTabItemTap( Object object)

点击 tab 时触发

Object 参数说明:

参数类型说明最低版本
indexString被点击tabItem的序号,从0开始1.9.0
pagePathString被点击tabItem的页面路径1.9.0
textString被点击tabItem的按钮文字1.9.0

补充知识点

页面栈

框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,页面栈的表现如下:

路由方式页面栈表现
初始化新页面入栈
打开新页面新页面入栈
页面重定向当前页面出栈,新页面入栈
页面返回页面不断出栈,直到目标返回页
Tab 切换页面全部出栈,只留下新的 Tab 页面
重加载页面全部出栈,只留下新的页面

开发者可以使用 getCurrentPages() 函数获取当前页面栈。

建立超链接的知识点

首先确定页面是合法的   打开另一个页面 (你要在这个页面链接到新的页面)里面的wxml文件  ,在view标签下写一个超链接

<navigator url="/pages/message/message">

    to    message

</navigator>

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

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

相关文章

创新指南|解构企业AI价值如何实现 – 从5个关键策略着手

这篇文章探讨了谁将从生成式人工智能(Generative AI)市场中创造价值。作者分析了生成式AI技术栈,包括计算基础设施、数据、基础模型、微调模型和应用程序,找出了有利可图的领域。基于Transformer架构的大型语言模型(LLM)如GPT-4成为这一领域的基础模型。微调这些通用模型以适应…

总结UDP协议各类知识点

前言 本篇博客博主将详细地介绍UDP有关知识点&#xff0c;坐好板凳发车啦~ 一.UDP特点 1.无连接 UDP传输的过程类似于发短信&#xff0c;知道对端的IP和端口号就直接进行传输&#xff0c;不需要建立连接&#xff1b; 2.不可靠传输 没有任何的安全机制&#xff0c;发送端发…

【AI】命令行调用大模型

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 【AI】命令行调用大模型引入正文初始化项目撰写脚本全局安装 成果展示 【AI】命令…

探索高效开发大屏可视化项目模板:es-big-screen

一、引言 在数据驱动的时代&#xff0c;大屏可视化已经成为了展示数据和信息的重要手段。本文将介绍一个基于 Vue 3、Echarts、高德地图和 Pinia 开发的大屏可视化项目模板——es-big-screen&#xff0c;它提供了丰富的功能&#xff0c;包括大屏适配、图表组件&#xff08;Ech…

【Leetcode】top 100 贪心算法

基础知识补充 贪心算法&#xff1a;在对问题求解时&#xff0c;总是做到局部最优&#xff1b; 但局部最优并不总能获得整体最优解&#xff0c;但通常能获得近似最优解 题目 121 买卖股票的最佳时机 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股…

《Effective C++》《构造/析构/赋值运算——7、为多态基类声明virtual析构函数》

文章目录 1、term7:Declare destructors virtual in polymorphic base classes2、总结3、相关面试题3.1 析构函数在什么情况下声明为虚函数 4、参考 1、term7:Declare destructors virtual in polymorphic base classes 带有多态性质的基类应该声明一个virtual析构函数&#x…

突破编程_C++_STL教程( find 算法)

1 std::find 算法的概念与用途 std::find 是 C 标准库 <algorithm> 中的一个非常有用的算法。这个算法用于在一个范围内查找指定的元素&#xff0c;并返回该元素的迭代器。如果元素不存在于该范围内&#xff0c;则返回范围的尾迭代器。 std::find 的基本概念是遍历一个…

49 el-input 的 模型 视图 双向同步

前言 这里来看一下 el-input 这边的 数据 和 视图的双向绑定 最开始 我以为 这部分的处理应该是 vue 这边实现的, 但是跟踪调试了一下 发现这部分的处理是业务这边 自己实现的 这部分 还是有一些 值得记录的东西, 从这里 要去理解的而是 vue 这边从宏观的框架上面来说 帮我们…

前端网页之间传递参数

在多页面应用中&#xff0c;我们可能面临着前端页面之间传递参数的情况&#xff0c;在一个页面获取到一些参数信息后&#xff0c;到另一个页面去进行后续处理&#xff0c;需要将前一个页面得到的一些参数带到第二个页面。当参数较少时&#xff0c;可以在跳转第二个页面时通过se…

前端-深入探讨网络面试题

第一关 请求-文件、数据、连接 文件类的请求&#xff1a;加载HTMl、CSS 数据&#xff1a; ajax请求&#xff08;基于HTTP&#xff0c;HTTP基于TCP&#xff09;&#xff0c;如何建立连接的&#xff08;三次握手&#xff0c;为什么不是两次或者四次&#xff09;&#xff0c;sock…

《QT实用小工具·四》屏幕拾色器

1、概述 源码放在文章末尾 该项目实现了屏幕拾色器的功能&#xff0c;可以根据鼠标指定的位置识别当前位置的颜色 项目功能包含&#xff1a; 鼠标按下实时采集鼠标处的颜色。 实时显示颜色值。 支持16进制格式和rgb格式。 实时显示预览颜色。 根据背景色自动计算合适的前景色…

AIGC重塑金融:AI大模型驱动的金融变革与实践

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-tVrfBkGvUD0Qi13F {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

学习java第二十七天

Spring框架作为IOC容器的落地实现,提供了一个灵活的"插座",其他组件只需要简单的"插上"即可享受Spring提供的基础设施支持- ,并且结合Spring一起使用。 Spring的核心在于它的IOC容器设计,我们可以通过Spring应用程序上下文生命周期和Spring Bean的生命周期…

基于SpringBoot的“游戏分享网站”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“游戏分享网站”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统总体结构图 网站首页界面图 用户注册界面图 …

为什么用了索引,搜索速度还是很慢

索引列选择不当 1.假设有一个包含性别信息的表&#xff0c;其中有1000条记录&#xff0c;其中男性占 99%、女性占 1%。如果在性别列上创建索引&#xff0c;由于选择性太低&#xff0c;大部分查询都会涉及到表中的绝大多数行&#xff0c;这时候数据库优化器可能会认为全表扫描比…

[SpringCloud] Feign Client 的创建 (二) (五)

文章目录 1.自动配置FeignAutoConfiguration2.生成 Feign Client2.1 从Feign Client子容器获取组件2.2 Feign Client子容器的创建2.3 构建Feign Client实例 1.自动配置FeignAutoConfiguration spring-cloud-starter-openfeign 包含了 spring-cloud-openfeign-core FeignAutoCo…

HarmonyOS实战开发-如何实现一个支持加减乘除混合运算的计算器。

介绍 本篇Codelab基于基础组件、容器组件&#xff0c;实现一个支持加减乘除混合运算的计算器。 说明&#xff1a; 由于数字都是双精度浮点数&#xff0c;在计算机中是二进制存储数据的&#xff0c;因此小数和非安全整数&#xff08;超过整数的安全范围[-Math.pow(2, 53)&#…

【详解】运算放大器工作原理及其在信号处理中的核心作用

什么是运算放大器 运算放大器&#xff08;简称“运放”&#xff09;是一种放大倍数非常高的电路单元。在实际电路中&#xff0c;它常常与反馈网络一起组成一定的功能模块。它是一种带有特殊耦合电路和反馈的放大器。输出信号可以是输入信号的加法、减法、微分和积分等数学运算…

vue3+ts项目 | axios 的测试 | 测试接口

在 App.vue 中&#xff0c;测试接口 // 测试接口import request from /utils/request;import { onMounted } from vue;onMounted(() > {request.get(/hosp/hospital/1/10).then((res) > {console.log("APP组件展示获取的数据",res);})}) 在request.ts中&…

link 样式表是否会阻塞页面内容的展示?取决于浏览器,edge 和 chrome 会,但 firefox 不会。

经过实测&#xff1a; 在 head 中 link 一个 1M 大小的样式表。设置网络下载时间大概为 10 秒。 edge 和 chrome 只有在下载完样式表后&#xff0c;页面上才会出现内容。而 firefox 可以直接先显示内容&#xff0c;然后等待样式表下载完成后再应用样式。 DOMContentLoaded 事…