小程序开发之全局配置app.json

版权声明:欢迎转载,可Chat交流,写博不易请标明出处: https://blog.csdn.net/JackJia2015/article/details/85694388

全局配置

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

app.json 配置项列表

在这里插入图片描述
例如:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  }
}

注:配置文件中不可以写注释,而且标点符号要求很严格,所有符号需要英文符号,配置参数键值最后一个项不能加逗号

pages --页面路径列表

pages 用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径+文件名 信息。文件名不需要写文件后缀,框架会自动去寻找(或者生成)对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
例如:

{
  "pages": [
	"pages/index/index",
	"pages/logs/logs"
  ]
}

对于的目录为
├── app.js
├── app.json
├── app.wxss
├── pages
│ │── index
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.wxss
│ └── logs
│ │├── logs.wxml
│ │├── logs.js
│ │├── logs.json
│ │└── logs.wxss
└── utils

window – 全局的默认窗口表现

用于设置小程序的状态栏、导航条、标题、窗口背景色。
在这里插入图片描述
注:
(1)HexColor(十六进制颜色值),如"#ff00ff"

(2)关于navigationStyle导航栏样式

  • 客户端 7.0.0 以下版本,navigationStyle 只在 app.json 中生效。
  • 客户端 6.7.2 版本开始,navigationStyle: custom 对 组件无效
  • 开启 custom 后,低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0(不代表最低版本,只供调试用)可方便切到旧视觉

例如:

"window":{
    "navigationBarBackgroundColor": "#000000",//导航栏背景颜色
    "navigationBarTextStyle":"white",         //导航栏标题颜色,仅支持 black / white
    "navigationBarTitleText": "导航条标题",     //导航栏标题文字内容
    "navigationStyle":"default",              //导航栏样式,default 默认样式 custom 自定义导航栏
    "backgroundColor":"grey",                 //窗口的背景色,如设置下拉顶部窗口颜色将覆盖背景色
    "enablePullDownRefresh":true,		      //是否开启当前页面的下拉刷新
    "backgroundTextStyle":"dark",             //下拉 loading 的样式,仅支持 dark / light
    "backgroundColorTop":"grey",              //顶部窗口的背景色,仅 iOS 支持
    "onReachBottomDistance":50,               //页面上拉触底事件触发时距页面底部距离,单位为px。
    "backgroundColorBottom": "green",         //底部窗口的背景色,仅 iOS 支持
    "pageOrientation":"auto"                  //屏幕旋转设置,仅支持 auto / portrait
  },

在这里插入图片描述

tabBar 底部导航栏

如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。在这里插入图片描述
其中 list 接受一个数组,只能配置最少2个、最多5个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:

在这里插入图片描述
底部导航栏例如

"tabBar": {
    "color":"green",              //tab 上的文字默认颜色,仅支持十六进制颜色
    "selectedColor":"red",        //tab 上的文字选中时的颜色,仅支持十六进制颜色
    "backgroundColor":"lightgrey",//tab 的背景色,仅支持十六进制颜色
    "borderStyle":"black",        //tabbar上边框的颜色, 仅支持 black / white
    "position":"bottom",          //tabBar的位置,仅支持 bottom / top
    "list": [                     //tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
      {
        "pagePath": "pages/index/index",             //页面路径,必须在 pages 中先定义
        "text": "首页",                               //tab 上按钮文字
        "iconPath":"Assets/images/index.png",        //图片路径,限制为40kb,建议尺寸为 81px * 81px
        "selectedIconPath":"Assets/images/index.png" //选中后的图片路径 
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "Assets/images/log.png",
        "selectedIconPath": "Assets/images/log.png"
      }
    ]
  },

在这里插入图片描述
如果
"position":"top"
在这里插入图片描述

networkTimeout – 网络超时时间

各类网络请求的超时时间,单位均为毫秒。
在这里插入图片描述
例如

"networkTimeout": {
    "request": 20000,          //wx.request 的超时时间,单位:毫秒。
    "connectSocket":20000,     //wx.connectSocket 的超时时间,单位:毫秒。
    "uploadFile":20000,        //wx.uploadFile 的超时时间,单位:毫秒。 
    "downloadFile": 20000      //wx.downloadFile 的超时时间,单位:毫秒。
  }

当超过请求时间,将走fail:funtion()方法

debug – debug 模式

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

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

启用插件功能页时,插件所有者小程序需要设置其 functionalPages 为 true。
例如
"functionalPages": true

subpackages – 分包结构配置

启用分包加载时,声明项目分包结构。
分包加载
某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。
后面会单独介绍
在这里插入图片描述

workers – Worker 代码放置的目录(多线程)

使用 Worker 处理多线程任务时,设置 Worker 代码放置的目录
后面会单独介绍

requiredBackgroundModes – 需要在后台使用的能力,如「音乐播放」

申明需要后台运行的能力,类型为数组。目前支持以下项目:
audio: 后台音乐播放
例如

"requiredBackgroundModes": [
    "audio"
  ]

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

plugins – 使用到的插件

声明小程序需要使用的插件。后面会单独介绍
备注:插件地址:https://developers.weixin.qq.com/community/plugins
例如

"plugins": {
      "myPlugin": {
        "version": "1.0.0",
        "provider": "wxidxxxxxxxxxxxxxxxx"
      }
  }

注:plugins 定义段中可以包含多个插件声明,每个插件声明以一个使用者自定义的插件引用名作为标识,并指明插件的 appid 和需要使用的版本号。其中,引用名(如上例中的 myPlugin)由使用者自定义,无需和插件开发者保持一致或与开发者协调。在后续的插件使用中,该引用名将被用于表示该插件。

preloadRule – 分包预下载规则

声明分包预下载的规则。
后面会单独介绍

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

在 iPad 上运行的小程序可以设置支持屏幕旋转。
例如
"resizable":true

navigateToMiniProgramAppIdList – 需要跳转的小程序列表

当小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时,需要先在配置文件中声明需要跳转的小程序 appId 列表,最多允许填写 10 个。
后面会单独介绍
例如

"navigateToMiniProgramAppIdList": [
    "wx3efb95b9c5579418",
    "wxc1039e003593f9b4",
    "wxc75cac912af33647",
    "wx88bbae21474301ed",
    "wxd101b6b8f64db085",
    "wxd7c5b7d77ff1b238",
    "wxefe8997276c7a7d4",
    "wxbdfee33ea394a980",
    "wx8b3a98563fc40251"
  ]

usingComponents – 全局自定义组件配置

在此处声明的自定义组件视为全局自定义组件,在小程序内的页面或自定义组件中可以直接使用而无需再声明。
后面会单独介绍
例如:
"usingComponents": {}

permission – 小程序接口权限相关设置

小程序接口权限相关设置。字段类型为 Object,结构为:
在这里插入图片描述
PermissionObject 结构
在这里插入图片描述
例如

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }

在这里插入图片描述

注:官方通告
在这里插入图片描述





猜你喜欢

转载自blog.csdn.net/JackJia2015/article/details/85694388