位置:电子教程 > 微信小程序入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序起步
小程序基础知识
小程序基础语法
当前阅读教程:微信小程序入门教程 > 全局配置
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 全局配置和页面配置 下一篇: 页面配置

小程序根目录下的app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。

每个微信小程序项目只有一个全部配置文件。

下面是一个包含了部分常用配置选项的app.json

{

  "pages": [

    "pages/index/index",

    "pages/logs/index"

  ],

  "window": {

    "navigationBarTitleText": "Demo"

  },

  "tabBar": {

    "list": [{

      "pagePath": "pages/index/index",

      "text": "首页"

    }, {

      "pagePath": "pages/logs/logs",

      "text": "日志"

    }]

  },

  "networkTimeout": {

    "request": 10000,

    "downloadFile": 10000

  },

  "debug": true,

  "navigateToMiniProgramAppIdList": [

    "wxe5f52902cf4de896"

  ]

}

app.json 配置项列表参见表2-3

    表2-3 app.json配置项列表

属性

类型

必填

描述

支持版本

pages

String/Array

页面路径列表


window

Object

全局的默认窗口表现


tabBar

Object

底部tab 栏的表现


networkTimeout

Object

网络超时时间


debug

Boolean

是否开启 debug 模式,默认关闭


functionalPages

Boolean

是否启用插件功能页,默认关闭

2.1.0

subpackages

Object/Array

分包结构配置

1.7.3

workers

String

Worker 代码放置的目录

1.9.90

requiredBackgroundModes

String/ Array

需要在后台使用的能力,如“音乐播放”


plugins

Object

使用到的插件

1.9.6

preloadRule

Object

分包预下载规则

2.3.0

resizable

Boolean

iPad 小程序是否支持屏幕旋转,默认关闭

2.3.0

navigateToMiniProgramAppIdList

String /Array

需要跳转的小程序列表

2.4.0

(1)pages

用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径+文件名 信息。文件名不需要写文件后缀,框架会自动去寻找对于位置的 .json .js.wxml.wxss 四个文件进行处理。数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改。如下开发目录:

├── app.js

├── app.json

├── app.wxss

├── pages

   │── index

      ├── index.wxml

      ├── index.js

      ├── index.json

      └── index.wxss

   └── logs

       ├── logs.wxml

       └── logs.js

└── utils

则需要在app.json中编写,代码示例

小白教程网www.2d5.net

如下:

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ]

}

(2)window

用于设置小程序的状态栏、导航条、标题、窗口背景色,属性参见表2-4

表2-4 window属性

属性

类型

默认值

描述

最低版本

navigationBarBackgroundColor

HexColor

#000000

导航栏背景颜色,如 #000000


navigationBarTextStyle

String

white

导航栏标题颜色,仅支持 black / white


navigationBarTitleText

String


导航栏标题文字内容


navigationStyle

String

default

导航栏样式,仅支持以下值:

default 默认样式

custom 自定义导航栏,只保留右上角胶囊按钮

微信版本 6.6.0

backgroundColor

HexColor

#ffffff

窗口的背景色 


backgroundTextStyle

String

dark

下拉 loading 的样式,仅支持 dark   / light


backgroundColorTop

String

#ffffff

顶部窗口的背景色,仅 iOS 支持

微信版本 6.5.16

backgroundColorBottom

String

#ffffff

底部窗口的背景色,仅 iOS 支持

微信版本 6.5.16

enablePullDownRefresh

Boolean

false

是否开启全局页面的下拉刷新


onReachBottomDistance

Number

50

页面上拉触底事件触发时距页面底部距离,单位为px


pageOrientation

String

portrait

屏幕旋转设置

微信版本 6.7.3

表中,HexColor为十六进制颜色值,如#ffffff表示白色 #000000表示黑色。

注意:navigationStyle 只在 app.json 中生效。开启 custom 后,低版本客户端需要做好兼容。开发者工具基础库版本切到客户端 6.7.2 版本开始,navigationStyle: custom <web-view> 组件无效。

app.json示例

小白教程网www.2d5.net

代码如下:

{

  "window":{

    "navigationBarBackgroundColor": "#ffffff",

    "navigationBarTextStyle": "black",

    "navigationBarTitleText": "微信接口功能演示",

    "backgroundColor": "#eeeeee",

    "backgroundTextStyle": "light"

  }

}

image.png

(3)tabBar

用于设置小程序多tab。例如,客户端窗口的底部或顶部有 tab 栏可以切换页面,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面,tabBar属性参见表2-5

表2-5 tabBar属性

属性

类型

必填

默认值

描述

color

HexColor


tab 上的文字默认颜色

selectedColor

HexColor


tab 上的文字选中时的颜色

backgroundColor

HexColor


tab 的背景色

borderStyle

String

black

abbar上边框的颜色, 仅支持 black /   whitet

list

Array


tab 的列表,详见 list 属性说明,最少2个、最多5个 tab

position

String

bottom

tabBar的位置,仅支持 bottom /   top

其中 list 接受一个数组,只能配置最少2个、最多5 tabtab 按数组的顺序排序,每个项都是一个对象,其属性值参见表2-6

表2-6 list属性

属性

类型

必填

说明

pagePath

String

页面路径,必须在 pages 中先定义

text

String

tab 上按钮文字

iconPath

String

图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片

当 postion 为 top 时,不显示 icon

selectedIconPath

String

选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片

当 postion 为 top 时,不显示 icon

image.png

(4)networkTimeout

用于指定各类网络请求的超时时间,单位均为毫秒,networkTimeout属性参见表2-7

表2-7 networkTimeout属性

属性

类型

必填

默认值

说明

request

Number

60000

wx.request 的超时时间,单位:毫秒

connectSocket

Number

60000

wx.connectSocket 的超时时间,单位:毫秒

uploadFile

Number

60000

wx.uploadFile 的超时时间,单位:毫秒

downloadFile

Number

60000

wx.downloadFile 的超时时间,单位:毫秒

(5)debug

可以在开发者工具中开启 debug 模式,在开发者工具的控制台面板,调试信息以 info 的形式给出,其信息有Page的注册、页面路由、数据更新、事件触发等,可以帮助开发者快速定位一些常见的问题。

(6)functionalPages

基础库 2.1.0 开始支持,低版本需做兼容处理。启用插件功能页时,插件所有者小程序需要设置其 functionalPages true

(7)subpackages

微信客户端 6.6.0 ,基础库 1.7.3 及以上版本支持。启用分包加载时,声明项目分包结构。写成 subPackages 也支持。

(8)workers

使用 Worker 处理多线程任务时,设置 Worker 代码放置的目录。

(9)requiredBackgroundModes

微信客户端 6.7.2 及以上版本支持。申明需要后台运行的能力,类型为数组。目前支持以下项目:Audio后台音乐播放,代码示例

小白教程网www.2d5.net

如下:

{

  "pages": ["pages/index/index"],

  "requiredBackgroundModes": ["audio"]

}

 

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

 

(10)plugins

基础库 1.9.6 开始支持,低版本需做兼容处理。声明小程序需要使用的插件。

(11)1preloadRule

基础库 2.3.0 开始支持,低版本需做兼容处理。声明分包预下载的规则。

(12)resizable

基础库 2.3.0 开始支持,低版本需做兼容处理。在 iPad 上运行的小程序可以设置支持屏幕旋转。

(13)navigateToMiniProgramAppIdList

基础库 2.4.0 开始支持,低版本需做兼容处理。当小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时,需要先在配置文件中声明需要跳转的小程序 appId 列表,最多允许填写 10 个。



上一篇: 全局配置和页面配置 下一篇: 页面配置
毕业设计网             广告联系QQ:45157718(微信同号)