微信小程序代码 app.json文件详细介绍

目录

app.json 文件的作用

app.json 文件结构

app.json 文件属性介绍

pages 页面路径配置

window 主窗口主题样式

tabBar 底部导航栏

networkTimeout 网络超时时间

debug 调试模式

permission 申请手机权限

sitemapLocation

style

lazyCodeLoading 懒加载

requiredBackgroundModes 后台运行

functionalPages 分包预下载-加速

subpackages 分包加在-加速

workers

plugins 插件

navigateToMiniProgramAppIdList 跳转其他小程序

useExtendedLib 功能扩展

preloadRule 页面加载-加速

entryPagePath

themeLocation 主题文件

darkmode 暗黑模式

官网：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

app.json 文件的作用

app.json 是微信小程序的全局配置文件，用于配置小程序的页面路径、窗口表现、底部 Tab、网络超时时间、以及一些多媒体和权限设置等。这个文件在小程序启动时会被读取，并根据其中的配置来初始化小程序的各个部分。

app.json 文件结构

{
    "pages": [
        "pages/index/index"
    ],
    "window": {
        "navigationBarTextStyle": "black",
        "navigationStyle": "custom"
    },
    "style": "v2",
    "renderer": "skyline",
    "rendererOptions": {
        "skyline": {
            "defaultDisplayBlock": true,
            "disableABTest": true,
            "sdkVersionBegin": "3.0.0",
            "sdkVersionEnd": "15.255.255"
        }
    },
    "componentFramework": "glass-easel",
    "sitemapLocation": "sitemap.json",
    "lazyCodeLoading": "requiredComponents"
}

app.json 文件属性介绍

pages 页面路径配置

一个数组，用于配置小程序的页面路径。页面路径是相对于小程序根目录的相对路径。数组中的第一个页面是小程序的首页。每个路径对应一个小程序页面，路径中的文件夹名称不能有大写字母。

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

window 主窗口主题样式

window 对象用于设置小程序的全局默认窗口表现，如导航栏的背景色、文字颜色、标题等。

• navigationBarBackgroundColor: 导航栏背景颜色（十六进制颜色值）。
• navigationBarTextStyle: 导航栏标题颜色，仅支持 black（黑色）或 white（白色）。
• navigationBarTitleText: 导航栏标题文字内容。
• backgroundColor: 窗口的背景色（十六进制颜色值）。
• backgroundTextStyle: 下拉背景字体、loading 图的样式，仅支持 dark、light。
• enablePullDownRefresh: 是否开启下拉刷新功能，true 或 false。
• onReachBottomDistance: 页面上拉触底事件触发时距页面底部距离，单位为 px。

"window": {
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "小程序名称",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": false,
  "onReachBottomDistance": 50
}

tabBar 底部导航栏

tabBar 用于配置小程序的底部 Tab 栏的表现，包括 Tab 栏的样式及每个 Tab 的页面路径和图标。

• color: 未选中时的文字颜色（十六进制颜色值）。
• selectedColor: 选中时的文字颜色（十六进制颜色值）。
• backgroundColor: Tab 栏的背景色（十六进制颜色值）。
• borderStyle: Tab 栏上边框的颜色，仅支持 black 或 white。
• list: 一个数组，用于配置 Tab 项，每一项都包括 pagePath（页面路径）、text（Tab 项文字）、iconPath（未选中时的图标路径）、selectedIconPath（选中时的图标路径）。

    "tabBar": {
        "color": "#8a8a8a",
        "selectedColor": "#ff0000",
        "backgroundColor": "#ffffff",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "path/to/icon.png",
                "selectedIconPath": "path/to/selected_icon.png"
            },
            {
                "pagePath": "pages/logs/logs",
                "text": "日志"
            }
        ]
    }

networkTimeout 网络超时时间

networkTimeout 用于设置小程序各种网络请求的超时时间，单位为毫秒。

• request: wx.request 的超时时间。
• connectSocket: wx.connectSocket 的超时时间。
• uploadFile: wx.uploadFile 的超时时间。
• downloadFile: wx.downloadFile 的超时时间。

    "networkTimeout": {
        "request": 10000,
        "connectSocket": 10000,
        "uploadFile": 10000,
        "downloadFile": 10000
    }

debug 调试模式

debug 属性用于是否开启调试模式，true 为开启，false 为关闭。开启调试模式时，开发者工具和移动设备的调试会打印详细的日志信息。

"debug": false

permission 申请手机权限

permission 用于配置小程序需要申请的权限，通常用于获取用户位置信息或其他敏感数据。

• scope.userLocation: 配置请求用户地理位置的描述，用户授权时会看到这段文字。

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

sitemapLocation

sitemapLocation 用于设置小程序 sitemap.json 文件的路径。sitemap.json 文件用于配置小程序页面的收录与展示规则。

"sitemapLocation": "sitemap.json"

style

style 用于设置小程序的基础库使用的组件样式版本。值为 "v2" 时，使用基础库2.0版本的新样式。

"style": "v2"

lazyCodeLoading 懒加载

lazyCodeLoading 用于配置懒加载模式。可以选择 "requiredComponents"，表示只有在页面中被使用到的组件才会被加载，未被使用的组件不会被加载到当前页面。

"lazyCodeLoading": "requiredComponents"

requiredBackgroundModes 后台运行

requiredBackgroundModes 用于配置小程序需要后台运行的能力。目前支持的值为 "audio"，表示后台播放音频。

"requiredBackgroundModes": ["audio"]

functionalPages 分包预下载-加速

functionalPages 用于启用小程序的分包预下载功能，必须为 true 才能使用分包预下载。

"functionalPages": true

subpackages 分包加在-加速

subpackages（或 subPackages） 用于配置小程序的分包加载，以减少主包的体积，加快小程序启动速度。

• name: 分包的名称。
• root: 分包的根目录。
• pages: 分包内的页面路径。

"subpackages": [
  {
    "name": "packageA",
    "root": "packageA",
    "pages": [
      "pages/index/index",
      "pages/logs/logs"
    ]
  },
  {
    "name": "packageB",
    "root": "packageB",
    "pages": [
      "pages/detail/detail"
    ]
  }
]

workers

workers 用于配置 Worker 代码的目录。使用 Worker 可以在小程序中运行多线程任务。

"workers": "workers/"

plugins 插件

plugins 用于配置小程序使用的第三方插件。

• myPlugin: 插件的名称。
• version: 插件的版本号。
• provider: 插件开发者的 AppID。

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

navigateToMiniProgramAppIdList 跳转其他小程序

navigateToMiniProgramAppIdList 用于配置当前小程序可跳转的其他小程序 AppID 列表。

"navigateToMiniProgramAppIdList": [
    "wx1234567890abc111",
    "wxabcdef1234567111"
]

useExtendedLib 功能扩展

useExtendedLib 用于配置使用的扩展库，扩展库为小程序提供了更多的功能。

"useExtendedLib": {
    "weui": true
}

preloadRule 页面加载-加速

preloadRule 用于配置页面预加载规则，以提高页面加载速度。

• pages/index/index: 需要预加载的页面。
• network: 预加载的网络环境，wifi 或者 all。
• packages: 预加载的分包。

"preloadRule": {
  "pages/index/index": {
    "network": "wifi",
    "packages": ["packageA"]
  }
}

entryPagePath

指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。

"entryPagePath": "pages/index/index"

themeLocation 主题文件

themeLocation 用于指定小程序主题配置文件的路径（从基础库 2.11.0 开始支持）。

"themeLocation": "miniprogram_npm/@my-theme/miniprogram-theme/index.theme.json"

darkmode 暗黑模式

darkmode 用于启用小程序的暗黑模式支持。

"darkmode": true