小程序怎么写json

小程序开发入门：JSON配置文件全解析与实战指南**

在小程序开发中,JSON（JavaScript Object Notation）扮演着至关重要的角色，它不仅仅是一种数据格式，更是小程序框架用来配置页面、全局设置以及声明各种文件的核心方式，理解并小程序中JSON的写法，是开启小程序开发之旅的第一步，也是构建稳定、可维护小程序应用的基础，本文将详细讲解小程序中JSON文件的用途、基本语法、常见配置项以及实战技巧。

小程序中JSON文件的核心作用

小程序通过JSON文件来进行各种配置声明，这些文件通常以 .json 为后缀，并位于特定的目录下，其主要作用包括：

1. 全局配置（app.json）：定义小程序的全局设置，如页面路径、窗口表现、导航栏样式、tab栏等，是整个小程序的“总纲”。
2. 页面配置（[页面路径].json）：针对某个特定页面的配置，可以覆盖全局配置中的某些项，例如该页面的标题、窗口背景色等。
3. 项目配置（project.config.json）：用于存放项目的个性化配置，如开发者工具的设置、编译配置等，通常由开发者工具自动生成和维护。
4. sitemap配置（sitemap.json）：配置小程序及其页面是否允许被微信索引。

JSON的基本语法回顾

在小程序配置之前,我们先简单回顾一下JSON的基本语法，这对于正确编写配置文件至关重要：

• 数据格式：JSON是键值对（Key-Value）的集合，以 包裹。
• 键（Key）：必须是字符串，通常用双引号 括起来（在JavaScript中，单引号也可以，但标准JSON推荐双引号）。
• 值（Value）：可以是字符串、数字、布尔值（true/false）、数组（[]）、对象（）或 null。
• 分隔符：键值对之间用英文逗号 分隔，最后一个键值对后面不能有逗号。
• 注释：标准JSON是不支持注释的！这一点非常重要，小程序的JSON配置文件同样不支持注释，如果需要添加说明，通常在代码中使用有意义的键名或在开发者工具中通过注释功能（非JSON文件内）记录。

示例：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "我的小程序",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-active.png"
      }
    ]
  }
}

关键JSON配置文件详解

全局配置 app.json

app.json 是小程序的全局配置文件，它决定了小程序的“骨架”，常见的配置项有：

• pages：必需，用于指定小程序所有页面的路径，是一个字符串数组，数组的第一项代表小程序的初始页面（首页），新增页面时，需要在这里添加对应的路径。

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

• window：用于设置小程序的默认窗口表现，如导航栏标题、背景色、文字样式等。

  "window": {
    "navigationBarTitleText": "小程序名称", // 导航栏标题文字
    "navigationBarBackgroundColor": "#ffffff", // 导航栏背景颜色，如 #ffffff
    "navigationBarTextStyle": "black", // 导航栏标题颜色，仅支持 black/white
    "backgroundColor": "#eeeeee", // 窗口的背景色
    "backgroundTextStyle": "light", // 下拉 loading 的样式，仅支持 dark/light
    "enablePullDownRefresh": true // 是否开启下拉刷新
  }

• tabBar：如果小程序有多个主要页面，可以通过 tabBar 配置底部或顶部标签栏，它包含 color（未选中文字颜色）、selectedColor（选中文字颜色）、backgroundColor（背景色）、list（标签页配置数组）等属性。list 中的每个元素代表一个标签页，包含 pagePath（页面路径）、text（按钮文字）、iconPath（未选中图标路径）、selectedIconPath（选中图标路径）。

  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "images/user.png",
        "selectedIconPath": "images/user-active.png"
      }
    ]
  }

• sitemapLocation：指定 sitemap.json 的文件路径，默认为 "sitemap.json"。

页面配置 [页面路径].json

在小程序的每个页面目录下,都可以创建一个与页面文件名同名的 .json 文件（pages/index/index.json），用于对该页面进行个性化配置，页面配置会覆盖 app.json 中相同的配置项。

我们想设置“我的”页面的导航栏标题为“个人中心”，可以这样写 pages/user/user.json：

{
  "navigationBarTitleText": "个人中心"
}

这样,即使 app.json 中设置了 navigationBarTitleText 为 "小程序名称"，"我的" 页面的导航栏标题也会显示为 "个人中心"。

页面配置中常见的项与 app.json 中的 window 配置项类似，如 navigationBarTitleText、backgroundColor、enablePullDownRefresh 等。

项目配置 project.config.json

这个文件通常由微信开发者工具自动生成和维护,用于记录开发者工具的个性化配置，比如编译设置、项目ID、界面颜色主题等，一般情况下，开发者不需要手动修改这个文件，除非有特殊的项目需求或团队协作需要统一配置。

Sitemap配置 sitemap.json

sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，微信会爬取小程序的 sitemap.json 文件，从而获取到小程序的页面信息。

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
    "action": "allow",
    "page": "*"
  }]
}

rules 是一个规则数组，每个规则包含 action（允许 "allow" 或禁止 "disallow"）和 page（页面路径，支持通配符 ）。

小程序JSON编写注意事项

1. 严格遵循JSON语法：特别注意逗号的使用（最后一个元素后无逗号）、双引号的使用、不支持注释等，错误的JSON语法会导致小程序无法正常运行或编译失败。
2. 大小写敏感：JSON中的键名是区分大小写的，"navigationBarTitleText" 和 "navigationbartitletext" 是不同的。
3. 配置项的有效值：许多配置项有固定的可选值，如 navigationBarTextStyle 只能是 "black" 或 "white"，borderStyle 只能是 "black" 或 "white"（注意这里的 white 指的是分割线颜色为白色），开发者工具通常会提供提示。
4. 页面路径的正确性：pages 数组中的页面路径必须与实际文件路径一致，且要以 开头，相对于项目根目录。
5. 善用开发者工具提示：微信开发者工具对JSON文件编写有很好的语法提示和错误检查功能，遇到问题多留意工具的提示信息。

JSON在小程序开发中是配置信息的基石,它简洁明了地定义了小程序的全局和局部行为，从 app.json 的全局布局，到每个页面的个性化配置，都离不开JSON的身影，小程序JSON文件的写法，理解各个配置项的含义和作用，是每一位小程序开发者必备的基本功，希望通过本文的讲解，能够帮助你更好地理解和运用小程序中的JSON配置，构建出更加出色的小程序应用，多写多练，遇到多查阅官方文档，是熟练的关键。