乐趣区

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

上一小节我们虽然构建了项目的目录,也配置了几个必要文件,但是我们的项目还是不能编译起来,我们还需要完善 app.jsonapp.jsapp.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
  • 新建第一个小程序页面
  • windowpages为重点

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

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

退出移动版