在开发我们的小程序之前请先仔细看完以下参考文档
小程序代码构成
我们通过开发者工具快速创建了一个 QuickStart 项目。你可以留意到这个项目里边生成了不同类型的文件:
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件
接下来我们分别看看这4种文件的作用
JSON配置
JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。
我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。
小程序配置 app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
QuickStart 项目里边的 app.json 配置内容如下：
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/index1/index",
"pages/home/home",
"pages/my/my" ],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black" },
"tabBar": {
"list": [
{ "pagePath": "pages/index/index","text": "首页" },
{ "pagePath":"pages/logs/logs","text": "日志" }]
},
"networkTimeout": { "request": 10000, "downloadFile": 10000 },
"debug": true,
"style": "v2",
"sitemapLocation": "sitemap.json"}
}
我们简单说一下这个配置各个项的含义:
pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等；不同页面有时需要不同配置，只能设置window属性，无须写window这个键
配置窗口状态：
backgroundColor：窗口的背景色，使用十六进制的RGB
backgroundTextStyle：下拉背景字体、loading图的样式，目前只支持设置为"dark" or "light
enablePullDownRefresh：是否开启下拉刷新
navigationBarBackgroundColor：导航栏背景颜色
navigatonBarTextStyle：导航标题颜色，目前只支持black and white
navigationBarTitleText：导航栏标题文字内容
配置窗口底部tabBar：
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
colorHexColor：tab上的文字默认颜色，仅支持十六进制颜色
selectedColorHexColor： tab上的文字选中时的颜色，仅支持十六进制颜色
backgroundColorHexColor:：tab的背景色，仅支持十六进制颜色
borderStylestring：上边框的颜色， 仅支持 black / white
listArray：tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position：tabBar 的位置，仅支持 bottom / top
custom：自定义 tabBar，见详情
小程序配置 project.config.json
小程序开发者工具在每个项目的根目录都会生成一个project.config.json，在工具上做的任何配置都会写入到这个文件，当重新安装工具或者换电脑工作时，只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
可以在项目根目录使用project.config.json文件对项目进行配置。
（1）compileType 有效值：
（2）setting 中可以指定以下设置：
（3）scripts 中指定自定义预处理的命令：
（4）packOptions：
packOptions用以配置项目在打包过程中的选项。打包是预览、上传时对项目进行的必须步骤。
目前可以指定packOptions.ignore字段，用以配置打包时对符合指定规则的文件或文件夹进行忽略，以跳过打包的过程，这些文件或文件夹将不会出现在预览或上传的结果内。
packOptions.ignore为一对象数组，对象元素类型如下：
其中，type可以取的值为folder、file、suffix、prefix，分别对应文件夹、文件、后缀、前缀。
示例配置如下：
{
"packOptions": {
"ignore": [{
"type":"file",
"value":"test/test.js" }, {
"type":"folder",
"value":"test" }, {
"type":"suffix",
"value":".webp" }, {
"type":"prefix",
"value":"test-" }]
}
}
注:value字段的值不支持通配符、正则表达式。若表示文件或文件夹路径，以小程序目录 (miniprogramRoot) 为根目录。
（6）debugOptions：
debugOptions用以配置在对项目代码进行调试时的选项。
目前可以指定debugOptions.hidedInDevtools字段，用以配置调试时于调试器 Sources 面板隐藏源代码的文件。
hidedInDevtools的配置规则和packOptions.ignore是一致的。
当某个 js 文件符合此规则时，调试器 Sources 面板中此文件源代码正文内容将被隐藏，显示为：
// xxx.js has been hided by project.config.json
注：配置此规则后，可能需要关闭并重新打开项目才能看到效果。
（7）项目配置示例：
{
"miniprogramRoot":"./src",
"qcloudRoot":"./svr",
"setting": {
"postcss": true,
"es6": true,
"minified": true,
"urlCheck": false
},
"packOptions": {},
"debugOptions": {}
}
目录结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
文件必需作用
app.js是小程序逻辑
app.json是小程序公共配置
app.wxss否小程序公共样式表
一个小程序页面由四个文件组成，分别是：
文件类型必需作用
js是页面逻辑
wxml是页面结构
json否页面配置
wxss否页面样式表
注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。
允许上传的文件格式
在项目目录中，以下文件会经过编译，因此上传之后无法直接访问到：.js、app.json、.wxml、*.wxss（其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面）。除此之外，只有后缀名在白名单内的文件可以被上传，不在白名单列表内文件在开发工具能被访问到，但无法被上传。具体白名单列表如下：
.wxs
.png
.jpg
.jpeg
.gif
.svg
.json
.cer
.mp3
.aac
.m4a
.mp4
.wav
.ogg
.silk
持续更新中...