微信小程序入门与实战--小程序启动页制作

上篇我们通过模板创建了一个简单的小程序demo,通过这个demo,我们了解了微信小程序项目的基本结构。本篇将创建一个新的项目,完成小程序项目启动页的制作。

初始化项目

为了完成上述功能,需要创建一个空项目,并初始化它,下面是初始化项目的相关操作

  1. 首先,先创建一个不使用模板的空项目
  2. 接着,创建项目的入口文件app.jsapp.jsonapp.wxss
  3. 然后,创建pages目录,用于存放页面相关文件。在pages目录下再创建一个welcome目录,用于存放welcome页面相关文件
  4. 最后,在welcome目录下,创建welcome.jswelcome.wxmlwelcome.wxss这三个文件。

这样,我们就完成了项目的初始化

制作项目启动页

尝试一下

上篇提到,*.wxml相当于传统页面中的html文件。因此,我们可以在welcome.wxml文件中尝试写下如下代码。

1
2
3
<view>
<text>hello</text>
</view>

通过上面的代码,我们已经创建了一个简单的页面。现在,我们需要在app.json这个全局配置文件中添加pages字段,以便项目能找到该页面

1
2
3
4
5
{
"pages":[
"pages/welcome/welcome"
]
}

通过配置该字段,小程序就能够找到该页面,并显示内容了。查看小程序开发文档中关于pages字段的描述,可以看到如下定义

pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录

如果你的程序没有写错,则模拟器显示如下的效果

项目启动页

制作启动页

通过上面的操作,我们已经成功创建了一个极其简单的页面。现在,我们开始做一个实际的启动页。先来看一下完成的启动页效果。

启动页效果

在这个启动页中,我们将使用小程序中的viewimagetext这三种标签,其含义如下

  • view标签相当于html中的div标签
  • image标签则相当于html中的img标签
  • text标签则用来包含文本

搭建启动页骨架

分析上面的效果图,可以看到,启动页的内容由一张图片,一段文本以及一个内有文本的长方形区域组成。因此,welcome.wxml里的代码可以如下所写

1
2
3
4
5
6
7
<view>
<image></image>
<text></text>
<view>
<text></text>
</view>
</view>

接下来,我们要做的就是在此基础之上填充有关内容。

  • 首先,我们在项目根目录下新建目录images,该目录用来存放项目中用到的图片。我们随意找一张图片avatar.jpg,将图片放到该目录下,并添加imagesrc属性引用该图片
  • 然后,在第一、二个text标签内填写相应的文本

此时,welcome.wxml代码如下

1
2
3
4
5
6
7
<view>
<image src="/images/avatar.jpg"></image>
<text>Hello,七月</text>
<view>
<text>开始小程序之旅</text>
</view>
</view>

该图片宽高值将采用image标签默认的宽高值(默认宽度300px,高度225px)。现在,我们给image标签添加样式代码style="height:200rpx;weight:200rpx",至于为什么宽高单位采用的是rpx,而不是px,后面再说。

小程序页面

下面,我们将添加启动页的样式,进一步完善启动页

添加启动页样式

为了更好地重用样式代码,我们将样式代码写在welcome.wxss文件里。

为图片添加样式

删除图片样式代码,为图片添加class属性,指定其样式类为user-avatar,在文件中添加如下代码

1
2
3
4
.user-avatar{
width: 200rpx;
height: 200rpx;
}
设置启动页各元素的显示方式

通过上面的步骤,我们已经设置好了图片的宽高值。现在,我们继续添加代码,使得图中各元素呈现出垂直水平居中排列的效果。为实现该效果,为外层view标签添加class属性,指定其样式类为container并指定其具体样式

1
2
3
4
5
6
.container{
display: flex;
flex-direction: column;
align-items: center;
background-color: #b3d4db;
}

可以看到,该段代码指定其显示方式为弹性布局,其方向为按垂直方向排列,并指定各元素居中

设置文本样式

接下来,我们来修改文本样式

  1. 为第一个text标签添加class属性,指定其样式类为user-name,并单独设置“Hello”文本颜色为红色
  2. 为第二个text标签指定其样式类为moto
  3. 指定文本字体样式
1
2
3
4
5
6
7
8
9
.user-name {
font-size: 32rpx;
font-weight: bold;
}
.moto {
font-size: 22rpx;
font-weight: bold;
}

由于我们对这两处的文本采用同一种字体,因此,可以在app.wxss文件里指定文本通用字体为微软雅黑,减少重复代码

1
2
3
test {
font-family: MicroSoft Yahei;
}

再次来看一下效果

小程序页面2

为“开始小程序之旅”添加样式

这一步,我们为长方形区域添加样式,实现效果图。

  1. 首先,我们为包含“开始小程序之旅”文本的父标签view,添加class属性,指定其样式类为moto-container
  2. 然后,我们添加相关样式属性,长方形区域的宽高、边框,圆角效果以及文本对齐方式等
1
2
3
4
5
6
7
8
.moto-container {
width: 200rpx;
height: 80rpx;
border-radius: 5px;
text-align: center;
line-height: 80rpx;
color: #405f80;
}

设置各个元素之间的间距

比照效果图,我们发现,在效果图中,图片和顶部以及各元素在垂直方向存在一定的间距。其中,各元素之间的间距有两个,一个是图片和文字之间的间距,另外一个是文字和长方形区域之间的间距。通过分析,我们可以在以下样式类中添加代码margin-top: 200rpx;来实现间距效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.user-avatar{
width: 200rpx;
height: 200rpx;
margin-top: 160rpx;
}
.user-name {
margin-top: 200rpx;
font-size: 32rpx;
font-weight: bold;
}
.moto-container {
margin-top: 200rpx;
border: 1px solid #405f80;
width: 200rpx;
height: 80rpx;
border-radius: 5px;
text-align: center;
line-height: 80rpx;
color: #405f80;
}

设置启动页背景色

为了添加启动页的背景色,我们先打开调试器,选择wxml选项卡,可以看到在最终的wxml代码中,微信小程序给我们的代码包装了一层page标签,所以,如果要实现给整个启动页添加背景色,应该通过设置page标签的样式来达成目标

1
2
3
4
page {
height: 100%;
background-color: #b3d4db;
}

设置导航条颜色

默认情况下,小程序最上面带有一个导航条,其颜色默认是黑色的。为了使导航条颜色和小程序启动页背景色一致,需要在app.wxml文件中配置windownavigationBarBackgroundColor属性,保证其属性值和启动页背景色值一样

1
2
3
4
5
6
7
8
{
"pages":[
"pages/welcome/welcome"
],
"window":{
"navigationBarBackgroundColor":"#b3d4db"
}
}

新版本异常修复

对于新版本来说,可能会出现pages/welcome/welcome.js 出现脚本错误或者未正确调用 Page()错误,这时要在welcome.js文件中添加以下代码

1
2
3
Page({
})

至此,小程序启动页就完成了