百度小程序 二

全局配置

配置界面、路径

可以通过配置 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。

---