我的书签
添加书签
移除书签配置 app.json 文件
可以通过配置 app.json 文件，设置 SWAN 的界面、路径、多 TAB 等。 app.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"], "prefetches": ["https://m.baidu.com", "https://m.baidu.com?query=${query}"], "networkTimeout": { "request": 30000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }}
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 的状态栏、导航条、标题、窗口背景色。 注意：
Android和iOS从基础库版本 2.10.34 开始支持, 但子页面配置支持情况Android从基础库版本 2.10.34开始支持，iOS从基础库 3.0.39开始支持, 做低版本兼容时，通过 swan.getSystemInfo 或者 swan.getSystemInfoSync 获取百度 App版本号进行兼容判断，具体见下表；canIUse或者SWAN基础库版本进行兼容判断。 navigationStyle配置 适配提示 swan.getSystemInfo 或者 swan.getSystemInfoSync 获取。 代码示例
代码示例 - 错误写法 json文件看起来同 JavaScript 的对象表达方式十分相似，但是有所不同。 JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。{ "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "swan接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }}
{ window: { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "swan接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }}
tabBar
用于设置客户端底部的tab栏：可通过tabBar设置tab的颜色、个数、位置、背景色等内容。 代码示例 在开发者工具中预览效果
- 代码示例 在开发者工具中预览效果{ "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" }}
<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: 后台音乐播放 代码示例
{ "pages": ["pages/index/index"], "requiredBackgroundModes": ["audio"]}
注：在此处申明了后台运行的接口，开发版和体验版上可以直接生效，正式版还需通过审核。
prefetches
用于设置预请求的所有url的列表，该部分URL，会在进入小程序后自动发起请求(优于开发者代码加载)。当开发者再次发起request请求时可以增加cache参数，如果配置的prefetch请求已返回，则会直接返回请求结果，如果配置的prefetch请求还未返回，则当次request会继续之前未发送完成的request请求。 代码示例 在开发者工具中预览效果
// app.json{ prefetches: [ 'https://m.baidu.com' ]}
swan.request({ url: 'https://m.baidu.com', usePrefetchCache: true, success: res => { console.log('缓存结果:', res); }});
注意：配置项中可以增加变量，且该变量只能来自于打开小程序的调起协议中的query。如：
// app.json{ prefetches: [ 'https://m.baidu.com?id=${id}' ]}
打开小程序的协议中，也需要携带此参数：
pages/index/index?id=123
这样，再次使用request发起请求时，就可以利用上prefetches中的配置。
networkTimeout
各类网络请求的超时时间。 代码示例
"networkTimeout": { "request": 30000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000}
