创新互联百度小程序教程:配置app.json文件

  • 配置 app.json 文件
    • app.json 配置项列表
  • pages
    • 代码示例
  • window
    • navigationStyle 配置
    • 代码示例 1
    • 代码示例 2:适配各种移动机型(包含 iPad 等设备)
    • 代码示例 3:错误写法
  • tabBar
    • 代码示例
    • 自定义 tabbar
  • requiredBackgroundModes
    • 代码示例:audio 后台音乐播放
  • networkTimeout
    • 代码示例
  • permission
    • PermissionObject 结构
    • 代码示例
  • routes
    • 代码示例

    配置 app.json 文件

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

    创新互联专注于网站建设|成都网站维护公司|优化|托管以及网络推广,积累了大量的网站设计与制作经验,为许多企业提供了网站定制设计服务,案例作品覆盖成都柔性防护网等行业。能根据企业所处的行业与销售的产品,结合品牌形象的塑造,量身开发品质网站。

    app.json 配置项列表

    属性 类型 必填 描述
    pagesArray.设置页面路径
    windowObject设置页面展现
    preloadRuleObject分包预下载规则
    tabBarObject底部 tab 栏的表现
    requiredBackgroundModesArray.需要在后台使用的能力,如「音乐播放」
    subPackagesArray.分包结构配置
    networkTimeoutObject网络超时
    permissionObject小程序接口权限相关设置
    routesArray.小程序自定义路由相关设置
    dynamicLibObject引入动态库,详情请参考使用动态库

    代码示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • JSON
     
     
     
    1. {
    2. "pages": [
    3. "component/component",
    4. "api/api"
    5. ],
    6. "subPackages": [
    7. {
    8. "root": "subpackage",
    9. "pages": [
    10. "pages/subpageone/subpageone",
    11. "pages/subpagetwo/subpagetwo"
    12. ]
    13. }
    14. ],
    15. "window": {
    16. "navigationBarTitleText": "Demo",
    17. "navigationBarBackgroundColor": "#000000",
    18. "navigationBarTextStyle": "white",
    19. "navigationStyle": "default",
    20. "backgroundColor": "#ffffff",
    21. "backgroundTextStyle": "dark",
    22. "enablePullDownRefresh": "true",
    23. "onReachBottomDistance":"50"
    24. },
    25. "preloadRule": {
    26. "pages/index": {
    27. "network": "all",
    28. "packages": ["subpackage"]
    29. }
    30. },
    31. "tabBar": {
    32. "list": [
    33. {
    34. "pagePath": "component/component",
    35. "text": "首页",
    36. "iconPath": "/images/API_normal.png",
    37. "selectedIconPath": "/images/API_selected.png"
    38. },
    39. {
    40. "pagePath": "api/api",
    41. "text": "详情",
    42. "iconPath": "/images/component_normal.png",
    43. "selectedIconPath": "/images/component_selected.png"
    44. }
    45. ],
    46. "backgroundColor" : "#ffffff",
    47. "borderStyle": "white",
    48. "color": "#000",
    49. "selectedColor": "#6495ED"
    50. },
    51. "requiredBackgroundModes": ["audio"],
    52. "networkTimeout": {
    53. "request": 30000,
    54. "connectSocket": 10000,
    55. "uploadFile": 10000,
    56. "downloadFile": 10000
    57. },
    58. "permission": {
    59. "scope.userLocation": {
    60. // 高速公路行驶持续后台定位
    61. "desc": "你的位置信息将用于小程序位置接口的效果展示"
    62. }
    63. }
    64. }

    pages

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

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

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

    如,开发目录为:

     
     
     
    1. ├── app.js
    2. ├── app.json
    3. ├── app.css
    4. ├── project.swan.json
    5. └── pages
    6. └── index
    7. ├── index.swan
    8. ├── index.css
    9. ├── index.js
    10. └── index.json
    11. └── detail
    12. ├── detail.swan
    13. ├── detail.css
    14. ├── detail.js
    15. └── detail.json

    则需要在 app.json 中书写

    代码示例

    • JSON
     
     
     
    1. {
    2. "pages":[
    3. "pages/index/index",
    4. "pages/detail/detail"
    5. ]
    6. }

    提示

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

    window

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

    属性 类型 默认值 描述 最低版本
    navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 “#000000”
    navigationBarTextStyleStringwhite导航栏标题颜色,目前有效值 black/white
    navigationBarTitleTextString导航栏标题文字内容
    navigationStyleStringdefault导航栏样式,有效值:default(默认样式) custom(自定义导航栏),只保留右上角胶囊按钮2.10.34
    backgroundColorHexColor#ffffff背景颜色
    backgroundTextStyleStringdark下拉背景字体、loading 图的样式,有效值 dark/light
    backgroundColorTopHexColor#ffffff顶部窗口的背景色,仅 iOS 支持
    backgroundColorBottomHexColor#ffffff底部窗口的背景色,仅 iOS 支持
    enablePullDownRefreshBooleanfalse是否开启下拉刷新
    onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离(单位:px
    textSizeAdjustStringauto小程序页面是否禁止响应字体大小的设置,有效值:auto(默认响应)、none(不响应)基础库版本 3.200.1

    注意

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

    navigationStyle 配置

    顶 bar 设置 iOS Android WebView 组件页面 备注
    百度 APP 定义的顶 bar无版本限制无版本限制无版本限制
    顶 bar 全局透明设置基础库版本 2.10.34基础库版本 2.10.34不生效
    顶 bar 子页面透明设置基础库版本 2.10.34基础库版本 2.10.34不生效每个 page 的 json 文件可以单独配置 navigationStyle

    适配提示

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

    代码示例 1

    • JSON
     
     
     
    1. {
    2. "window": {
    3. "navigationBarBackgroundColor": "#ffffff",
    4. "navigationBarTextStyle": "black",
    5. "navigationBarTitleText": "swan接口功能演示",
    6. "backgroundColor": "#eeeeee",
    7. "backgroundTextStyle": "light"
    8. }
    9. }

    代码示例 2:适配各种移动机型(包含 iPad 等设备)

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • SWAN
    • JS
     
     
     
    1. {{navTitle}}
     
     
     
    1. Component({
    2. properties: {
    3. statusHeight: {
    4. type: Number,
    5. value: 0
    6. },
    7. navHeight: {
    8. type: Number,
    9. value: 0
    10. },
    11. navTitle: {
    12. type: String,
    13. value: ''
    14. },
    15. backIcon: {
    16. type: String,
    17. value: ''
    18. },
    19. homeIcon: {
    20. type: String,
    21. value: ''
    22. }
    23. },
    24. // 私有数据,可用于模版渲染
    25. data: {
    26. },
    27. created: function () {
    28. },
    29. // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
    30. attached: function () {
    31. this.getHeightInfo()
    32. },
    33. detached: function () { },
    34. methods: {
    35. getHeightInfo() {
    36. swan.getSystemInfo({
    37. success: res => {
    38. this.setData({
    39. // 状态栏高度
    40. statusHeight: res.statusBarHeight,
    41. // 导航栏高度
    42. navHeight: res.navigationBarHeight
    43. })
    44. }
    45. })
    46. },
    47. goBack() {
    48. this.triggerEvent('goBack', { back: '您点击了返回' })
    49. },
    50. goHome() {
    51. this.triggerEvent('goHome', { home: '您点击了返回首页' })
    52. },
    53. }
    54. });

    代码示例 3:错误写法

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

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

    • JSON
     
     
     
    1. {
    2. "window": {
    3. "navigationBarBackgroundColor": "#ffffff",
    4. "navigationBarTextStyle": "black",
    5. "navigationBarTitleText": "swan接口功能演示",
    6. "backgroundColor": "#eeeeee",
    7. "backgroundTextStyle": "light"
    8. }
    9. }

    tabBar

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

    属性 类型 必填 描述
    backgroundColorHexColortab 的背景色
    borderStyleStringtabBar 边框颜色。有效值 black/white 两种边框颜色,默认值为 black
    colorHexColortab 上文字的默认颜色
    listArraytab 的列表,列表个数 2~5 个。
    list 接受一个数组,tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:
    - pagePath:已在 pages 中定义的页面路径;类型:String;必填项。
    - text:tab 上显示的文字信息;类型:String;必填项。
    - iconPath:图片路径,icon 大小限制为 40kb,建议尺寸为 78px*78px,不支持网络图片;类型:String;非必填项。
    - selectedIconPath:选中时的图片路径,icon 规格同上;类型:String;非必填项
    selectedColorHexColortab 上的文字选中时的颜色

    代码示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • JSON
     
     
     
    1. {
    2. "tabBar": {
    3. "list": [
    4. {
    5. "pagePath": "pages/index/index",
    6. "text": "首页",
    7. "iconPath":"/images/API_normal.png",
    8. "selectedIconPath":"/images/API_selected.png"
    9. },
    10. {
    11. "pagePath": "pages/detail/detail",
    12. "text": "详情",
    13. "iconPath":"/images/component_normal.png",
    14. "selectedIconPath":"/images/component_selected.png"
    15. }
    16. ],
    17. "backgroundColor" : "#ffffff",
    18. "borderStyle": "white",
    19. "color": "#000",
    20. "selectedColor": "#6495ED"
    21. }
    22. }

    自定义 tabbar

    代码示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • SWAN
    • JS
     
     
     
    1. 首页
    2. 小视频
    3. 个人中心
     
     
     
    1. Page({
    2. data: {
    3. color: 'firstTab',
    4. isActive: 'index1',
    5. isActive2: 'index2',
    6. isActive3: 'index3',
    7. isActive4: 'index4'
    8. },
    9. setTabBarStyle(e) {
    10. this.setData('isActive4', e.currentTarget.dataset.index);
    11. e.currentTarget.dataset.index === 'index4'
    12. ? this.setData({
    13. 'color': 'firstTab'
    14. })
    15. : '';
    16. console.log(this.data.color);
    17. e.currentTarget.dataset.index === 'tinyVideo4'
    18. ? this.setData({
    19. 'color': 'secondTab'
    20. })
    21. : '';
    22. e.currentTarget.dataset.index === 'centre4'
    23. ? this.setData({
    24. 'color': 'thirdTab'
    25. })
    26. : '';
    27. }
    28. });

    requiredBackgroundModes

    基础库 3.50.36 及以上版本支持

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

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

    • JSON
     
     
     
    1. {
    2. "pages": ["pages/index/index"],
    3. "requiredBackgroundModes": ["audio"]
    4. }

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

    networkTimeout

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

    属性 类型 必填 默认值 说明
    requestNumber60000swan.request 的超时时间(单位:毫秒)。
    connectSocketNumber60000swan.connectSocket 的超时时间(单位:毫秒)。
    uploadFileNumber60000swan.uploadFile 的超时时间(单位:毫秒)。
    downloadFileNumber60000swan.downloadFile 的超时时间(单位:毫秒)。

    代码示例

    • JSON
     
     
     
    1. "networkTimeout": {
    2. "request": 30000,
    3. "connectSocket": 10000,
    4. "uploadFile": 10000,
    5. "downloadFile": 10000
    6. }

    permission

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

    属性 类型 必填 默认值 说明
    scope.userLocationPermissionObject位置相关权限声明

    PermissionObject 结构

    属性 类型 必填 默认值 说明
    descString小程序获取权限时展示的接口用途说明。最长 30 个字符

    代码示例

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

    routes

    基础库 3.160.3 及以上版本支持

    更多详见自定义路由

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

    属性 类型 必填 描述 示例
    pathString访问路径“home”
    pageString页面源码文件路径,从小程序包根目录开始的文件路径“pages/home/index”

    代码示例

    • JSON
     
     
     
    1. // app.json
    2. {
    3. "pages": [
    4. "pages/home/home",
    5. "pages/list/list",
    6. "pages/detail/detail"
    7. ],
    8. "subPackage": [
    9. {
    10. "root": "packageA",
    11. "pages": [
    12. "pages/home/home",
    13. "pages/list/list",
    14. "pages/detail/detail"
    15. ]
    16. }
    17. ],
    18. "routes": [
    19. {
    20. // 投放入口,scheme中的path
    21. "path": "home",
    22. // 真实的物理存储路径
    23. "page": "pages/home/home"
    24. },
    25. {
    26. "path": "list",
    27. "page": "pages/list/list"
    28. },
    29. {
    30. "path": "foo/bar",
    31. "page": "pages/list/list"
    32. }
    33. ]
    34. }

    当前文章:创新互联百度小程序教程:配置app.json文件
    本文地址:http://www.mswzjz.cn/qtweb/news35/86235.html

    攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能,是专注品牌与效果的网络营销公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 贝锐智能