3、项目结构与配置：理解app.json、project.config.json，适配多端manifest
说实话，刚接触抖音小程序多端开发时，我也被一堆配置文件搞晕过。
app.json、project.config.json、manifest.json……每个文件管什么？哪些是共用的？哪些要分开配？
今天咱们就把这些文件掰开揉碎，讲清楚。
3.1 app.json：小程序的“宪法”
app.json 是所有小程序平台都有的核心配置文件。它定义了页面的路径、窗口样式、tabBar、网络超时等全局配置。
我个人习惯，拿到一个新项目，第一件事就是打开 app.json，看看 pages 数组里有哪些页面。这能快速了解项目的整体结构。
核心字段一览：
| 字段 | 说明 | 是否必填 |
|---|---|---|
| pages | 页面路径列表，第一项为首页 | 是 |
| window | 全局窗口样式（导航栏、背景色等） | 否 |
| tabBar | 底部导航栏配置 | 否 |
| networkTimeout | 网络请求超时时间 | 否 |
| debug | 是否开启调试模式 | 否 |
举个例子，一个典型的 app.json 长这样：
{
"pages": [
"pages/index/index",
"pages/category/category",
"pages/cart/cart",
"pages/user/user"
],
"window": {
"navigationBarTitleText": "我的商城",
"navigationBarBackgroundColor": "#ff6600",
"navigationBarTextStyle": "white"
},
"tabBar": {
"list": [
{"pagePath": "pages/index/index", "text": "首页"},
{"pagePath": "pages/category/category", "text": "分类"},
{"pagePath": "pages/cart/cart", "text": "购物车"},
{"pagePath": "pages/user/user", "text": "我的"}
]
}
}
小技巧：pages 数组的顺序决定了页面注册的顺序。首页必须是第一项。如果你新增了一个页面但忘了在 pages 里注册，运行时会直接报错。我踩过这个坑，找了半天才发现是漏配了。
3.2 project.config.json：开发者的“工具箱”
这个文件是抖音开发者工具专用的。它不参与小程序运行，只影响开发体验。
说白了，它就是给 IDE 看的配置。比如项目名称、AppID、编译设置、代码保护等。
我记得有一次，团队里新同事拉下代码后，开发者工具一直报“AppID 不匹配”。后来发现是 project.config.json 里的 appid 字段没改。嗯，这个文件很容易被忽略，但出了问题很烦人。
{
"description": "项目配置文件",
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true
},
"appid": "你的抖音小程序AppID",
"projectname": "多端商城",
"compileType": "miniprogram"
}
注意：project.config.json 里的 appid 要和抖音开放平台注册的一致。如果多人协作，建议把 appid 留空或用占位符，避免每个人都要改。我曾经因为忘记改 appid，调试了一下午……
3.3 manifest.json：多端适配的“翻译官”
这是多端开发里最关键的配置文件。它负责把一套代码“翻译”成不同平台能理解的样子。
manifest.json 通常放在项目根目录，里面按平台区分配置。比如抖音端、微信端、支付宝端，各有各的专属字段。
你想想看，抖音小程序和微信小程序的导航栏样式能一样吗？抖音的导航栏背景色支持渐变色，微信就不行。这时候 manifest.json 就派上用场了。
多端适配的核心思路：共用配置放 app.json，平台差异配置放 manifest.json。
一个典型的 manifest.json 结构：
{
"platforms": {
"douyin": {
"window": {
"navigationBarTitleText": "抖音商城",
"navigationBarBackgroundColor": "#ff6600"
},
"permission": {
"scope.userLocation": {
"desc": "用于获取附近门店"
}
}
},
"wechat": {
"window": {
"navigationBarTitleText": "微信商城",
"navigationBarBackgroundColor": "#07c160"
},
"permission": {
"scope.userLocation": {
"desc": "用于获取附近门店"
}
}
}
}
}
为什么这么做？因为抖音和微信的 API 不完全一样。比如抖音的 tt.getUserInfo 和微信的 wx.getUserInfo，虽然功能类似，但参数和返回值有差异。manifest.json 就是用来处理这些差异的。
避坑指南：我曾经在适配抖音端时，发现 tabBar 的图标不显示。查了半天，原来是抖音要求图标路径必须是绝对路径，而微信支持相对路径。后来我在 manifest.json 里单独为抖音端配置了图标路径，问题解决。
3.4 三者的协作关系
这三个文件不是孤立的，它们协同工作：
- app.json：定义页面结构和全局样式，所有平台共用。
- project.config.json：只影响开发工具，不参与运行。
- manifest.json：覆盖 app.json 中的平台差异配置，实现多端适配。
说白了，app.json 是“通用版”，manifest.json 是“定制版”。当两个文件冲突时，manifest.json 的优先级更高。
举个例子：app.json 里设置了导航栏标题为“商城”，但抖音端想显示“抖音商城”，微信端想显示“微信商城”。这时候就在 manifest.json 里分别覆盖即可。
重要提醒：manifest.json 不是所有平台都支持。抖音小程序原生支持，但微信小程序需要借助第三方工具（如 uni-app）才能生效。如果你用的是原生抖音开发，manifest.json 是标配；如果是跨端框架，请查阅对应文档。
3.5 实战建议：如何组织多端配置
我个人习惯这样组织：
- 先写 app.json：把公共的页面、tabBar、窗口样式配好。
- 再写 manifest.json：针对抖音、微信等平台，逐项覆盖差异。
- 最后检查 project.config.json：确保 AppID 正确，编译设置合理。
另外，建议把 manifest.json 的配置项做成注释文档，方便团队其他人理解。毕竟多端配置一多，很容易漏掉某个平台的某个字段。
嗯，到这里，项目结构和配置这块就讲完了。下一章我们开始写真正的代码——页面布局与组件开发。