百度智能小程序 配置app.json文件

可以通過配置 app.json 文件，設(shè)置 SWAN 的界面、路徑、多 TAB 等。

app.json 配置項列表

代碼示例

在開發(fā)者工具中打開

{
    "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": {
      "desc": "你的位置信息將用于小程序位置接口的效果展示" // 高速公路行駛持續(xù)后臺定位
    }
  }
}

pages

pages 接受一個數(shù)組，每一項都是一個字符串，指定 SWAN App 都有哪些頁面。每一項代表頁面的[路徑 + 文件名]，數(shù)組第一項代表 SWAN 初始頁面。

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

配置項中不需要加文件后綴名， SWAN 會自動解析。

如，開發(fā)目錄為：

├── 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"
    ]
}

提示：

• 開發(fā)者工具在 app.json 的 pages 中填寫頁面路徑可自動生成文件夾。

window

用于設(shè)置 SWAN 的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等。

注意：

• navigationStyle 全局配置Android和iOS從基礎(chǔ)庫版本 2.10.34 開始支持， 但子頁面配置支持情況Android從基礎(chǔ)庫版本 2.10.34 開始支持，iOS從基礎(chǔ)庫 3.0.39 開始支持， 做低版本兼容時，通過 swan.getSystemInfo 或者  swan.getSystemInfoSync 獲取百度 APP 版本號進行兼容判斷，具體見下表；
• 無其它特殊說明，請使用 SWAN 基礎(chǔ)庫版本進行兼容判斷。

navigationStyle 配置

適配提示

原生頂bar高度=狀態(tài)欄高度（statusBarHeight）+頂部導(dǎo)航欄高度（navigationBarHeight）；可通過  swan.getSystemInfo 或者  swan.getSystemInfoSync 獲取。

代碼示例

{
    "window": {
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "swan接口功能演示",
        "backgroundColor": "#eeeeee",
        "backgroundTextStyle": "light"
    }
}

參考示例：適配各種移動機型（包含 iPad 等設(shè)備） 

在開發(fā)者工具中打開

<view class="wrap">
	<view class="navBar">
		<view class="status-height" style="height:{{statusHeight}}px">
		</view>
		<view class="nav" style="height:{{navHeight}}px;line-height:{{navHeight}}px">
			<view class="nav-icon-back" bindtap="goBack">
				<image src="{{backIcon}}"></image>
			</view>
			<view class="nav-icon-home" bindtap="goHome">
				<image src="{{homeIcon}}"></image>
			</view>
			<view class="nav-title">{{navTitle}}
			</view>
		</view>
	</view>
</view>

Component({
    properties: {
        statusHeight: {
            type: Number,
            value: 0
        },
        navHeight: {
            type: Number,
            value: 0
        },
        navTitle: {
            type: String,
            value: ''
        },
        backIcon: {
            type: String,
            value: ''
        },
        homeIcon: {
            type: String,
            value: ''
        }
    },
 
    data: {
    }, // 私有數(shù)據(jù)，可用于模版渲染
    created: function () {
    },
 
    // 生命周期函數(shù)，可以為函數(shù)，或一個在methods段中定義的方法名
    attached: function () {
        this.getHeightInfo()
    },
 
    detached: function () { },
 
    methods: {
        getHeightInfo() {
            swan.getSystemInfo({
                success: res => {
                    this.setData({
                        statusHeight: res.statusBarHeight, //狀態(tài)欄高度
                        navHeight: res.navigationBarHeight//導(dǎo)航欄高度
                    })
                }
            })
        },
        goBack() {
            this.triggerEvent('goBack', { back: '您點擊了返回' })
        },
        goHome() {
            this.triggerEvent('goHome', { home: '您點擊了返回首頁' })
        },
    }
});

代碼示例：錯誤寫法

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

json 的 Key 必須包裹在一個雙引號中，在實踐中，編寫 JSON 的時候，忘了給 Key 值加雙引號或者是把雙引號寫成單引號是常見錯誤。

{
    window: {
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "swan接口功能演示",
        "backgroundColor": "#eeeeee",
        "backgroundTextStyle": "light"
    }
}

tabBar

用于設(shè)置客戶端底部的 tab 欄：可通過 tabBar 設(shè)置 tab 的顏色、個數(shù)、位置、背景色等內(nèi)容。

代碼示例 

在開發(fā)者工具中打開

{
    "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ā)者工具中打開

<view class="wrap">
    <view class="contentLast">
        <view class="icon-bg border-top border-bottom {{color}}">
            <view class="icon-item" data-index="index4" bindtap="setTabBarStyle">
                <image class="image" src="{{isActive4 == 'index4' ? 'https://b.bdstatic.com/searchbox/icms/searchbox/images/index-inverse-active.png' : 'https://b.bdstatic.com/searchbox/icms/searchbox/images/index-inverse-ash.png'}}" rel="external nofollow"  ></image>
                <view class="{{isActive4 == 'index4' ? 'imageNameColor' : 'imageNameColorAsh'}}">首頁</view>
            </view>
            <view class="icon-item" data-index="tinyVideo4" bindtap="setTabBarStyle">
                <image class="image" src="{{isActive4 == 'tinyVideo4' ? 'https://b.bdstatic.com/searchbox/icms/searchbox/images/video-inverse-active.png' : 'https://b.bdstatic.com/searchbox/icms/searchbox/images/video-inverse-ash.png'}}" rel="external nofollow"  ></image>
                <view class="{{isActive4 == 'tinyVideo4' ? 'imageNameColor' : 'imageNameColorAsh'}}">小視頻</view>
            </view>
            <view class="icon-item" data-index="centre4" bindtap="setTabBarStyle">
                <image class="image" src="{{isActive4 == 'centre4' ? 'https://b.bdstatic.com/searchbox/icms/searchbox/images/centre-inverse-active.png' : 'https://b.bdstatic.com/searchbox/icms/searchbox/images/centre-inverse-ash.png'}}" rel="external nofollow" ></image>
                <view class="{{isActive4 == 'centre4' ? 'imageNameColor' : 'imageNameColorAsh'}}">個人中心</view>
            </view>
        </view>
    </view>
</view>

requiredBackgroundModes

基礎(chǔ)庫 3.50.36 及以上版本支持

申明需要后臺運行的能力，類型為數(shù)組。目前支持以下項目：

audio：后臺音樂播放。

代碼示例

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

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

networkTimeout

各類網(wǎng)絡(luò)請求的超時時間。

代碼示例

 
"networkTimeout": {
    "request": 30000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
}

permission

小程序接口權(quán)限相關(guān)設(shè)置。

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

代碼示例

 
"permission": {
  "scope.userLocation": {
    "desc": "你的位置信息將用于小程序位置接口的效果展示" // 高速公路行駛持續(xù)后臺定位
  }
}

routes

基礎(chǔ)庫 3.160.3 及以上版本支持

routes 為一個數(shù)組，數(shù)組中每一項代表一組路由規(guī)則，具體包含字段為：

代碼示例

// 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": [
        {
            "path": "home", // 投放入口，scheme中的path
            "page": "pages/home/home" // 真實的物理存儲路徑
        },
        {
            "path": "list",
            "page": "pages/list/list"
        },
        {
            "path": "foo/bar",
            "page": "pages/list/list"
        }
    ]
}

更多詳見自定義路由