全局配置
配置界面、路径
可以通过配置 app.json 文件,设置 SWAN 的界面、路径、多 TAB 等。
app.json 配置项列表如下
属性 | 类型 | 必填 | 描述 |
---|---|---|---|
pages | String Array | 是 | 设置页面路径 |
window | Object | 否 | 设置页面展现 |
preloadRule | Object | 否 | 分包预下载规则 |
tabBar | Object | 否 | 底部 tab 栏的表现 |
subpackages | Object Array | 否 | 分包结构配置示例 |
示例:
{
"pages": [
"pages/index/index",
"pages/detail/detail"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
}
}
pages
pages 接受一个数组,每一项都是一个字符串,指定 SWAN App 都有哪些页面。每一项代表页面的[路径 + 文件名],数组第一项代表 SWAN 初始页面。
SWAN 中新增或减少页面的话,需要在 pages 中进行配置。
配置项中不需要加文件后缀名, SWAN 会自动解析。
如,开发目录为:
├── app.js
├── app.json
├── app.css
├── project.config.json
└── pages
└── index
├── index.swan
├── index.css
├── index.js
└── index.json
└── detail
├── detail.swan
├── detail.css
├── detail.js
└── detail.json
则需要在 app.json 中书写
{
"pages":[
"pages/index/index",
"pages/detail/detail"
]
}
window
用于设置 SWAN 的状态栏、导航条、标题、窗口背景色。
属性 | 类型 | 必填 | 描述 | 最低版本 |
---|---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如 “#000000” | - |
navigationBarTextStyle | String | white | 导航栏标题颜色,目前仅支持 black/white | - |
navigationBarTitleText | String | - | 导航栏标题文字内容 | - |
navigationStyle | String | default | 导航栏样式,仅支持以下值:default(默认样式) custom(自定义导航栏),只保留右上角胶囊按钮 | 手百版本11.1.0 |
backgroundColor | HexColor | #ffffff | 背景颜色 | - |
backgroundTextStyle | String | dark | 下拉背景字体、loading 图的样式,仅支持 dark/light | - |
enablePullDownRefresh | Boolean | false | 是否开启下拉刷新 | - |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为 px | - |
注意:
- navigationStyle 全局配置
Android
和iOS
从手百版本11.1.0开始支持, 但子页面配置支持情况Android
从手百版本11.1
开始支持,iOS
从手百版本11.2
开始支持, 做低版本兼容时,通过 swan.getSystemInfo 或者 swan.getSystemInfoSync 获取手百版本号进行兼容判断,具体见下表; - 无其它特殊说明,请使用
canIUse
或者SWAN基础库版本
进行兼容判断。
navigationStyle配置
顶bar设置 | iOS | Android | WebView组件页面 | 备注 |
---|---|---|---|---|
手百定义的顶bar | 无版本限制 | 无版本限制 | 无版本限制 | - |
顶bar全局透明设置 | 手百版本>=11.1 | 手百版本>=11.1 | 不生效 | - |
顶bar子页面透明设置 | 手百版本>=11.2 | 手百版本>=11.1 | 不生效 | 每个page的json文件可以单独配置navigationStyle |
示例:
{
"window":{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "swan接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
tabBar
用于设置客户端底部的tab栏:可通过tabBar设置tab的颜色、个数、位置、背景色等内容。
属性 | 类型 | 必填 | 描述 |
---|---|---|---|
backgroundColor | HexColor | 是 | tab 的背景色。 |
borderStyle | String | 否 | tabBar 边框颜色。仅支持 black/white 两种边框颜色,默认值为 black 。 |
color | HexColor | 是 | tab 上文字的默认颜色。 |
position | String | 否 | tabBar 的位置。 仅支持 bottom/top 两种位置设置,默认值为 bottom 。 |
list | Array | 是 | tab 的列表,列表个数2~5个。 list 接受一个数组,tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:- pagePath:已在 pages 中定义的页面路径;类型:String;必填项。- text:tab上显示的文字信息;类型:String;必填项。- iconPath:图片路径,icon 大小限制为40kb,建议尺寸为 78px*78px,不支持网络图片;类型:String;非必填项。- selectedIconPath:选中时的图片路径,icon 规格同上;类型:String;非必填项。- 当 position 为 top 时,不显示 icon 。 |
selectedColor | HexColor | 是 | tab 上的文字选中时的颜色。 |
配置全局数据
app.js 中存放全局的 JS 逻辑。
示例:
App({
onLaunch: function () {
console.log('SWAN launch');
},
onShow: function () {
console.log('SWAN展现');
},
onHide: function () {
console.log('SWAN当前处于后台');
},
onError: function () {
console.log('SWAN发生错误');
},
globalData: 'SWAN'
});
SWAN 生命周期
属性介绍:
属性 | 类型 | 描述 | 触发时机 |
---|---|---|---|
onLaunch | Function | SWAN 初始化的生命周期函数 | 当 SWAN App 初始化完成时,会触发 onLaunch(全局只触发一次) |
onShow | Function | SWAN App 展示时调用的生命周期函数 | SWAN App 从后台进入前台,触发 onShow |
onHide | Function | SWAN App 隐藏时调用的生命周期函数 | SWAN App 从前台进入后台,触发 onHide |
onLoad | Function | 监听页面加载的生命周期函数 | SWAN App 页面加载完成,触发 onLoad |
onReady | Function | 监听页面初次渲染完成的生命周期函数 | SWAN App 页面渲染完成,触发 onReady |
onUnload | Function | 监听页面卸载的生命周期函数 | 页面卸载,触发 onUnload |
onError | Function | 错误监听函数 | 当 SWAN App 发生错误时,会触发 |
原理图:
1、notify:当渲染线程初始化后,向APP服务线程派发消息,请求获取初始化渲染数据;
2、sendInitData:APP服务线程将初始化渲染数据派发给渲染线程;
3、notify:渲染线程渲染达到Ready状态后,派发消息通知APP服务线程;
4、SendData:APP服务线程触发onReady事件,向渲染线程传送数据;
说明
每次前台切后台会触发Page的onHide生命周期函数,后台切前台触发Page的onShow。