配置小程序项目的第一个页面—小程序入门与实战（五）

上一小节我们虽然构建了项目的目录，也配置了几个必要文件，但是我们的项目还是不能编译起来，我们还需要完善app.json、app.js、app.wxss这3个文件跟之前我们说的src/pages/index文件夹。

3-4 新建第一个页面

有人会疑惑，为什么配置app.json之前需要新建第一个页面，你们忘记了吗？app.json里面有一个pages属性，是必选项。

pages数组事页面路径列表。

配置编辑器 less 自动编译成 wxss

因为我们是用 less 开发通过编辑器自动编译成 wxss，所以我们需要对编辑器进行一些配置。

下面介绍 Webstorm 跟 VScode 这两种常用编辑器的配置。

webstorm

菜单栏 “File” > “Settings” > “Editor” > “File Types”

将 HTML 添加一项 .wxml

将 CSS 添加一项 .wxss

菜单栏 “File” > “Settings” > “Tools”

VScode

从 VScode 商店中下载 Easy LESS 插件。
配置 settings.json 文件（文件 - 首选项 - 设置 - 搜索设置 settings.json ）,加入如下代码:
```
"less.compile": {"outExt": ".wxss"}
```
在 index 文件夹里新建 4 个文件来搭建第一个页面

新建后缀名为 .json 的文件，不能为空。

# index.json
{}

新建后缀名为 .wxml 的文件，不能为空。

<view><view>果酱先生这是首页</view>
</view>

新建后缀名为 .js 的文件，不能为空。

Page({})

新建后缀名为 .less 的文件，如果你配置好了编辑器，就会自动生成 .wxss 文件。

3-5 配置 app.json

之前我们简单的了解到 app.json 是当前小程序的全局配置。

我们来看看果酱先生这个小程序项目应该怎么配置。

设计稿

这是果酱先生小程序项目的首页

代码详细解析

从设计稿来看，导航栏标题为“果酱先生”，字体颜色为 “白色” ，导航栏背景颜色为 “蓝色” ，窗口的背景颜色我们将他先设置为 “#f3f3f3”.

//app.json{"pages": ["pages/index/index"],"window": {"navigationBarTitleText":"果酱先生","navigationBarBackgroundColor": "#002FA7","navigationBarTextStyle": "white","backgroundColor": "#F3F3F3"},"networkTimeout": {"request": 60000,"downloadFile": 60000}
}

window 用于设置小程序的状态栏、导航条、标题、窗口颜色，不是必填项。

navigationBarTitleText ：导航栏标题文字内容,只能是 string 类型。

navigationBarTextStyle : 导航栏标题颜色，仅支持 black / white，我们用的是 white。
navigationBarBackgroundColor: 导航栏背景颜色，只能是 HexColor 类型，我们这里是 #002FA7。
backgroundColor: 窗口的背景色,也只能是 HexColor 类型。

networkTimeout 网络超时时间，不是必填项。

request:表示 wx.request 的超时时间，单位毫秒。
uploadFile:表示 wx.uploadFile 的超时时间，单位毫秒。

pages 是指小程序由哪些页面组成，每一项都对应一个页面的路径信息。文件名是不需要后缀的，框架会自己去找对应位置的。

数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

|——pages|——index|——index.wxml|——index.js|——index.json|——index.wxss

则需要在 app.json 中写

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

总结

配置less 编译成 wxss
新建第一个小程序页面
window、pages为重点

下一小节我们介绍如何配置app.js跟 app.wxss,然后我们就可以跑起来我们这个小程序了。