怎么修改现有小程序的json

小程序开发进阶：一文读懂如何高效修改现有小程序的JSON配置

在小程序的开发旅程中，app.json 文件无疑是最核心、最基础的配置文件，它就像小程序的“总设计师”或“宪法”，定义了整个小程序的页面路径、窗口样式、 tabBar 导航以及各种全局行为，无论是刚入门的新手，还是经验丰富的开发者，如何正确、高效地修改现有小程序的 app.json,都是一项必备的核心技能。

本文将带你全面梳理 app.json 的结构，并通过实际场景，手把手教你如何修改它,助你从小程序开发新手成长为配置高手。

认识小程序的“灵魂”——app.json

让我们明确 app.json 的作用，它是一个位于项目根目录下的 JSON 文件，是小程序的全局配置文件，一个标准的 app.json 通常包含以下几个核心配置项：

pages：配置小程序所有页面的路径，这是一个字符串数组，数组的第一项代表小程序的初始页面（首页）。
window：定义小程序所有页面的默认窗口表现，如导航栏标题、背景色、文字颜色等。
tabBar：如果小程序需要底部标签栏，就在这里配置，可以定义标签栏的列表、图标、选中状态以及对应的跳转路径。
style：全局配置小程序的样式，如 v2 版本启用等。
sitemapLocation：指明 sitemap.json 文件的位置,用于配置小程序及其页面是否允许被微信索引。

理解了这些基本概念,我们就可以开始进行实战操作了。

修改 app.json 的三大核心场景

修改 app.json 通常围绕三大核心需求：页面管理、界面美化 和 功能导航。

页面管理——添加、删除或调整页面顺序

这是最常见的需求，我们开发了一个新的“我的订单”页面,需要把它添加到小程序中。

假设： 我们要在 pages 数组的最后添加一个新页面 pages/order/order。

操作步骤：

第一步：创建页面文件 在项目根目录的 pages 文件夹下，创建一个名为 order 的新文件夹，并在其中创建四个必要文件：order.js (逻辑)、order.json (配置)、order.wxml (结构) 和 order.wxss (样式)。

第二步：修改 app.json 打开项目根目录下的 app.json 文件，找到 pages 数组,将新页面的路径字符串添加到数组的末尾。

修改前 (示例)：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  // ... 其他配置
}

修改后 (示例)：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/order/order"
  ],
  // ... 其他配置
}

关键点：

路径规则：路径以 pages/ 开头，后跟文件夹名和文件名，pages/index/index 对应 pages/index/index.wxml。
初始页面：pages 数组的第一项是小程序的启动页，如果你想更换首页,只需调整数组中元素的顺序即可。
删除页面：如果某个页面不再需要，只需从 pages 数组中移除对应的路径字符串,并删除对应的文件即可。

界面美化——自定义窗口外观

想让你的小程序看起来与众不同？修改 window 配置是第一步，我们想把导航栏标题从默认的“WeChat”改成“我的商城”,并改变其背景色。

假设： 我们要修改导航栏标题、背景色和文字颜色。

操作步骤：

打开 app.json，找到 window 对象,添加或修改以下属性：

修改前 (示例)：

{
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  // ... 其他配置
}

修改后 (示例)：

{
  "window": {
    "backgroundTextStyle": "light", // 下拉 loading 的样式
    "navigationBarBackgroundColor": "#FE8C00", // 修改导航栏背景色为橙色
    "navigationBarTitleText": "我的商城", // 修改导航栏标题
    "navigationBarTextStyle": "white" // 修改导航栏标题文字颜色为白色
  },
  // ... 其他配置
}

常用 window 配置项说明：

navigationBarTitleText：导航栏标题文字。
navigationBarBackgroundColor：导航栏背景颜色,支持十六进制颜色码。
navigationBarTextStyle：导航栏标题颜色，可选 black 或 white。
backgroundColor：窗口的背景颜色。
backgroundTextStyle：下拉 loading 的样式，仅支持 dark 或 light。

功能导航——配置底部 TabBar

如果你的小程序有多个核心功能入口，底部标签栏（TabBar）是最佳选择，一个电商小程序通常有“首页”、“分类”、“购物车”和“我的”四个标签。

假设： 我们要配置一个包含四个标签的 TabBar。

操作步骤：

打开 app.json，添加 tabBar 对象,并进行详细配置。

修改后 (示例)：

{
  "pages": [
    "pages/index/index",
    "pages/category/category",
    "pages/cart/cart",
    "pages/my/my"
  ],
  "window": {
    // ... window 配置
  },
  "tabBar": {
    "color": "#999999", // 未选中时的文字颜色
    "selectedColor": "#FE8C00", // 选中时的文字颜色
    "backgroundColor": "#ffffff", // TabBar 的背景色
    "borderStyle": "black", // TabBar 上边框的颜色，仅支持 black/white
    "list": [ // TabBar 的列表，至少2个，最多5个
      {
        "pagePath": "pages/index/index", // 页面路径
        "text": "首页", // 标签按钮文字
        "iconPath": "images/home.png", // 未选中时的图标路径
        "selectedIconPath": "images/home-active.png" // 选中时的图标路径
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "images/category.png",
        "selectedIconPath": "images/category-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "images/cart.png",
        "selectedIconPath": "images/cart-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/my.png",
        "selectedIconPath": "images/my-active.png"
      }
    ]
  },
  // ... 其他配置
}

关键点：

图标要求：iconPath 和 selectedIconPath 指定的图标建议尺寸为 81px * 81px，且格式为 PNG。
页面路径：list 中的 pagePath 必须在 pages 数组中已经定义。
顺序对应：TabBar 的标签顺序会严格按照 list 数组的顺序显示。

修改时的注意事项与最佳实践

JSON 语法严格：app.json 是一个标准的 JSON 文件，对语法要求非常严格,注意：
- 必须使用双引号包裹键和字符串值。
- 不能使用注释。
- 最后一项后面不能有逗号。
- 所有括号必须成对出现。
善用开发工具提示：微信开发者工具对 app.json 有很好的语法校验和代码提示，如果配置错误，编辑器通常会给出红色下划线和错误提示，这是你最好的“纠错助手”。
分清全局与页面配置：app.json 中的 window 配置是全局默认值，如果你只想让某个特定页面的窗口样式与众不同，可以在该页面的 .json 文件（如 pages/index/index.json）中进行覆盖配置,页面级别的配置会优先于全局配置。
修改后实时预览：每次修改 app.json 后，微信开发者工具通常会自动编译并刷新模拟器，如果没有，可以点击工具栏的“编译”按钮手动刷新,以便及时查看效果。