首页 前端知识 微信小程序代码 app.json文件详细介绍

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

2024-11-10 09:11:32 前端知识 前端哥 922 972 我要收藏

目录

app.json 文件的作用

app.json 文件结构

app.json 文件属性介绍

pages 页面路径配置

window 主窗口主题样式

tabBar 底部导航栏

networkTimeout 网络超时时间

debug 调试模式

permission 申请手机权限

sitemapLocation

style

lazyCodeLoading 懒加载

requiredBackgroundModes 后台运行

functionalPages 分包预下载-加速

subpackages 分包加在-加速

workers

plugins 插件

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 用于配置当前小程序可跳转的其他小程序 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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/20165.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!