甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

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

    pages

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

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

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

    如，开发目录为：

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

    则需要在 app.json 中书写

    代码示例

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

    提示：

    • 开发者工具在 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 全局配置Android和iOS从基础库版本 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. 
  
  
  
    2.  "window": {
      3. 
  
  
  
    3.  "navigationBarBackgroundColor": "#ffffff",
      4. 
  
  
  
    4.  "navigationBarTextStyle": "black",
      5. 
  
  
  
    5.  "navigationBarTitleText": "swan接口功能演示",
      6. 
  
  
  
    6.  "backgroundColor": "#eeeeee",
      7. 
  
  
  
    7.  "backgroundTextStyle": "light"
      8. 
  
  
  
    8.  }
      9. 
  
  
  
    9. }
      10.

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

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

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

    代码示例 3：错误写法

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

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

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

    tabBar

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

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

    代码示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

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

    自定义 tabbar

    代码示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

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

    requiredBackgroundModes

    基础库 3.50.36 及以上版本支持

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

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

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

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

    networkTimeout

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

    属性 类型 必填 默认值 说明
    requestNumber否60000swan.request 的超时时间（单位：毫秒）。
    connectSocketNumber否60000swan.connectSocket 的超时时间（单位：毫秒）。
    uploadFileNumber否60000swan.uploadFile 的超时时间（单位：毫秒）。
    downloadFileNumber否60000swan.downloadFile 的超时时间（单位：毫秒）。

    代码示例

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

    permission

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

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

    PermissionObject 结构

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

    代码示例

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

    routes

    基础库 3.160.3 及以上版本支持

    更多详见自定义路由

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

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

    代码示例

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

    本文题目：创新互联百度小程序教程：配置app.json文件
    文章位置：https://chengdu.cdxwcx.cn/article/cdiejje.html

    其他资讯