开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情

小程序页面样式

在 /pages 目录中的 .acss 文件用于定义页面样式。

每个页面中的根元素为 page，需要设置页面高度或背景色时，可按如下方式:
如果在app.acss设置page的话那么每个页面都生效。

页面样式隔离（样式的作用域）

默认情况下，页面的样式将对外产生影响。从基础库版本 [2.7.2]开始，可以在页面的 .json 文件中配置 styleIsolation，避免页面的样式影响到外部。例如

该选项支持以下取值：

apply-shared 表示 app.acss 样式以及其他（设置了 shared 的其他页面和自定义组件）的样式将影响到当前页面，但当前页面 acss 中指定的样式不会影响外部。
shared（默认）表示 app.acss 样式以及其他（设置了 shared 的其他页面和自定义组件）的样式将影响到当前页面，当前页面 acss 中指定的样式也会影响到外部

页面的运行机制

Page（object：object）

在 /pages 目录的 .js 文件中，定义 Page()，用于注册一个小程序页面，接收一个 object 作为属性，用来指定页面的初始数据、生命周期回调、事件处理等。

页面生命周期

对于一个 page 实例来说，生命周期包含 onLoad、onShow、onReady、onHide、onUnload。分别在页面的启动过程的不同阶段，以及后续操作响应时触发，具体可以查看页面状态流转。

页面状态流转

New：新创建的页面实例，未进行业务启动初始化。
Inited：已完成业务启动过程 onLoad/onShow 初始化，已收集得到首屏需要的 data 数据，准备进行渲染。
Readied：已完成首屏渲染。
Hidden：监听到 离开页面的行为 而触发 onHide 进入离开状态。
Unloaded：监听到 销毁页面的行为 而触发 onUnload 进入已销毁状态（该状态下所有 setData 操作无效）。
说明： onLoad、onReady、onUnload 只会被执行一次，而 onHide、onShow 则会执行多次。

页面数据对象 data

通过设置 data 指定页面的初始数据。

data 可以被设置为对象类型，每个页面初始化时会 浅拷贝 该对象并作为当前页面的数据。
data 也可以被设置为函数类型，每个页面初始化时会执行该函数，并将返回值作为当前页面的数据。

对象类型

在这种使用方式下，对 data 的原地修改会被保留下来，当页面推出再次进入该页面时，data 是被修改后的值。

函数类型

注意： 不要直接修改 this.data，无法改变页面的状态，还会造成数据不一致。例如

生命周期函数

onLoad（query：object）

页面初始化是触发。一个页面只会调用一次。query来源于my.navigateTo和my.redirectTo等接口URL字段的参数部分。例如：path?key1=value1&key2=value2）。基础库会将该部份字符串内容解析为 Object

onShow（）

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

onReady（）

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

onHide（）

页面隐藏/切入后台时触发。如 my.navigateTo 到其它页面或底部 tab 切换等。

onUnload()

页面卸载时触发。如 my.redirectTo 或 my.navigateBack 到其它页面等。

页面事件处理函数

onShareAppMessage(options: Object)

在 Page 中定义 onShareAppMessage 函数，设置该页面的分享信息。

开发者可通过传入参数自定义小程序分享内容（例如：标题、描述、图片），用户通过点击或者复制分享的内容可以快速打开小程序，进入指定页面。目前支持的分享渠道有：支付宝朋友动态、支付宝好友、钉钉、新浪微博、微信、QQ。

每个 Page 页面的右上角菜单中默认有分享按钮；onShareAppMessage 函数只自定义分享的内容，不影响分享功能。
用户点击分享按钮的时候会调用。
此事件需要返回一个对象（Object）类型，用于自定义分享内容。
分享图片中的二维码的有效期为 60 天，若需要长期有效的二维码，请登录 [开放平台控制台] > 我的应用 > 进入小程序应用详情页 > 小程序码 中生成。
小程序在 1.1.0+ 版本中开始支持 open-type 为 share 的按钮触发分享。
从基础库 [1.24.13]、[2.6.7] 版本开始支持 async 写法，可通过 my.canIUse('page.onShareAppMessage.async') 检测是否支持。
示例代码：

按钮触发分享方式示例代码

返回值

onShareAppMessage 执行后必须返回一个分享对象，用于自定义分享内容。

onTitleClick()

点击标题时触发

onOptionMenuClick（）

点击导航栏额外图标触发

onPullDownRefresh({from: `manual`|`code`})

下拉刷新时触发。需要先在 [app.json] 的 window 选项中开启 pullRefresh 。当处理完数据刷新后，my.stopPullDownRefresh 可以停止当前页面的下拉刷新。

from 的值是 code 表示 startPullDownRefresh 触发的事件；值是 manual 表示用户下拉触发的下拉事件。

onTabItemTap(object: Object)

点击 tabItem 时触发

onPageScroll(object: Object)

页面滚动时触发。

onReachBottom()

上拉触底时触发。 onReachBottom()是在上拉触底时才会触发，如果页面已经在页面底部继续上拉是不会再次触发。可以配合 my.pageScrollTo 向上滚动一点位置或者在底部增加数据等方式让页面不是处在底部位置达到可以连续上拉触发 onReachBottom()的效果

events（接收到触发事件的时间对象,一些监听的方法或自定义函数，能够更加的清晰分类的效果）

为了使代码更加简洁，提供了新的事件处理对象 events。已有的页面处理事件函数跟直接在 page 实例上暴露的事件函数等价。
注意：

events 从基础库 1.13.7 版本开始支持。
请正确区分页面事件函数与 events 内同名事件函数的基础库版本要求。以下是 events 支持的事件函数列表：

Page.prototype.setData(data: Object, callback: Function)

setData 会将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。 Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message、a.b.c.d，可以不需要在 this.data 中预先定义。使用过程中，需要注意以下几点：

直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。
仅支持设置可 JSON 化的数据。
请尽量避免一次设置过多的数据和频繁多次调用 setData()，两种情况都会影响性能。
请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

$apliceData(data:object,callback:function)

可以通过my.canIUse(做版本兼容处理）。1.7.2之后才支持。
同样用于将数据从逻辑层发送到视图层，但是相比于setData，在处理长列表的时候，其具有更高的性能。
Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message、a.b.c.d，可以不需要在 this.data 中预先定义。value 为一个数组（格式：[start, deleteCount, ...items]）, 数组的第一个元素为操作的起始位置，第二个元素为删除的元素的个数，剩余的元素均为插入的数据。对应 es5 中数组的 splice 方法示例代码：