微信小程序开发入门教程（二）背景上一篇文章我们已经入门了小程序开发，申请了小程序号，也准备了开发环境，今天我们来分析一

背景

上一篇文章我们已经入门了小程序开发，申请了小程序号，也准备了开发环境，今天我们来分析一下小程序的项目结构。

项目结构

小程序的项目结构如下图所示，小程序的项目主要包含四种文件：

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

配置文件

小程序项目中包含很多的配置文件从不同的层次进行一些属性进行配置。

app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等，下表展示了app.json全部的27个配置项之前建立的测试项目的app.json如下，对于初学者可以不用过于关注每一个配置项，否则可能迷失于配置的海洋里，与此同时也可以看到其中必须的配置项只有两个，很多配置都是针对特定的场景，所以现在只需要对于app.json又一个感性的认识即可，里面包含了对于小程序的全局配置。

属性	类型	必填	描述
entryPagePath	string	否	小程序默认启动首页
pages	string[]	是	页面路径列表
window	Object	否	全局的默认窗口表现
tabBar	Object	否	底部 `tab` 栏的表现
networkTimeout	Object	否	网络超时时间
debug	boolean	否	是否开启 debug 模式，默认关闭
functionalPages	boolean	否	是否启用插件功能页，默认关闭
subpackages	Object[]	否	分包结构配置
workers	string	否	`Worker` 代码放置的目录
requiredBackgroundModes	string[]	否	需要在后台使用的能力，如音乐播放
plugins	Object	否	使用到的插件
preloadRule	Object	否	分包预下载规则
resizable	boolean	否	PC 小程序是否支持用户任意改变窗口大小（包括最大化窗口）；iPad 小程序是否支持屏幕旋转。默认关闭
usingComponents	Object	否	全局自定义组件
permission	Object	否	小程序接口权限相关设置
sitemapLocation	string	是	指明 sitemap.json 的位置
style	string	否	指定使用升级后的weui样式
useExtendedLib	Object	否	指定需要引用的扩展库
entranceDeclare	Object	否	微信消息用小程序打开
darkmode	boolean	否	小程序支持 DarkMode
themeLocation	string	否	指明 theme.json 的位置，darkmode为true为必填
lazyCodeLoading	string	否	配置自定义组件代码按需注入
singlePage	Object	否	单页模式相关配置	Object	否	聊天素材小程序打开相关配置
serviceProviderTicket	string	否	定制化型服务商票据
embeddedAppIdList	string[]	否	半屏小程序 appId
halfPage	Object	否	视频号直播半屏场景设置
debugOptions	Object	否	调试相关配置

下面则展示了我们建立的测试小程序的app.json的内容，这里面包含了必须的配置项。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages字段用于描述当前小程序所有页面路径，一个微信小程序往往包含了多个页面，页面都放在pages目录下，每一个也许都需要在app.json的pages字段下注册，否则跳转时会找不到页面。文件名不需要写文件后缀，框架会自动去寻找对应的 .json, .js, .wxml, .wxss 四个文件进行处理。例如我们测试项目的目录结构如下，包含两个页面index和log。

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

所以我们项目的app.json的pages配置如下

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

与此同时通过entryPagePath配置项配置小程序的启动页，如果没有配置则默认pages中的第一项为启动页。

window字段定义小程序所有页面的顶部背景颜色，文字颜色定义等，其具体的属性如下表所示。与此同时每个页面也拥有自己的页面的配置文件如index.json配置页面情况，配置内容如果与window中不相同则会覆盖window中的设置。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 `#000000`
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 `black` / `white`
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： `default` 默认样式 `custom` 自定义导航栏，只保留右上角胶囊按钮。
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 `dark` / `light`
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新。
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为 px。
pageOrientation	string	portrait	屏幕旋转设置，支持 `auto` / `portrait` / `landscape`
restartStrategy	string	homePage	重新启动策略配置
initialRenderingCache	string		页面初始渲染缓存
visualEffectInBackground	string	none	切入系统后台时，隐藏页面内容，保护用户隐私。支持 `hidden` / `none`
handleWebviewPreload	string	static	控制预加载下个页面的时机支持`static`/`manual`/`auto`

style是指定使用升级后的weui样式，sitemapLocation是指明sitemap.json的位置，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。

我们之前创建的测试项目页面很简单，在实际的项目中可能包含多个tab，其中tab的内容是靠tabBar配置项去配置的。可以通过 tabBar 配置项指定tab栏的表现，以及tab切换时显示的对应页面。其具体属性如下：

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色，仅支持 `black` / `white`
list	Array	是		tab 的列表，详见 `list` 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 `bottom` / `top`
custom	boolean	否	false	自定义 tabBar

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 `position` 为 `top` 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 `position` 为 `top` 时，不显示 icon。

具体对应关系如下图所示

project.config.json

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项，其具体配置项如下表：

字段名	类型	说明
miniprogramRoot	Path String	指定小程序源码的目录(需为相对路径)
qcloudRoot	Path String	指定腾讯云项目的目录(需为相对路径)
pluginRoot	Path String	指定插件项目的目录(需为相对路径)
cloudbaseRoot	Path String	云开发代码根目录(需为相对路径)
cloudfunctionRoot	Path String	云函数代码根目录(需为相对路径)
cloudfunctionTemplateRoot	Path String	云函数本地调试请求模板的根目录(需为相对路径)
cloudcontainerRoot	Path String	云托管代码根目录(需为相对路径)
compileType	String	编译类型
setting	Object	项目设置
libVersion	String	基础库版本
appid	String	项目的 appid，只在新建项目时读取
projectname	String	项目名字，只在新建项目时读取
packOptions	Object	打包配置选项
debugOptions	Object	调试配置选项
watchOptions	Object	文件监听配置设置
scripts	Object	自定义预处理
staticServerOptions	Object	仅在小游戏项目中有效

最后

有兴趣可以关注公众号QStack，会不定期发布文章的和免费的学习资源。

微信小程序开发入门教程（二）

背景

项目结构

配置文件

app.json

project.config.json

推荐阅读

最后