【page.js】配置及Page函数说明
页面.js中的Page函数用来注册一个页面,指定页面的初始数据、生命周期回调、事件处理函数等。
语法:Page(Object)
参数: Object json对象
Page({ /**
* data
* 说明: 页面的初始数据
**/
data : {
// 定义本页面所需的变量
text : "This is page data."
}, /**
* onLoad(query)
* 说明: 页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
* 参数: query [Object] 打开当前页面路径中的参数
**/
onLoad : function(query){
}, /**
* onShow()
* 说明: 页面显示/切入前台时触发。。
**/
onShow : function(){
}, /**
* onReady()
* 说明: 页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
**/
onReady : function(){
}, /**
* onHide()
* 说明: 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面,小程序切入后台等。
**/
onHide : function(){
}, /**
* onUnload()
* 说明: 页面卸载时触发。如redirectTo或navigateBack到其他页面时。
**/
onUnload : function(){
}, /**
* onPullDownRefresh()
* 说明: 监听用户下拉刷新事件。
* 注意:
* 1) 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
* 2) 可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
* 3) 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
**/
onPullDownRefresh : function(){
}, /**
* onReachBottom()
* 说明: 监听用户上拉触底事件。
* 注意:
* 1) 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
* 2) 在触发距离内滑动期间,本事件只会被触发一次。
**/
onReachBottom : function(){
}, /**
* onPageScroll(Object)
* 说明: 监听用户滑动页面事件。
* 参数: Object,可以通过Object获取以下数据:
* Object.scrollTop [Number] 页面在垂直方向已滚动的距离(单位px)
**/
onPageScroll : function(Object){
}, /**
* onShareAppMessage(Object)
* 说明: 监听用户转发行为。是点击转发按钮(<button> 组件 open-type="share")还是右上角菜单“转发”按钮的行为,并自定义转发内容。
* 参数: Object,可以通过Object获取以下数据:
* Object.from [button|menu] 转发事件来源。值为 button 时表示点击页面转发按钮。 值为menu通过点击页面右上角转发菜单。
* Object.target [Object] 如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined
* Object.webViewUrl [String] 页面中包含<web-view>组件时,返回当前<web-view>的url
*
* 注意:
* 1) 只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
* 2) 该函数需要返回一个对象,用于自定义转发内容
**/
onShareAppMessage : function(Object){
// 返回对象,定义转发内容
return {
title : [String],
path : [String], // 当前页面 path ,必须是以 / 开头的完整路径,比如:/page/user?id=123
imageUrl : [String] // [可选] 自定义图片路径,可以是任意图片路径,支持PNG及JPG。显示图片长宽比是 5:4。不设置时使用默认截图
}
}, /**
* onTabItemTap(Object)
* 说明: 监听点击 tab 时触发
* 参数: Object,可以通过Object获取以下数据:
* Object.index [String] 被点击tabItem的序号,从0开始
* Object.pagePath [String] 被点击tabItem的页面路径
* Object.text [String] 被点击tabItem的按钮文字
**/
onTabItemTap : function(Object){
}, /**
* 自定义组件事件
* 组件中加入 bindtap="sample",在Page内定义该事件
* 比如组件: <view bindtap="sample">点我</view>
* 定义点击事件示例:
**/
sample : function(){
// 这里定义单击事件
}, /**
* 属性: this.route
* 说明: Page内置属性,返回当前页面的路径,不含扩展名,比如: page/index/index
*/ /**
* 函数: this.setData(Object data, Function callback)
* 说明: 更改或增加page.data下的变量值,同时改变对应的视图层调用数据
* 示例:
* this.setData({text : '新内容'}) // 更改或增加data下的text键值
* this.setData({'marray[0].text' : 123}); // 修改键名marray第一个元素的键名为text的值
* this.setData({'object.text' : 567}); // 修改键名object下的键名为text的值
* this.setData({'a.b' : 1}); // 如果this.data.a.b 不存在时,则新建这个键。不管是否存在this.data.a路径
*
* 注意:
* 1) 要获取data下定义的数据,采用 this.data.text 方式获取
* 2) 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。
* 3) 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
* 4) 请不要把 data 中任何一项的 value 设为 undefined ,否则这一项将不被设置并可能遗留一些潜在问题。
*/ })
【page.js】配置及Page函数说明的更多相关文章
- 微信小程序笔记<四>page.js —— 页面注册
小程序的每个页面都是独立的,每个页面都必须有 page.js 和 page.wxhl 文件,page.json 和 page.wxss 文件非必要文件,注意如果创建 page.json 则至少保证有一 ...
- 【app.js】配置及App函数说明
app.js中的App函数用来注册一个小程序或设置全局变量. App函数: 语法:App(Object) 参数: Object json对象 说明: App函数必须在app.js中调用 ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <lin ...
- ajax请求执行完成后再执行其他操作(jQuery.page.js插件使用为例)
就我们做知,ajax强大之处在于它的异步请求,但是有时候我们需要ajax执行彻底完成之后再执行其他函数或操作 这个时候往往我们用到ajax的回调函数,但是假如你不想或者不能把接下来的操作写在回调函数中 ...
- how to insert js to iframe page in order to disabled open new page/window
how to insert js to iframe page in order to disabled open new page/window js 禁用 iframe 中的页面打开新页面 htt ...
- 微信小程序 --- 设置app.js/page.js参数的方法
设置 app.js 文件: //app.js App({ globalData: { is_login:false, userInfo:{} } }) 设置gloabalData的方法: // 定义a ...
- 微信小程序 --- page.js文件
page.js文件是写当前 page.wxml 页面的 JS 脚本文件: 示例: //获取应用实例 const app = getApp() Page({ data: { navComOneOnOff ...
- jquery.page.js插件在使用时重复触发“上一页”和“下一页”操作
jquery.page.js使用demo HTML代码 <div class="result"> <div class="tcdPageCode&quo ...
- 转载 SharePoint 2013配置Master Page and Page Layout
转载原地址: http://www.cnblogs.com/huangjianwu/p/4539706.html 涉及到的内容是关于SharePoint 2013如何部署自定义的母版页和布局页. 进入 ...
随机推荐
- 【luogu P1082 同余方程】 题解
最近一直在学习数论,讲得很快,害怕落实的不好,所以做一道luogu的同余方程练练手. 关于x的同余方程 ax ≡ 1 mod m 那么x其实就是求a关于m的乘法逆元 ax + my = 1 对于这个不 ...
- Vue nodejs商城项目-商品的分页、排序、筛选
.分页 ,要查第3页的数据,则跳过2*8条数据,然后返回8条数据. 在实现滚动加载时,页面刚一加载完成并不需要请求所有数据,当用户下拉到页面底部时,再去请求数据并拼接到商品数据列表中. 通过vue-i ...
- 课时60.CSS的固定格式(掌握)
CSS就是用来设置样式的,美化界面的 如何验证? 打开一个京东首页 删除掉css样式 发现页面变得非常难看 由此我们验证了一个说法,css就是用来美化界面的 1.格式: <style type= ...
- Python基础—16-网络编程
网络编程 相关概念 OSI七层模型:开放系统互连参考模型.它从低到高分别是:物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. TCP/IP:在OSI七层模型的基础上简化抽象出来的一套网络协 ...
- Vue--- VueX基础 (Vuex结构图数据流向)1.1
Vuex基础 https://vuex.vuejs.org/zh-cn state --> view --> action -> state 多组件共享状态, 之前操作方式,由父组件 ...
- 【2018 ICPC南京网络赛 A】An Olympian Math Problem(数论题)
Alice, a student of grade 6, is thinking about an Olympian Math problem, but she feels so despair th ...
- 微信小程序bindtap与catchtap的区别
1.什么是事件 (1) 事件是视图层到逻辑层的通讯方式. (2) 事件可以将用户的行为反馈到逻辑层进行处理. (3) 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. (4) ...
- zabbix使用iostat命令参数监控磁盘性能
iostat命令 先说一个坑把,在开始监控的时候使用命令iostat -dtkx,得到的结果看上去没问题,但是在web监控窗口数据就说不变动,为啥呢,因为iostat这个命令得到的第一个数据始终是磁盘 ...
- Python进阶-函数默认参数
Python进阶-函数默认参数 写在前面 如非特别说明,下文均基于Python3 一.默认参数 python为了简化函数的调用,提供了默认参数机制: def pow(x, n = 2): r = 1 ...
- hack游戏攻略(梦之光芒黑客小游戏)
2019.2.11 继续玩~~还是黑客游戏闯关类的 地址:http://monyer.com/game/game1/ 直接查看页面代码: first.php就是了: 查看源代码: 这里尝试输入 两个空 ...