浅谈小程序的全局配置

浅谈小程序的全局配置

小程序根目录下的app.json文件可用来对微信小程序做全局配置，如：决定页面文件路径、窗口表现、设置tab、设置超时时间等。

一、pages

构成小程序的页面，每一项都对应一个页面的路径，文件名不需要加后缀，小程序会自动去寻找相对应位置的文件进行处理。

数组的第一项代表小程序的初始页面，新增/删除都要对pages数组进行修改。

"pages": [
   "pages/home/home",
   "pages/cart/cart",
   "pages/my/my",
   "pages/detail/detail",
 ], 

如果需要新建页面。可在此直接配置以上格式的页面文件路径，小程序会自动生成页面文件。当然也可以手动在目录里创建页面文件夹及其页面文件，但是需要在pages里配置页面路径。

二、window

配置小程序的状态栏、导航条、标题、窗口背景色等。

  "window": {
    "backgroundTextStyle": "light",			//下拉loading的样式，仅支持dark / light
    "navigationBarBackgroundColor": "#f66",	//导航栏背景颜色
    "navigationBarTitleText": "嘿嘿",		//导航栏标题文字内容
    "navigationBarTextStyle": "white",		//导航栏标题颜色，仅支持 black / white
    "enablePullDownRefresh":true,			//是否开启全局的下拉刷新。默认为false
    "backgroundColorTop":"#f66666",			//顶部窗口的背景色，仅 iOS 支持
    "onReachBottomDistance":50				//页面上拉触底事件触发时距页面底部距离，单位为 px。
  },

更多请参考微信小程序开发者文档

三、tabBar

用于配置指定tab栏的表现以及tab切换时显示的对应页面。tabBar,里面有一个list的列表,它是一个数组，里面的每个对象就是一个tab标签，最少要有2个tab。

  "tabBar":{
    "color":"#333",				//tab上的文字默认颜色，仅支持十六进制颜色
    "selectedColor":"#f66",		//tab 上的文字选中时的颜色，仅支持十六进制颜色
    "backgroundColor":"white",	//tab 的背景色，仅支持十六进制颜色
    "position":"top"		//tabBar 的位置仅支持 bottom/top
    "list":[		//接受一个数组，可配置最少2个、最多5个tab。tab按数组的顺序排序，每个项都是一个对象
      {
        "pagePath":"pages/home/home",	//页面路径，必须先在pages中定义
        "text":"首页",	//tab上按钮文字
        "iconPath": "assgin/img/home.png",	//未选中时的图片路径，icon大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。
        "selectedIconPath": "assgin/img/home_select.png"   //选中时的图片路径，条件和上一条一样
        **//注意：当position为 top 时，不显示 icon。**
      },{
        "pagePath": "pages/kind/kind",
        "text": "分类",
        "iconPath":"assgin/img/kind.png",
        "selectedIconPath":"assgin/img/kind_selec.png" //
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "assgin/img/cart.png",
        "selectedIconPath": "assgin/img/cart_selec.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "个人中心",
        "iconPath": "assgin/img/my.png",
        "selectedIconPath": "assgin/img/my_selec.png"
      }
    ]
  },

四、networkTimeout

各类网络请求的超时时间，单位均为毫秒。（ 默认为60000 ）

"networkTimeout": {
"request": 30000,		 // wx.request 的超时时间
"connectSocket": 30000,	 // wx.connectSocket 的超时时间
"uploadFile": 30000,	 // wx.uploadFile 的超时时间
"downloadFile	": 30000 // wx.downloadFile 的超时时间
},

五、permission

小程序接口权限相关设置。字段类型为 Object。

  "permission":{
    "scope.userLocation":{	//位置相关权限声明
      "desc":"你的位置信息将用于小程序位置接口的效果展示"	//小程序获取权限时展示的接口用途说明。最长 30 个字符
    }
  },

六、requiredBackgroundModes

申明需要后台运行的能力，类型为数组。目前仅支持：

audio：后台音乐播放
location：后台定位
例：

{
  "pages": ["pages/index/index"],
  "requiredBackgroundModes": ["audio", "location"]
}

以上就是大多常用的全局配置，疫情当中，停工不停学，在逆战中成长,如果还想了解更多更详细，戳这里进入微信小程序官方文档~~