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

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

5-1 新建第一个页面

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

pages数组是页面路径列表。

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

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

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

「webstorm」

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

 HTML 添加一项 .wxml

image

 CSS 添加一项 .wxss

image

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

image
image

「VScode」

  1. 从 VScode 商店中下载 Easy LESS 插件。
  2. 配置 settings.json 文件 (文件 - 首选项 - 设置 - 搜索设置 settings.json ),加入如下代码:
"less.compile": {

       "outExt": ".wxss"

   }
在 index 文件夹里新建 4 个文件来搭建第一个页面

1、新建后缀名为 .json 的文件,文件内容不能为空。

# index.json
{
   }

2、新建后缀名为 .wxml 的文件,文件内容不能为空。

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

3、新建后缀名为 .js 的文件,文件内容不能为空。

Page({

})

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

5-2 配置 app.json

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

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

设计稿

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

image

代码详细解析

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

//app.json

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

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

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

image

  • 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
  • 新建第一个小程序页面
  • windowpages为重点

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