项目结构
一、项目文件结构
当开发者新建一个工程，如图所示，项目文件包括根目录下的pages文件夹和utils文件夹，以及全局文件app.js、app.json、app.wxss、project.config.json和sitemap.json。
- 全局文件是对整个小程序的全局属性的定义，其
设置的属性优先级低于页面属性的优先级，即如果一
个页面的某一属性在全部文件和页面文件中同时被
设置的时候，页面属性设置将覆盖全局属性设置。 - pages文件夹是页面文件的所在，小程序中的
一 个页面对应一个文件夹，图中pages文件夹下有index和logs两个文件夹即对应两个页面。 - utils文件夹下存放着utils.js文件，是工具类
文件。
二、页面文件
一个完整的小程序页面由四部分组成：
- WXML文件：用于构建页面的结构；
- WXSS文件 ：用于设置页面的样式，该文件定
义的样式会覆盖app.wxss全局样式表中系统自定义的样式； - JS文件：用于设置当前页面的逻辑代码和用户交互；
- JSON文件：用于重新设置app.json中window自定义的内容，新设置的选项只会显示在当前页面上，不会影响其他页面。
WXML和JS文件是必不可少的，在不对页面文件进行相应设置或者不覆盖全局JSON和全局WXSS文件的时候，页面的JSON和WXSS文件可以没有。
当开发者新建一个小程序页面的时候，需要在全局文件app.json中注册，否则该页面将不能在项目中被执行。
上图是index和logs两个页面在全局文件app.json中注册的代码，需写在app.js的pages属性中。
三、全局配置文件
全局配置文件包括app.js、app.json、app.wxss、project.config.json和sitemap.json5个文件。其中前三个文件经常需要进行修改操作，而后两个文件则很少修改。
- app.js:必填文件，用于描述小程序的整体逻辑；
- app.json:必填文件，用于描述小程序的整体逻辑结构；
- app.wxss:可选文件，用于定义小程序的公共样式表；
- project.config.json:开发者工具上做的任何配置都会写入这个文件，当重新安装工具或者换计算机工作时，只要载入同一个项目的代码包，开发者工具就会自动恢复到当时开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等一系列选项；
- sitemap.json:用于配置小程序及其页面是否允许被微信索引，文件内容为一个JSON对象，如果没有sitemap.json,则默认为所有页面都允许被索引.
3.1、app.json
app.json文件是小程序中的全局配置文件，它决定页面的路径、窗口样式、tabBar样式、设置网络超时时间等。示例代码如下：
json
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Weixin",
"navigationBarBackgroundColor": "#ffffff"
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}根据需要，app.json文件可以对17个属性进行设置，其属性如表所示。
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
entryPagePath |
string | 否 | 小程序默认启动首页 |
pages |
string[] | 是 | 设置页面路径 |
window |
Object | 否 | 全局的默认窗口表现 |
tabBar |
Object | 否 | 底部tab栏的表现 |
networkTimeout |
Object | 否 | 网络超时时间 |
debug |
boolean | 否 | 是否开启debug模式，默认关闭 |
functionlPages |
boolean | 否 | 是否启用插件功能也，默认关闭 |
subpackages |
Object[] | 否 | 分包结构配置 |
workers |
string | 否 | Worker代码放置的目录 |
requiredBackgroundModes |
string[] | 否 | 需要在后台使用的能力，如【音乐播放】 |
requiredPrivateInfos |
string[] | 否 | 调用的地理位置相关隐私接口 |
plugins |
Object | 否 | 使用到的插件 |
preloadRule |
Object | 否 | 分包预下载规则 |
resizable |
boolean | 否 | iPad小程序是否支持屏幕旋转，默认关闭 |
navigateToMiniProgramAppldList |
string[] | 否 | 需要跳转的小程序列表，详见wx.navigateToMiniProgram |
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 | 否 | 单页模式相关配置 |
supportedMaterials |
Object | 否 | 聊天素材小程序打开相关配置 |
serviceProviderTicket |
string | 否 | 定制化型服务商票据 |
embeddedAppIdList |
string[] | 否 | 半屏小程序 appId |
halfPage |
Object | 否 | 视频号直播半屏场景设置 |
debugOptions |
Object | 否 | 调试相关配置 |
enablePassiveEvent |
Object或boolean | 否 | touch 事件监听是否为 passive |
resolveAlias |
Object | 否 | 自定义模块映射规则 |
renderer |
string | 否 | 全局默认的渲染后端 |
rendererOptions |
Object | 否 | 渲染后端选项 |
componentFramework |
string | 否 | 组件框架，详见相关文档 |
miniApp |
Object | 否 | 多端模式场景接入身份管理服务时开启小程序授权页相关配置，详见相关文档 |
static |
Object | 否 | 正常情况下默认所有资源文件都被打包发布到所有平台，可以通过 static 字段配置特定每个目录/文件只能发布到特定的平台(多端场景) 相关文档 |
convertRpxToVw |
boolean | 否 | 配置是否将 rpx 单位转换为 vw 单位，开启后能修复某些 rpx 下的精度问题 |
chatTools |
Object | 否 | 聊天工具分包配置 |
entryPagePath
指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。
json
{
"entryPagePath": "pages/index/index"
}pages
用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。
小程序中新增/减少页面，都需要对 pages 数组进行修改。
如开发目录为：
├── app.js
├── app.json
├── app.wxss
├── pages
│ │── index
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.wxss
│ └── logs
│ ├── logs.wxml
│ └── logs.js
└── utils则需要在 app.json 中写
json
{
"pages": ["pages/index/index", "pages/logs/logs"]
}window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
navigationBarBackgroundColor |
HexColor | #000000 | 导航栏背景颜色，如 #000000 |
navigationBarTextStyle |
string | white | 导航栏标题、状态栏颜色，仅支持 black / white |
navigationBarTitleText |
string | 导航栏标题文字内容 | |
navigationStyle |
string | default | 导航栏样式，仅支持以下值：default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。 |
homeButton |
boolean | false | 在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键 |
backgroundColor |
HexColor | #ffffff | 窗口的背景色 |
backgroundTextStyle |
string | dark | 下拉 loading 的样式，仅支持 dark / light |
backgroundColorTop |
string | #ffffff | 顶部窗口的背景色，仅 iOS 支持 |
backgroundColorBottom |
string | #ffffff | 底部窗口的背景色，仅 iOS 支持 |
enablePullDownRefresh |
boolean | false | 是否开启全局的下拉刷新。详见 Page.onPullDownRefresh |
onReachBottomDistance |
number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为 px。详见 Page.onReachBottom |
pageOrientation |
string | portrait | 屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化 2.4.0 (auto) / 2.5.0 (landscape) |
restartStrategy |
string | homePage | 重新启动策略配置 |
initialRenderingCache |
string | 页面初始渲染缓存配置，支持 static / dynamic | |
visualEffectInBackground |
string | none | 切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none |
handleWebviewPreload |
string | static | 控制预加载下个页面的时机。支持 static / manual / auto |
json
{
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
tabBar
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 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。 |
json
"tabBar": {
"backgroundColor": "#ffffff",
"selectedColor": "#E4393C",
"list": [
{
"pagePath": "pages/index/index",
"selectedIconPath": "images/1.png",
"iconPath": "images/1.png",
"text": "设置"
},
{
"pagePath": "pages/logs/logs",
"selectedIconPath": "images/2.png",
"iconPath": "images/2.png",
"text": "测试"
}
]
}
networkTimeout
各类网络请求的超时时间，单位均为毫秒。
| 属性 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
request |
number | 否 | 60000 | wx.request 的超时时间，单位：毫秒。 |
connectSocket |
number | 否 | 60000 | wx.connectSocket 的超时时间，单位：毫秒。 |
uploadFile |
number | 否 | 60000 | wx.uploadFile 的超时时间，单位：毫秒。 |
downloadFile |
number | 否 | 60000 | wx.downloadFile 的超时时间，单位：毫秒。 |
debug
可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。
requiredBackgroundModes
微信客户端 6.7.2 及以上版本支持，申明需要后台运行的能力，类型为数组。目前支持以下项目：
- audio: 后台音乐播放
- location: 后台定位
json
{
"pages": ["pages/index/index"],
"requiredBackgroundModes": ["audio", "location"]
}equiredPrivateInfos
自 2022 年 7 月 14 日后发布的小程序，使用以下8个地理位置相关接口时，需要声明该字段，否则将无法正常使用。2022 年 7 月 14 日前发布的小程序不受影响。
申明需要使用的地理位置相关接口，类型为数组。目前支持以下项目：
- getFuzzyLocation: 获取模糊地理位置
- getLocation: 获取精确地理位置
- onLocationChange: 监听实时地理位置变化事件
- startLocationUpdate: 接收位置消息（前台）
- startLocationUpdateBackground: 接收位置消息（前后台）
- chooseLocation: 打开地图选择位置
- choosePoi: 打开POI列表选择位置
- chooseAddress: 获取用户地址信息
json
{
"pages": ["pages/index/index"],
"requiredPrivateInfos": [
"getLocation",
"onLocationChange",
"startLocationUpdateBackground",
"chooseAddress"
]
}3.2、app.js
app.js文件是小程序的全局逻辑文件，其生命周期函数后面再介绍。app.js文件最常用的功能就是定义全局数据和全局函数。
app.js代码如下：
js
App({
globalData: {
info: "加法"
},
add: function(a, b) {
return a + b
}
})pages/index/index.wxml代码如下：
html
<view class="usermotto">
<text class="user-motto">
{{a}} + {{b}}{{info}}结果是{{c}}
</text>
</view>pages/index/index.js代码如下：
js
const app = getApp()
Page({
data: {
a: 5,
b: 5,
c: 0,
info: ""
},
onLoad: function() {
var c = app.add(this.data.a, this.data.b)
var info = app.globalData.info
this.setData({
c: c,
info: info
})
}
})
本例中的index.js引用了app.js中的变量Info和函数add,在index.js中声明const app = getApp()语句之后，app对象即包含了app.js中所有的变量和函数，而后app.Info和app.add()即可引用到app.js中的变量Info和函数add。
3.3、app.wxss
app.wxss文件是小程序的全局样式文件，app.wxss文件用于规定项目中所有页面的公共样式。
css
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}