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

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

ruisui885个月前 (02-03)技术分析30

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页面由哪四部分构成)” 的相关文章

快速上手React

web前端三大主流框架1、Angular大家眼里比较牛的框架,甚至有人说三大框架中只有它能称得上一个完整的框架,因为它包含的东西比较完善,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能。对于刚开始学习使用框架的小伙伴们,可以推荐这个框架,学会之后简直能颠覆之前你对前端开发的认...

软件测试-性能测试专题方法与经验总结

本文 从 性能测试流程,性能测试指标,性能监测工具,性能测试工具,性能测试基线,性能测试策略,性能瓶颈分析方法几个维度,进行知识总结和经验分享;详细见下图总结,欢迎大家补充;性能测试经验与思考1. 性能测试流程1.1. 性格规格评审1.2. 资源排期1.2.1. 人力资源1.2.2. 时间计划· 性...

7 招教你轻松搭建以图搜图系统

作者 | 小龙责编 | 胡巍巍当您听到“以图搜图”时,是否首先想到了百度、Google 等搜索引擎的以图搜图功能呢?事实上,您完全可以搭建一个属于自己的以图搜图系统:自己建立图片库;自己选择一张图片到库中进行搜索,并得到与其相似的若干图片。Milvus 作为一款针对海量特征向量的相似性检索引擎,旨在...

HTML5学习笔记三:HTML5语法规则

1.标签要小写2.属性值可加可不加””或”3.可以省略某些标签 html body head tbody4.可以省略某些结束标签 tr td li例:显示效果:5.单标签不用加结束标签img input6.废除的标签font center big7.新添加的标签将在下一HTML5学习笔记中重点阐述。...

有效地简化导航-Part 1:信息架构

「四步走」——理想的导航系统要做一个可用的导航系统,网页设计师必须按顺序回答以下4个问题:1. 如何组织内容?2. 如何解释导航的选项?3. 哪种导航菜单最适合容纳这些选项?4. 如何设计导航菜单?前两个问题关注构建和便签内容,通常称为信息架构。信息架构师通常用网站地图(site map diagr...

微信小程序发展越来越快,Flutter应用开发越来越低效?

目前的疑惑微信小程序发展的越来越快,目前小程序甚至取代了大部分 App 的生态位,公司的坑位不增反降,只能让原生应用开发兼顾或换岗进行小程序的开发。以我的实际情况来讲,公司应用采用的 Flutter 框架,同样的功能不可避免的就会存在 Flutter 应用开发和微信小程序开发兼顾的情况,这种重复造轮...