微信小程序-page
一 什么是page()
page(),是一个函数,用来注册一个页面,
接受一个object参数,
指定页面的初始数据,生命周期函数,事件处理函数
等等
object参数说明:
(1)data (object)
页面的初始数据
初始化数据
初始化数据将作为页面的第一次渲染,
data将会以JSON的形式有逻辑层传至渲染层
所以其数据必须是可以
转成JSON的格式
(字符串,数字,布尔值,对象,数组)
渲染层可以通过WXML对数据进行绑定
(2)onLoad(function)
生命周期函数--监听页面加载
页面加载onLoad
一个页面只会调用一次
接收页面参数可以获取
wx.navigateTo,wx.redirectTo, <navigator/>中的query
(3)onReady (function)
生命周期函数--监听页面初次渲染完成
(4)onShow (function)
生命周期函数--监听页面显示
页面显示onShow
每次打开页面都会调用一次
页面初次渲染完成onReady
一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互
对界面的设置如
wx.setNavigationBarTitle请在onReady之后设置
(5)onHide (function)
生命周期函数--监听页面隐藏
页面隐藏onHide
当navigateTo或者底部tab切换时候调用
(6)onUnload(function)
生命周期函数--监听页面卸载
页面卸载onUnload
当redirectTo或者navigateBack的时候调用
(7)onPullDownRefresh (function)
页面相关事件处理函数--监听用户下拉动作
页面相关事件的处理函数
onPullDownRefresh:下拉刷新
监听用户下拉刷新事件
需要在config的window选项中开启enablePullDownRefresh
当处理完数据刷新后,
wx.stopPullDownRefresh可以停止当前页面的下拉刷新
(8)onReachBottom (function)
页面上拉触底事件的处理函数
(9)其他 (Any)
开发者可以添加任意的函数或者数据到object参数中,
在页面的函数中用this可以访问
二 事件处理函数
除了初始化数据和生命周期函数,
page中还可以定义一些特殊的函数,
事件处理函数,
在渲染层可以在组件中加入事件绑定,
当达到触发事件后,
就会执行page中定义的事件处理函数
(1)Page.prototype.setData()
setData
函数用于将数据从逻辑层发送到视图层,
同时改变对应的 this.data的值
注意:
直接修改 this.data 无效,
无法改变页面的状态,
还会造成数据不一致。
单次设置的数据不能超过1024kB,
请尽量避免一次设置过多的数据
setData()参数格式
接受一个对象,
以key,value的形式表示将this.data中的key对应的值改为value
key可以非常灵活,以数据路径的形式给出
(2)getCurrentPages()
getCurrentPages() 函数用于获取当前页面栈的实例,
以数组形式按栈的顺序给出,第一个元素为首页,最后一个参数是当前页
注意:不要尝试修改页面栈,会导致路由以及页面状态错误
三 页面栈
框架以栈的形式维护了当前的所有页面,当发生路由切换的时候,页面栈的表现如下:
初始化 新页面入栈
打开新页面 新页面入栈
页面重定向 当前页面出栈,新页面入栈
页面返回 页面不断出栈,直到目标返回页,新页面入栈
Tab 切换 当前页面出栈,新页面入栈
四 生命周期
五 页面的路由
在小程序中,所有页面的路由全部由框架进行管理,对于路由的触发方式以及页面生命周期函数如下:
路由方式——触发时机——路由后页面——路由当前页
(1)
初始化——
小程序打开的第一个页面——onLoad,onShow
(2)
打开新页面——
调用API(wx.navigateTo)或者使用组件<navigator/>——onLoad,onShow——
onHide
(3)
页面重定向——
调用 API (wx.redirectTo)或使用组件 <navigator />——onLoad,onShow——
onUnload
(4)
页面返回——
调用API(wx.navigateBack)或者用户按左上角返回按钮——onShow——
onUnload(多层页面返回每个页面都会按顺序触发onUnload)
(5)
Tab 切换——
多 Tab 模式下用户切换 Tab——
第一次打开 onLoad,onshow;否则 onShow——
onHide
微信小程序-page的更多相关文章
- 微信小程序-Page生命周期
QQ讨论群:785071190 微信小程序开发之前我们还需认识一下小程序页面的生命周期,丛"微信小程序-代码构成"一文中我们可以了解到小程序页面中有一个.js的文件,这篇博文我们来 ...
- 微信小程序 --- page.js文件
page.js文件是写当前 page.wxml 页面的 JS 脚本文件: 示例: //获取应用实例 const app = getApp() Page({ data: { navComOneOnOff ...
- 微信小程序 --- page.json文件
page.json 文件用于配置当前目录.page.json文件里的配置可以修改 app.json 配置里面的 window:不能覆盖app.json文件里面的 tabBar / 网络超时/ debu ...
- 扩展微信小程序 Page 构造函数,修改生命周期函数
不BB,直接正题 一. 将公共方法绑定到Page上 单个绑定 const oldPage = Page Page = function(app) { // 注意公共函数的名字不要重复,否则覆盖 app ...
- 微信小程序 Page构造函数重写
//utils/utils.js const oldPage = Page; console.log(oldPage) Page = function (app) { //定义新函数 app.newS ...
- 微信小程序page的生命周期和音频播放及监听
一.界面的生命周期 /** * 监听页面加载, * 页面加载中 */ onLoad:function(){ var _this = this console.log('index---------on ...
- 微信小程序个人心得
尊重原创:http://blog.csdn.net/qq_28832135/article/details/52796048 昨天看了一下微信小程序官方文档,总结一下自己学习的个人心得. 首先从官方文 ...
- 微信小程序心得
首先从官方文档给的框架说起,微信小程序官方文档给出了app.js, app.json, app.wxss. 先从这三个文件说起. - app.js 这个文件是整个小程序的入口文件,开发者的逻辑代码在这 ...
- [转]微信小程序,开发大起底
本文转自:http://blog.csdn.net/baiyuzhong2012/article/details/54378497 作者简介:张智超,北京微函工坊开发工程师,CSDN微信开发知识库特邀 ...
随机推荐
- vector iterator not incrementable For information on how your program can cause an an assertion Failure, see the Visual c + + documentation on asserts
#include <list> using namespace std; int _tmain(int argc, _TCHAR* argv[]) { list<int> sl ...
- redis3.0.6安装配置
运行linux客户端 1 安装依赖 yum install gcc-c++ -y(安装gcc) 2 创建安装目录.编译.安装 mkdir -p /usr/local/redis(创建安 ...
- GDB+GdbServer: ARM程序调试
arm-linux-gdb+gdbserver环境搭建以及远程调试 GDB+GdbServer: ARM程序调试 嵌入式arm linux环境中gdb+gdbserver调试 建立交叉调试环境 编译过 ...
- ThinkPHP 3.2 中获取所有函数方法名,以及注释,完整可运行
<?php namespace Home\Controller; use Common\Controller\BaseController; class AuthController exten ...
- 一个.net Cookie组件的bug引发的题外话
在.net里,做过Http模拟发送请求的朋友们应该遇到过,有个时候无论怎么努力,都没办法让Cookie跟网页用浏览器所收集的一样,其中原因除了有些Cookie大概是ReadOnly之外,似乎另有隐情: ...
- Unity 4.x 各版本IOS IL2CPP对比
不同Unity版本IL2CPP对比 Unity版本 C++代码总行数 泛型相关行数 Attribute相关行数 IPA大小 纯64位 64位+32位 备注 4.6.4f1 约3302万行 约2508万 ...
- js取消radio选中 反选
var radio=document.createElement("input");radio.type="radio";radio.onclick = fun ...
- TimesTen 应用层数据库缓存学习:4. 仅仅读缓存
在运行本文样例前.首先先运行TimesTen 应用层数据库缓存学习:2. 环境准备中的操作. Read-only Cache Group的概念 仅仅读缓存组例如以下图: 仅仅读缓存组(Read-Onl ...
- Python-正确使用Unicode
正确处理文本,特别是正确处理Unicode.是个老生常谈的问题,有时甚至会难倒经验丰富的开发者.并不是因为这个问题很难,而是因为对软件中的文本,开发者没有正确理解一些关键概念及其表示方法.在Stack ...
- unity3d常用控件
直接上代码,就能看懂了. private string txt1; private string pwd1; private int tool1; private bool isMuted; priv ...