新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)百度小程序教程：配置app.json文件

配置 app.json 文件
- app.json 配置項列表
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īng)驗，為許多企業(yè)提供了網(wǎng)站定制設(shè)計服務(wù)，案例作品覆蓋成都柔性防護(hù)網(wǎng)等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身開發(fā)品質(zhì)網(wǎng)站。

app.json 配置項列表

屬性	類型	必填	描述
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ā)者工具中打開

在 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ù)組，每一項都是一個字符串，指定 SWAN App 都有哪些頁面。每一項代表頁面的 [路徑 + 文件名] ，默認(rèn)第一項為 SWAN App 首頁。

SWAN 中新增或減少頁面的話，需要在 pages 中進(jìn)行配置。

配置項中不需要加文件后綴名， 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 文件可以單獨配置 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ā)者工具中打開

在 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: '您點擊了返回' })
  
  
   },
  
  
   goHome() {
  
  
   this.triggerEvent('goHome', { home: '您點擊了返回首頁' })
  
  
   },
  
  
   }
  
  
  });

代碼示例 3：錯誤寫法

json 文件看起來同 JavaScript 的對象表達(dá)方式十分相似，但是有所不同。

json 的 Key 必須包裹在一個雙引號中，在實踐中，編寫 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ù)組的順序排序，每個項都是一個對象，其屬性值如下： - pagePath：已在 pages 中定義的頁面路徑；類型：String；必填項。 - text：tab 上顯示的文字信息；類型：String；必填項。 - iconPath：圖片路徑，icon 大小限制為 40kb，建議尺寸為 78px*78px，不支持網(wǎng)絡(luò)圖片；類型：String；非必填項。 - selectedIconPath：選中時的圖片路徑，icon 規(guī)格同上；類型：String；非必填項
selectedColor	HexColor	是	tab 上的文字選中時的顏色

代碼示例

在開發(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ā)者工具中打開

在 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 及以上版本支持

申明需要后臺運行的能力，類型為數(shù)組。

代碼示例：audio 后臺音樂播放

JSON

 
 
 
  
  
  {
  
  
   "pages": ["pages/index/index"],
  
  
   "requiredBackgroundModes": ["audio"]
  
  
  }

注：在此處申明了后臺運行的接口，開發(fā)版和體驗版上可以直接生效，正式版還需通過審核。

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ù)組中每一項代表一組路由規(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", 
  
  
   // 真實的物理存儲路徑
  
  
   "page": "pages/home/home" 
  
  
   },
  
  
   {
  
  
   "path": "list",
  
  
   "page": "pages/list/list"
  
  
   },
  
  
   {
  
  
   "path": "foo/bar",
  
  
   "page": "pages/list/list"
  
  
   }
  
  
   ]
  
  
  }

分享標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：配置app.json文件
分享鏈接：http://www.dlmjj.cn/article/cdiejje.html

日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

新聞中心

配置 app.json 文件

app.json 配置項列表

pages

代碼示例

window

navigationStyle 配置

代碼示例 1

代碼示例 2：適配各種移動機(jī)型（包含 iPad 等設(shè)備）

代碼示例 3：錯誤寫法

tabBar

代碼示例

自定義 tabbar

requiredBackgroundModes

代碼示例：audio 后臺音樂播放

networkTimeout

代碼示例

permission

PermissionObject 結(jié)構(gòu)

代碼示例

routes

代碼示例

其他資訊