配置 app.json 文件

可以通过配置 app.json 文件，设置 SWAN 的界面、路径、多 TAB 等。

app.json 配置项列表

代码示例

在开发者工具中打开

在开发者工具中打开

在 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": {
        // 高速公路行驶持续后台定位
        "desc": "你的位置信息将用于小程序位置接口的效果展示" 
    }
  }
}

pages

pages 接受一个数组，每一项都是一个字符串，指定 SWAN App 都有哪些页面。每一项代表页面的 [路径 + 文件名] ，默认第一项为 SWAN App 首页。

SWAN 中新增或减少页面的话，需要在 pages 中进行配置。

配置项中不需要加文件后缀名， SWAN 会自动解析。

如，开发目录为：

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

提示：

• 开发者工具在 app.json 的 pages 中填写页面路径可自动生成文件夹。

window

用于设置 SWAN 的状态栏、导航条、标题、窗口背景色等。

注意：

• navigationStyle 全局配置Android和iOS从基础库版本 2.10.34 开始支持， 但子页面配置支持情况Android从基础库版本 2.10.34 开始支持，iOS从基础库 3.0.39 开始支持， 做低版本兼容时，通过 swan.getSystemInfo 或者 swan.getSystemInfoSync 获取百度 APP 版本号进行兼容判断，具体见下表；
• 无其它特殊说明，请使用 SWAN 基础库版本进行兼容判断。

navigationStyle 配置

适配提示

原生顶bar高度=状态栏高度（statusBarHeight）+顶部导航栏高度（navigationBarHeight）；可通过 swan.getSystemInfo 或者 swan.getSystemInfoSync 获取。

代码示例 1

• JSON

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

代码示例 2：适配各种移动机型（包含 iPad 等设备）

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

<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: {
    }, 
    created: function () {
    },
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () {
        this.getHeightInfo()
    },
    detached: function () { },
    methods: {
        getHeightInfo() {
            swan.getSystemInfo({
                success: res => {
                    this.setData({
                        // 状态栏高度
                        statusHeight: res.statusBarHeight, 
                        // 导航栏高度
                        navHeight: res.navigationBarHeight
                    })
                }
            })
        },
        goBack() {
            this.triggerEvent('goBack', { back: '您点击了返回' })
        },
        goHome() {
            this.triggerEvent('goHome', { home: '您点击了返回首页' })
        },
    }
});

代码示例 3：错误写法

json 文件看起来同 JavaScript 的对象表达方式十分相似，但是有所不同。

json 的 Key 必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

• JSON

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

tabBar

用于设置客户端底部的 tab 栏：可通过 tabBar 设置 tab 的颜色、个数、位置、背景色等内容。

代码示例

在开发者工具中打开

在开发者工具中打开

在 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

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

<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'}}" ></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'}}" ></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'}}"></image>
                <view class="{{isActive4 == 'centre4' ? 'imageNameColor' : 'imageNameColorAsh'}}">个人中心</view>
            </view>
        </view>
    </view>
</view>

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

基础库 3.50.36 及以上版本支持

申明需要后台运行的能力，类型为数组。

代码示例：audio 后台音乐播放

• JSON

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

注：在此处申明了后台运行的接口，开发版和体验版上可以直接生效，正式版还需通过审核。

networkTimeout

各类网络请求的超时时间。

代码示例

• JSON

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

permission

小程序接口权限相关设置。

PermissionObject 结构

代码示例

• JSON

"permission": {
  "scope.userLocation": {
    // 高速公路行驶持续后台定位
    "desc": "你的位置信息将用于小程序位置接口的效果展示" 
  }
}

routes

基础库 3.160.3 及以上版本支持

更多详见自定义路由

routes 为一个数组，数组中每一项代表一组路由规则，具体包含字段为：

代码示例

• 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"
        }
    ]
}