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

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

1. 菜单栏“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, 然后我们就可以跑起来我们这个小程序了。

本文由博客群发一文多发等运营工具平台 OpenWrite 发布