[color=rgba(0, 0, 0, 0.65098)]App代表顶层应用,管理所有页面和全局数据,以及提供生命周期方法。它也是一个构造方法,生成App实例。一个小程序就是一个App实例。 [color=rgba(0, 0, 0, 0.65098)]每个小程序的顶层一般包含三个文件。
- app.js:应用逻辑
- app.acss:应用样式(可选)
- app.json:应用配置
[color=rgba(0, 0, 0, 0.65098)]下面是一个简单的 app.json。 { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "defaultTitle": "Demo" }}[color=rgba(0, 0, 0, 0.65098)]上面配置指定小程序包含两个页面,以及应用窗口的默认标题是 Demo。 [color=rgba(0, 0, 0, 0.65098)]App 提供四个事件,可以设置钩子方法。
- onLaunch:小程序启动
- onShow:小程序切换到前台
- onHide:小程序切换到后台
- onError: 小程序出错
[color=rgba(0, 0, 0, 0.65098)]一个简单的app.js代码如下。 App({ onLaunch(options) { // 小程序初始化 }, onShow(options) { // 小程序显示 }, onHide() { // 小程序隐藏 }, onError(msg) { console.log(msg) }, globalData: { foo: true, }})App()[color=rgba(0, 0, 0, 0.65098)]App() 接受一个 object 作为参数,用来配置小程序的生命周期等。 [color=rgba(0, 0, 0, 0.65098)]参数说明: 属性 类型 描述 触发时机
onLaunchFunction监听小程序初始化当小程序初始化完成时触发,全局只触发一次
onShowFunction监听小程序显示当小程序启动,或从后台进入前台显示时触发
onHideFunction监听小程序隐藏当小程序从前台进入后台时触发
onErrorFunction监听小程序错误当小程序发生 js 错误时触发[color=rgba(0, 0, 0, 0.65098)]前台、后台定义: 用户点击左上角关闭,或者按了设备 Home 键离开支付宝时,小程序并不会直接销毁,而是进入了后台,当再次进入支付宝或再次打开小程序时,又会从后台进入前台。 [color=rgba(0, 0, 0, 0.65098)]只有当小程序进入后台一定时间,或占用系统资源过高,才会被真正销毁。 onLaunch/onShow 方法的参数属性 类型 描述
queryObject当前小程序的 query
pathString当前小程序的页面地址[color=rgba(0, 0, 0, 0.65098)]注意 query 从启动参数的 query 字段解析而来, path 从启动参数 page 字段解析而来。 例如 url 如下。 alipays://platformapi/startapp?appId=1999&query=number%3D1&page=x%2Fy%2Fz[color=rgba(0, 0, 0, 0.65098)]其中的query参数解析如下。 number%3D1 === encodeURIComponent('number=1')[color=rgba(0, 0, 0, 0.65098)]其中的page参数解析如下。 x%2Fy%2Fz === encodeURIComponent('x/y/z')[color=rgba(0, 0, 0, 0.65098)]page 忽略时默认为首页 [color=rgba(0, 0, 0, 0.65098)]那么,当用户第一次启动小程序可以从 onLaunch 方法中获取这个参数,或者小程序在后台时被重新用 schema 打开也可以从 onShow 方法中获取这个参数。 App({ onLaunch(options) { // 第一次打开 // options.query == {number:1} }, onShow(options) { // 从后台被 scheme 重新打开 // options.query == {number:1} },})[color=rgba(0, 0, 0, 0.65098)]注意: 不要在 onShow 中进行 redirectTo/navigateTo 等操作页面栈的行为。 getApp()[color=rgba(0, 0, 0, 0.65098)]我们提供了全局的getApp()函数,可以获取到小程序实例,一般用在各个子页面之中获取顶层应用。 var app = getApp()console.log(app.globalData) // 获取 globalData[color=rgba(0, 0, 0, 0.65098)]注意:
- App()必须在 app.js 里调用,且不能调用多次。
- 不要在定义于 App() 内定义的函数中调用 getApp(),使用 this 就可以拿到 app 实例。
- 不要在 onLaunch 里调用getCurrentPages(),这个时候 page 还没有生成。
- 通过 getApp() 获取实例之后,不要私自调用生命周期函数。
[color=rgba(0, 0, 0, 0.65098)]全局的数据可以在 App() 中设置,各个子页面通过全局函数 getApp() 可以获取全局的应用实例。下面是一个例子。 // app.jsApp({ globalData: 1})// a.js// localValue 只在 a.js 有效var localValue = 'a'// 生成 app 实例var app = getApp()// 拿到全局数据,并改变它app.globalData++// b.js// localValue 只在 b.js 有效var localValue = 'b'// 如果 a.js 先运行,globalData 会返回 2console.log(getApp().globalData)[color=rgba(0, 0, 0, 0.65098)]上面代码中,a.js和b.js都声明了变量localValue,它们不会互相影响,因为各个脚本声明的变量和函数只在该文件中有效。 app.json[color=rgba(0, 0, 0, 0.65098)]app.json用于全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 [color=rgba(0, 0, 0, 0.65098)]以下是一个包含了部分配置选项的简单配置app.json。 { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "defaultTitle": "Demo" }}[color=rgba(0, 0, 0, 0.65098)]app.json配置项如下。 文件 类型 必填 描述
pagesString Array是设置页面路径
windowObject否设置默认页面的窗口表现
tabBarObject否设置底部 tab 的表现[color=rgba(0, 0, 0, 0.65098)](1)pages [color=rgba(0, 0, 0, 0.65098)]pages属性是一个数组,每一项都是字符串,用来指定小程序的页面。每一项代表对应页面的路径信息,数组的第一项代表小程序的首页。小程序中新增/减少页面,都需要对 pages数组进行修改。 [color=rgba(0, 0, 0, 0.65098)]页面路径不需要写 js 后缀,框架会自动去加载同名的.json、.js、.axml、.acss文件。 [color=rgba(0, 0, 0, 0.65098)]举例来说,如果开发目录为: pages/pages/index/index.axmlpages/index/index.jspages/index/index.acsspages/logs/logs.axmlpages/logs/logs.jsapp.jsapp.jsonapp.acss[color=rgba(0, 0, 0, 0.65098)]app.json就要写成下面的样子。 { "pages":[ "pages/index/index", "pages/logs/logs" ]}[color=rgba(0, 0, 0, 0.65098)](2)window [color=rgba(0, 0, 0, 0.65098)]window属性用于设置小程序通用的的状态栏、导航条、标题、窗口背景色。 [color=rgba(0, 0, 0, 0.65098)]子属性包括 titleBarColor defaultTitle pullRefresh allowsBounceVertical。 文件 类型 必填 描述
defaultTitleString否页面标题
pullRefreshBoolean否是否允许下拉刷新。默认 false
allowsBounceVerticalString(YES/NO)否页面是否支持纵向拽拉超出实际内容。默认 YES
titleBarColor十进制否导航栏背景色[color=rgba(0, 0, 0, 0.65098)]下面是一个例子。 { "window":{ "defaultTitle": "支付宝接口功能演示" }}[color=rgba(0, 0, 0, 0.65098)](3)tabBar [color=rgba(0, 0, 0, 0.65098)]如果你的小程序是一个多 tab 应用(客户端窗口的底部栏可以切换页面),那么可以通过tabBar配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。 [color=rgba(0, 0, 0, 0.65098)]注意,通过页面跳转(my.navigateTo)或者页面重定向(my.redirectTo)所到达的页面,即使它是定义在 tabBar 配置中的页面,也不会显示底部的 tab 栏。另外,tabBar 的第一个页面必须是首页。 [color=rgba(0, 0, 0, 0.65098)]tabBar 配置 文件 类型 必填 描述
textColorHexColor否文字颜色
selectedColorHexColor否选中文字颜色
backgroundColorHexColor否背景色
itemsArray是每个 tab 配置[color=rgba(0, 0, 0, 0.65098)]每个 item 配置 文件 类型 必填 描述
pagePathString是设置页面路径
nameString是名称
iconString否平常图标路径
activeIconString否高亮图标路径[color=rgba(0, 0, 0, 0.65098)]icon 推荐大小为 60*60px 大小,系统会对任意传入的图片非等比拉伸/缩放。 [color=rgba(0, 0, 0, 0.65098)]例如 { "tabBar": { "textColor": "#dddddd", "selectedColor": "#49a9ee", "backgroundColor": "#ffffff", "items": [ { "pagePath": "pages/index/index", "name": "首页" }, { "pagePath": "pages/logs/logs", "name": "日志" } ] }}
|