建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)百度小程序教程：配置app.json文件
- 配置 app.json 文件
- app.json 配置項(xiàng)列表
- pages
- 代碼示例
- window
- navigationStyle 配置
- 代碼示例 1
- 代碼示例 2：適配各種移動機(jī)型（包含 iPad 等設(shè)備）
- 代碼示例 3：錯誤寫法
- tabBar
- 代碼示例
- 自定義 tabbar
- requiredBackgroundModes
- 代碼示例：audio 后臺音樂播放
- networkTimeout
- 代碼示例
- permission
- PermissionObject 結(jié)構(gòu)
- 代碼示例
- routes
- 代碼示例
- 代碼示例
配置 app.json 文件
可以通過配置 app.json 文件，設(shè)置 SWAN 的界面、路徑、多 TAB 等。
創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)|成都網(wǎng)站維護(hù)公司|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù)，案例作品覆蓋成都柔性防護(hù)網(wǎng)等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身開發(fā)品質(zhì)網(wǎng)站。
app.json 配置項(xiàng)列表
| 屬性 | 類型 | 必填 | 描述 |
|---|---|---|---|
| pages | Array. | 是 | 設(shè)置頁面路徑 |
| window | Object | 否 | 設(shè)置頁面展現(xiàn) |
| preloadRule | Object | 否 | 分包預(yù)下載規(guī)則 |
| tabBar | Object | 否 | 底部 tab 欄的表現(xiàn) |
| requiredBackgroundModes | Array. | 否 | 需要在后臺使用的能力，如「音樂播放」 |
| subPackages | Array. | 否 | 分包結(jié)構(gòu)配置 |
| networkTimeout | Object | 否 | 網(wǎng)絡(luò)超時 |
| permission | Object | 否 | 小程序接口權(quán)限相關(guān)設(shè)置 |
| routes | Array. | 否 | 小程序自定義路由相關(guān)設(shè)置 |
| dynamicLib | Object | 否 | 引入動態(tài)庫，詳情請參考使用動態(tài)庫 |
代碼示例
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開
- JSON
{"pages": ["component/component","api/api"],"subPackages": [{"root": "subpackage","pages": ["pages/subpageone/subpageone","pages/subpagetwo/subpagetwo"]}],"window": {"navigationBarTitleText": "Demo","navigationBarBackgroundColor": "#000000","navigationBarTextStyle": "white","navigationStyle": "default","backgroundColor": "#ffffff","backgroundTextStyle": "dark","enablePullDownRefresh": "true","onReachBottomDistance":"50"},"preloadRule": {"pages/index": {"network": "all","packages": ["subpackage"]}},"tabBar": {"list": [{"pagePath": "component/component","text": "首頁","iconPath": "/images/API_normal.png","selectedIconPath": "/images/API_selected.png"},{"pagePath": "api/api","text": "詳情","iconPath": "/images/component_normal.png","selectedIconPath": "/images/component_selected.png"}],"backgroundColor" : "#ffffff","borderStyle": "white","color": "#000","selectedColor": "#6495ED"},"requiredBackgroundModes": ["audio"],"networkTimeout": {"request": 30000,"connectSocket": 10000,"uploadFile": 10000,"downloadFile": 10000},"permission": {"scope.userLocation": {// 高速公路行駛持續(xù)后臺定位"desc": "你的位置信息將用于小程序位置接口的效果展示"}}}
pages
pages 接受一個數(shù)組，每一項(xiàng)都是一個字符串，指定 SWAN App 都有哪些頁面。每一項(xiàng)代表頁面的 [路徑 + 文件名] ，默認(rèn)第一項(xiàng)為 SWAN App 首頁。
SWAN 中新增或減少頁面的話，需要在 pages 中進(jìn)行配置。
配置項(xiàng)中不需要加文件后綴名， SWAN 會自動解析。
如，開發(fā)目錄為：
├── app.js├── app.json├── app.css├── project.swan.json└── pages└── index├── index.swan├── index.css├── index.js└── index.json└── detail├── detail.swan├── detail.css├── detail.js└── detail.json
則需要在 app.json 中書寫
代碼示例
- JSON
{"pages":["pages/index/index","pages/detail/detail"]}
提示：
- 開發(fā)者工具在 app.json 的 pages 中填寫頁面路徑可自動生成文件夾。
window
用于設(shè)置 SWAN 的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等。
| 屬性 | 類型 | 默認(rèn)值 | 描述 | 最低版本 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 導(dǎo)航欄背景顏色，如 “#000000” | |
| navigationBarTextStyle | String | white | 導(dǎo)航欄標(biāo)題顏色，目前有效值 black/white | |
| navigationBarTitleText | String | 導(dǎo)航欄標(biāo)題文字內(nèi)容 | ||
| navigationStyle | String | default | 導(dǎo)航欄樣式，有效值：default(默認(rèn)樣式) custom(自定義導(dǎo)航欄)，只保留右上角膠囊按鈕 | 2.10.34 |
| backgroundColor | HexColor | #ffffff | 背景顏色 | |
| backgroundTextStyle | String | dark | 下拉背景字體、loading 圖的樣式，有效值 dark/light | |
| backgroundColorTop | HexColor | #ffffff | 頂部窗口的背景色，僅 iOS 支持 | |
| backgroundColorBottom | HexColor | #ffffff | 底部窗口的背景色，僅 iOS 支持 | |
| enablePullDownRefresh | Boolean | false | 是否開啟下拉刷新 | |
| onReachBottomDistance | Number | 50 | 頁面上拉觸底事件觸發(fā)時距頁面底部距離（單位：px | |
| textSizeAdjust | String | auto | 小程序頁面是否禁止響應(yīng)字體大小的設(shè)置，有效值：auto(默認(rèn)響應(yīng))、none(不響應(yīng)) | 基礎(chǔ)庫版本 3.200.1 |
注意：
- navigationStyle 全局配置
Android和iOS從基礎(chǔ)庫版本 2.10.34 開始支持， 但子頁面配置支持情況Android從基礎(chǔ)庫版本 2.10.34 開始支持，iOS從基礎(chǔ)庫 3.0.39 開始支持， 做低版本兼容時，通過 swan.getSystemInfo 或者 swan.getSystemInfoSync 獲取百度 APP 版本號進(jìn)行兼容判斷，具體見下表； - 無其它特殊說明，請使用 SWAN 基礎(chǔ)庫版本進(jìn)行兼容判斷。
navigationStyle 配置
| 頂 bar 設(shè)置 | iOS | Android | WebView 組件頁面 | 備注 |
|---|---|---|---|---|
| 百度 APP 定義的頂 bar | 無版本限制 | 無版本限制 | 無版本限制 | |
| 頂 bar 全局透明設(shè)置 | 基礎(chǔ)庫版本 2.10.34 | 基礎(chǔ)庫版本 2.10.34 | 不生效 | |
| 頂 bar 子頁面透明設(shè)置 | 基礎(chǔ)庫版本 2.10.34 | 基礎(chǔ)庫版本 2.10.34 | 不生效 | 每個 page 的 json 文件可以單獨(dú)配置 navigationStyle |
適配提示
原生頂bar高度=狀態(tài)欄高度（statusBarHeight）+頂部導(dǎo)航欄高度（navigationBarHeight）；可通過 swan.getSystemInfo 或者 swan.getSystemInfoSync 獲取。
代碼示例 1
- JSON
{"window": {"navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "swan接口功能演示","backgroundColor": "#eeeeee","backgroundTextStyle": "light"}}
代碼示例 2：適配各種移動機(jī)型（包含 iPad 等設(shè)備）
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開
- SWAN
- JS
{{navTitle}}
Component({properties: {statusHeight: {type: Number,value: 0},navHeight: {type: Number,value: 0},navTitle: {type: String,value: ''},backIcon: {type: String,value: ''},homeIcon: {type: String,value: ''}},// 私有數(shù)據(jù)，可用于模版渲染data: {},created: function () {},// 生命周期函數(shù)，可以為函數(shù)，或一個在methods段中定義的方法名attached: function () {this.getHeightInfo()},detached: function () { },methods: {getHeightInfo() {swan.getSystemInfo({success: res => {this.setData({// 狀態(tài)欄高度statusHeight: res.statusBarHeight,// 導(dǎo)航欄高度navHeight: res.navigationBarHeight})}})},goBack() {this.triggerEvent('goBack', { back: '您點(diǎn)擊了返回' })},goHome() {this.triggerEvent('goHome', { home: '您點(diǎn)擊了返回首頁' })},}});
代碼示例 3：錯誤寫法
json 文件看起來同 JavaScript 的對象表達(dá)方式十分相似，但是有所不同。
json 的 Key 必須包裹在一個雙引號中，在實(shí)踐中，編寫 JSON 的時候，忘了給 Key 值加雙引號或者是把雙引號寫成單引號是常見錯誤。
- JSON
{"window": {"navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "swan接口功能演示","backgroundColor": "#eeeeee","backgroundTextStyle": "light"}}
tabBar
用于設(shè)置客戶端底部的 tab 欄：可通過 tabBar 設(shè)置 tab 的顏色、個數(shù)、位置、背景色等內(nèi)容。
| 屬性 | 類型 | 必填 | 描述 |
|---|---|---|---|
| backgroundColor | HexColor | 是 | tab 的背景色 |
| borderStyle | String | 否 | tabBar 邊框顏色。有效值 black/white 兩種邊框顏色，默認(rèn)值為 black |
| color | HexColor | 是 | tab 上文字的默認(rèn)顏色 |
| list | Array | 是 | tab 的列表，列表個數(shù) 2~5 個。 list 接受一個數(shù)組，tab 按數(shù)組的順序排序，每個項(xiàng)都是一個對象，其屬性值如下： - pagePath：已在 pages 中定義的頁面路徑；類型：String；必填項(xiàng)。 - text：tab 上顯示的文字信息；類型：String；必填項(xiàng)。 - iconPath：圖片路徑，icon 大小限制為 40kb，建議尺寸為 78px*78px，不支持網(wǎng)絡(luò)圖片；類型：String；非必填項(xiàng)。 - selectedIconPath：選中時的圖片路徑，icon 規(guī)格同上；類型：String；非必填項(xiàng) |
| selectedColor | HexColor | 是 | tab 上的文字選中時的顏色 |
代碼示例
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開
- JSON
{"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首頁","iconPath":"/images/API_normal.png","selectedIconPath":"/images/API_selected.png"},{"pagePath": "pages/detail/detail","text": "詳情","iconPath":"/images/component_normal.png","selectedIconPath":"/images/component_selected.png"}],"backgroundColor" : "#ffffff","borderStyle": "white","color": "#000","selectedColor": "#6495ED"}}
自定義 tabbar
代碼示例
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開
- SWAN
- JS
首頁 小視頻 個人中心
Page({data: {color: 'firstTab',isActive: 'index1',isActive2: 'index2',isActive3: 'index3',isActive4: 'index4'},setTabBarStyle(e) {this.setData('isActive4', e.currentTarget.dataset.index);e.currentTarget.dataset.index === 'index4'? this.setData({'color': 'firstTab'}): '';console.log(this.data.color);e.currentTarget.dataset.index === 'tinyVideo4'? this.setData({'color': 'secondTab'}): '';e.currentTarget.dataset.index === 'centre4'? this.setData({'color': 'thirdTab'}): '';}});
requiredBackgroundModes
基礎(chǔ)庫 3.50.36 及以上版本支持
申明需要后臺運(yùn)行的能力，類型為數(shù)組。
代碼示例：audio 后臺音樂播放
- JSON
{"pages": ["pages/index/index"],"requiredBackgroundModes": ["audio"]}
注：在此處申明了后臺運(yùn)行的接口，開發(fā)版和體驗(yàn)版上可以直接生效，正式版還需通過審核。
networkTimeout
各類網(wǎng)絡(luò)請求的超時時間。
| 屬性 | 類型 | 必填 | 默認(rèn)值 | 說明 |
|---|---|---|---|---|
| request | Number | 否 | 60000 | swan.request 的超時時間（單位：毫秒）。 |
| connectSocket | Number | 否 | 60000 | swan.connectSocket 的超時時間（單位：毫秒）。 |
| uploadFile | Number | 否 | 60000 | swan.uploadFile 的超時時間（單位：毫秒）。 |
| downloadFile | Number | 否 | 60000 | swan.downloadFile 的超時時間（單位：毫秒）。 |
代碼示例
- JSON
"networkTimeout": {"request": 30000,"connectSocket": 10000,"uploadFile": 10000,"downloadFile": 10000}
permission
小程序接口權(quán)限相關(guān)設(shè)置。
| 屬性 | 類型 | 必填 | 默認(rèn)值 | 說明 |
|---|---|---|---|---|
| scope.userLocation | PermissionObject | 否 | 位置相關(guān)權(quán)限聲明 |
PermissionObject 結(jié)構(gòu)
| 屬性 | 類型 | 必填 | 默認(rèn)值 | 說明 |
|---|---|---|---|---|
| desc | String | 是 | 小程序獲取權(quán)限時展示的接口用途說明。最長 30 個字符 |
代碼示例
- JSON
"permission": {"scope.userLocation": {// 高速公路行駛持續(xù)后臺定位"desc": "你的位置信息將用于小程序位置接口的效果展示"}}
routes
基礎(chǔ)庫 3.160.3 及以上版本支持
更多詳見自定義路由
routes 為一個數(shù)組，數(shù)組中每一項(xiàng)代表一組路由規(guī)則，具體包含字段為：
| 屬性 | 類型 | 必填 | 描述 | 示例 |
|---|---|---|---|---|
| path | String | 是 | 訪問路徑 | “home” |
| page | String | 是 | 頁面源碼文件路徑，從小程序包根目錄開始的文件路徑 | “pages/home/index” |
代碼示例
- JSON
// app.json{"pages": ["pages/home/home","pages/list/list","pages/detail/detail"],"subPackage": [{"root": "packageA","pages": ["pages/home/home","pages/list/list","pages/detail/detail"]}],"routes": [{// 投放入口，scheme中的path"path": "home",// 真實(shí)的物理存儲路徑"page": "pages/home/home"},{"path": "list","page": "pages/list/list"},{"path": "foo/bar","page": "pages/list/list"}]}
網(wǎng)頁題目：創(chuàng)新互聯(lián)百度小程序教程：配置app.json文件
文章起源：http://fisionsoft.com.cn/article/cdiejje.html
