当前位置:首页 > 技术分析 > 正文内容

微信小程序学习笔记:Page()(微信小程序的page页面由哪四部分构成)

ruisui883个月前 (02-03)技术分析18

Page()用来注册小程序中的一个页面,接受一个Object类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。Page方法的object参数主要构成如下:

属性

说明

data

data是页面渲染使用的初始数据。页面加载时data将会以JSON字符串的形式由逻辑层传至渲染层,因此data中的数据必须是可以转成JSON的类型:字符串,数字,布尔值,对象,数组。渲染层通过WXML对数据进行绑定。

options

页面的组件选项,同Component 构造器中的options。

behaviors

类似于mixins和traits的组件间代码复用机制,参见behaviors。

onLoad(Object)

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

onShow

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

onReady

页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。对界面内容进行设置的API如wx.setNavigationBarTitle,请在onReady之后进行。

onHide

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

onUnload

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

onPullDownRefresh

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

onReachBottom

监听用户上拉触底事件。可以在app.jsonwindow选项中或页面配置中设置触发距离onReachBottomDistance。在触发距离内滑动期间,本事件只会被触发一次。

onShareAppMessage(Object)

监听用户点击页面内转发按钮(button组件open-type="share")或右上角菜单“转发”按钮的行为,并自定义转发内容。注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮,参数from(String):转发事件来源(button:页面内转发按钮,menu:右上角转发菜单),target(Object):如果from值是button,则 target 是触发这次转发事件的button,否则为undefined,webViewUrl(String):页面中包含web-view组件时,返回当前web-view的url,此事件处理函数需要return一个Object,用于自定义转发内容,title:转发标题,path:转发路径(必须是以 / 开头的完整路径),imageUrl:自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。promise:如果该参数存在,则以 resolve 结果为准,如果三秒内不 resolve,分享会使用上面传入的默认参数。

onShareTimeline

监听右上角菜单“分享到朋友圈”按钮的行为,并自定义分享内容。只有定义了此事件处理函数,右上角菜单才会显示“分享到朋友圈”按钮,事件处理函数返回一个Object,用于自定义分享内容,不支持自定义页面路径,title:自定义标题,即朋友圈列表页上显示的标题,query:自定义页面路径中携带的参数,如path?a=1&b=2的“?”后面部分,imageUrl:自定义图片路径,可以是本地文件或者网络图片。支持 PNG 及 JPG,显示图片长宽比是 1:1。

onAddToFavorites(Object)

监听用户点击右上角菜单“收藏”按钮的行为,并自定义收藏内容。参数webViewUrl(String)页面中包含web-view组件时,返回当前web-view的url。此事件处理函数需要 return 一个 Object,用于自定义收藏内容,title:自定义标题,imageUrl:自定义图片,显示图片长宽比为1:1,query:自定义query字段。

onPageScroll(Object)

监听用户滑动页面事件。参数scrollTop(Number):页面在垂直方向已滚动的距离(单位px)。

onResize(Object)

小程序屏幕旋转时触发,显示区域指小程序界面中可以自由布局展示的区域,默认情况下小程序显示区域的尺寸自页面初始化起就不会发生变化。但有两种方式可以改变:在手机上启用屏幕旋转支持(在app.jsonwindow段中设置"pageOrientation":"auto",或在页面json文件中配置"pageOrientation":"auto",pageOrientation还可以被设置为 landscape,表示固定为横屏显示)、在iPad上启用屏幕旋转支持(在app.json中添加"resizable":true,在iPad上不能单独配置某个页面是否支持屏幕旋转)。有时对于不同尺寸的显示区域,页面的布局会有所差异。此时可以使用media query来解决大多数问题。在 WXML 中,可以使用 match-media 组件来根据 media query 匹配状态展示、隐藏节点。此外,可以在页面或者自定义组件 JS 中使用 this.createMediaQueryObserver() 方法来创建一个 MediaQueryObserver 对象,用于监听指定的 media query 的匹配状态。有时仅仅使用media query无法控制一些精细的布局变化。此时可以使用js作为辅助。在js中读取页面的显示区域尺寸,可以使用selectorQuery.selectViewport 。页面尺寸发生改变的事件,可以使用页面的onResize来监听。对于自定义组件,可以使用resize生命周期来监听。回调函数中将返回显示区域的尺寸信息。此外还可以使用 wx.onWindowResize 来监听(但这不是推荐的方式)。

onTabItemTap(Object)

点击 tab 时触发,参数index(String):被点击tabItem的序号,从0开始,pagePath(String):被点击tabItem的页面路径,text(String):被点击tabItem的按钮文字。

onSaveExitState

每当小程序可能被销毁之前,页面回调函数onSaveExitState会被调用,可以进行退出状态的保存。

其他

可以添加任意的函数或数据到Object参数中,在页面的函数中用this可以访问。这部分属性会在页面实例创建时进行一次深拷贝。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/1392.html

标签: pageobject
分享给朋友:

“微信小程序学习笔记:Page()(微信小程序的page页面由哪四部分构成)” 的相关文章

Excel VBA 收费单据打印/一步一步带你设计【收费管理系统】12

本文于2023年6月10日首发于本人同名公众号:Excel活学活用,更多文章案例请搜索关注!☆本期内容概要☆用户窗体设置:收费结算模块设置(7)单据打印大家好,我是冷水泡茶,前几期我们分享了【收费管理系统】的设计,最近一期是(Excel VBA 收费结算模块/一步一步带你设计【收费管理系统】11),...

「干货」通俗易懂的Deno 入门教程

作者: semlinker转发链接:https://mp.weixin.qq.com/s/2eqRTsf_z7Bcs6dziXe73Q一、Deno 简介Deno 是一个 JavaScript/TypeScript 的运行时,默认使用安全环境执行代码,有着卓越的开发体验。Deno 含有以下功能亮点:默...

Solid State Logic 发布低保真数字失真插件 Digicrush

Solid State Logic 宣布推出低保真数字失真插件 Digicrush ,他们最新的创意工具具有经典数字失真的粗糙、低保真特性,完美模拟早期数字音频的衰减和伪影。Digicrush 充满怀旧气息,深受经典数字采样器和效果器的影响,具有内置抖动、可调比特深度和采样率降低功能,是为音轨添加复...

2024最新版:前端性能优化方案汇总

前端训练营:1v1私教,终身辅导计划,帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer。欢迎来撩~~~~~~~~Hello,大家好,我是 Sunday。前端性能优化一直是很多同学非常关注的问题,在日常的面试中也是经常会被问到的点。所以今天咱们就花一点时间来了解一下2024最新的...

你感动了吗?佳能超规格镜头 RF 24-105mm F2.8深度测评

如果要你选一支用作多题材创作的挂机镜头,那我相信很多人会选择24-105mm这个焦段的镜头。作为一支可以实现从广角到长焦的变焦镜头,24-105mm有着丰富的焦段选择。只是基于镜头体积以及光学结构上的限制,此前的24-105mm镜头只能恒定在F4的光圈。而佳能打破了这一限制,将实用焦段和恒定光圈完美...

最快清除数组空值?分享 1 段优质 JS 代码片段!

本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!大家好,我是大澈!本文约 600+ 字,整篇阅读约需 1 分钟。今天分享一段优质 JS 代码片段,用最简洁的代码清除了数组中的空值。老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!const arr...