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

上一小节我们虽然构建了项目的目录，也配置了几个必要文件，但是我们的项目还是不能编译起来，我们还需要完善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

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

将 HTML 添加一项 .wxml

将 CSS 添加一项 .wxss

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

VScode

1. 从 VScode 商店中下载 Easy LESS 插件。

2. 配置 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,然后我们就可以跑起来我们这个小程序了。