若想开发一个微信小程序，首先应学习如何进行页面制作，也就是学习如何搭建微信小程序的页面结构并实现美观的页面样式效果。为了使初学者快速掌握微信小程序的页面制作，本章将从微信小程序常用组件、页面样式等方面进行详细讲解。

学习目标：

• 了解 WXML 的概念，能够说出 WXML 的特点、WXML 与 HTML 的区别
• 了解 WXSS 的概念，能够说出 WXSS 的特点、WXSS 与 CSS 的区别
• 了解组件的概念，食能够说出组件的特点及常用的组件
• 掌握页面路径的配置方法，能够运用该方法进行页面管理
• 掌握 view 组件的使用方法，能够灵活运用 view 组件实现页面的布局效果
• 掌握 image 组件的使用方法，能够灵活运用 image 组件完成图片插入操作
• 掌握 rx 单位的使用方法，能够灵活运用 rpx 单位解决屏幕适配的问题
• 掌握页面样式的导入方法，能够灵活运用该方法导入公共样式
• 掌握 swiper 和 swiper-item 组件的使用方法，能够灵活运用 swiper 和 swiperitem 组件完成轮播图的制作
• 掌握 text 组件的使用方法，能够灵活运用 text 组件定义行内文本
• 掌握 Flex 布局的使用方法，能够使用 Flex 布局的相关属性完成页面布局
• 掌握导航栏的配置方法，能够完成导航栏标题颜色、背景颜色等页面效果的设置

# 1 WXML

概念：在制作微信小程序页面时，页面的结构可以用 WXML 来实现。WXML 是微信团队为微信小程序开发而设计的一套语言，可以结合微信小程序中的各种组件构建页面结构。

WXML 与 HTML 的区别

• HTML 和 WXML 使用的标签不同。例如，HTML 经常使用 <div> 标签搭建页面结构，而 WXML 则使用 < view > 标签搭建页面结构；HTML 经常使用 < span > 标签定义行内文本 ，而 WXML 则使用 < text > 标签定义行内文本 。

• WXML 提供了和 Vue.js 中模板语法类似的模板语法，例如数据绑定、列表渲染、条件渲染等，而 HTML 中没有。

• HTML 页面可以在浏览器中预览，而 WXML 页面仅能在微信客户端和微信开发者工具中预览。

• WXML 中的单标签必须在结尾 “>” 前面加上 “/”，否则微信开发者工具会报语法错误，而 HTML 中允许省略单标签 “>” 前面的 “/”。

• WXML 中所使用的标签是微信小程序定义的标签，应避免使用 HTML 标签，这样才能保证页面被正确转译。

# 2 WXSS

概念：在微信小程序的页面制作中，使用 WXML 搭建页面结构以后，也需要设置样式来美化页面。微信小程序提供了一套类似 CSS 的语言 WXSS，通过 WXSS 可以美化页面样式。

WXSS 与 CSS 的区别

• 不同的手机屏幕分辨率不同，如果用 CSS 中的 px 单位，会遇到屏幕适配的问题，需要手动进行像素单位换算。而微信小程序提供了一个新的单位 rpx，使用 rpx 单位可以很轻松地适配各种手机屏幕。
• 在微信小程序中，项目根目录中的 app.wxss 文件作为全局样式，会作用于当前微信小程序的所有页面，而局部页面的 WXSS 样式仅对当前页面生效，CSS 则没有这样的功能。
• 在 WXSS 中设置背景图片的时候，可以使用网络图片或者以 Base64 格式编码的图片，不能使用本地图片，例如，“background-image:url ('/images/1.png'); ” 是无效的，而 CSS 可以使用本地图片来设置背景图片。

# 3 常用组件

概念：微信小程序页面和普通网页都是通过标签来定义页面结构的，但是在微信小程序开发中，更习惯将这些标签称为组件，这些组件自带微信风格的 UI 样式和特定功能效果。微信小程序提供了丰富的组件，通过组合这些组件可以进行高效开发。

# 4 页面路径配置

开发一个功能完整的微信小程序时，一般需要制作多个页面。

在微信小程序中可以通过 app.json 全局配置文件中的 pages 配置项来配置微信小程序的页面路径。pages 配置项是一个数组，该数组用于指定微信小程序由哪些页面组成，数组中的每一个元素都对应一个页面的路径信息。

"pages": [

  "pages/index/index",

  "pages/logs/logs"

],

上述代码中共配置了两个页面，分别是 pages/index/index 页面和 pages/logs/logs 页面。

默认情况下，pages 数组中的第一项为微信小程序的初始页面，即 pages/index/index 页面。如果想将其他页面设置为初始页面，读者可以手动调整数组中元素的顺序，将需要设为初始页面的页面路径设为第一项即可。

pages/index/index 中的 pages 表示存放页面的目录，index/index 中第一个 index 表示 index 目录，第二个 index 表示文件名。 同理，pages/logs/logs 中的 pages 表示存放页面的目录，logs/logs 中第一 logs 表示 logs 目录，第二个 logs 表示文件名。

注意：文件名不需要写后缀名，以 pages/index/index 页面为例，配置成功后，微信开发者工具会自动生成 index.wxml 文件、index.wxss 文件、index.js 文件和 index.json 文件

创建新页面的方法

• 通过 pages 数组中新增一项来新增页面
  • 如果需要在微信小程序中创建一个新的页面，可以在 app.json 文件的 pages 数组中增加一项新页面的信息，微信开发者工具会创建对应的页面。
• 通过项目资源管理器新增页面
  • 通过在微信开发者工具的项目资源管理器的 pages 目录下右键单击鼠标，选择 “新建 Page” 来创建页面，微信开发者工具会自动在 app.json 文件中添加对应的路径。

如果对页面文件直接进行删除操作，则不会触发代码的自动更新效果，需要手动修改 app.json 文件中的 pages 数组

# 5 view 组件

在 HTML 中，<div> 标签可以定义文档中的分区或节，把文档分割为独立的、不同的部分，在 WXML 中，view 组件起着类似的作用。view 组件表示视图容器，常用于实现页面的布局效果。

view 组件通过 <view> 标签定义，示例代码如下。

<view>view组件</view>

view 组件提供了一些属性，用于实现特殊的效果。

view 组件的常用属性：

点击态是指手指在屏幕上按下时的状态

# 6 image 组件

微信小程序提供了用于显示图片的 image 组件，并且 image 组件的功能比 HTML 中的 <img> 标签更强大，支持对图片进行剪裁和缩放。image 组件的默认宽度为 300px，默认高度为 240px。

image 组件通过 <image> 标签定义，支持单标签和双标签两种写法

# 单标签写法

<image src="图片资源地址" />

# 双标签写法

<image src="图片资源地址"></image>

image 组件的常用属性:

图片资源地址 src 可以是本地路径或 URL 地址。如果使用本地路径，可以在项目中创建一个目录，例如 images 目录，并在该目录中放入图片，例如 test.jpg，然后通过本地路径 /images/test.jpg 即可引用图片。

image 组件的 mode 属性用于指定图片的裁剪模式或缩放模式

常用的 mode 合法值：

# 7 rpx 单位

rpx（Responsive Pixel，自适应像素）。

rpx 单位是微信小程序独有的、用来解决屏幕适配问题的尺寸单位

rpx 单位的设计思想是把所有设备的屏幕在宽度上等分为 750 份，即屏幕的总宽度为 750rpx。微信小程序在不同设备上运行的时候，会自动把 rpx 单位换算成对应的像素单位来渲染，从而实现屏幕适配。

# 8 样式导入

在微信小程序中，多个不同的页面可能需要编写相同的样式代码，这样会造成代码冗余。为了避免代码冗余，可以将相同的样式代码抽为公共样式，放到一个单独的文件中，通过只修改公共样式实现对所有相关页面样式的修改，从而节约时间、方便管理。

步骤 1：在微信小程序的目录下创建一个公共样式文件 page.wxss，在该文件中编写公共样式代码。

/** page.wxss **/

.name {

  padding: 5px;

}

步骤 2：在 pages/index/index.wxss 文件中导入 page.wxss 文件。

/** index.wxss **/

@import “/page.wxss";

添加上述代码后，即可导入 page.wxss 文件中定义的样式。

# 9 swiper 和 swiper-item 组件

swiper 组件表示滑块视图容器，用于创建一块可以滑动的区域。

swiper 组件内部需要嵌套 swiper-item 组件，swiper-item 组件表示滑块视图内容。

swiper 组件的默认高度为 150px，默认宽度为 100%。swiper-item 组件的初始高度和初始宽度都为 100%。

swiper 组件通过 <swiper> 标签定义，swiper-item 组件通过 < swiper-item > 标签定义

<swiper>

  <swiper-item>1</swiper-item>

  <swiper-item>2</swiper-item>

  <swiper-item>3</swiper-item>

</swiper>

swiper 组件为外层容器，内层有 3 个 swiper-item 组件，表示当前滑块视图内容一共有 3 项。滑块视图内容在初始状态下只显示第 1 项，向左滑动显示第 2 项，再向右滑动可以返回第 1 项。

swiper 组件的常用属性：

# 实现轮播图3秒自动无缝切换效果，同时显示面板指示点，并设置指示点颜色为黄色、当前选中指示点颜色为红色

<swiper current="2" indicator-dots indicator-color="yellow" indicator-active-color="red" autoplay="true" interval="3000" circular="true">

  <swiper-item style="background: lightblue">0</swiper-item>

  <swiper-item style="background: lightcoral">1</swiper-item>

  <swiper-item style="background: lightgrey">2</swiper-item>

</swiper>

# 10 text 组件

在 HTML 中，一般通过 <span> 标签定义行内文本，而在微信小程序中，则可以通过 text 组件定义行内文本。需要注意的是，text 组件内部只能嵌套 text 组件。

text 常用属性

<text user-select="true">微信小程序</text>

设置 user-select 属性值为 true，实现长按选中文本

# 11 Flex 布局

在微信小程序中可以使用 Flex 布局实现自适应页面。

Flex 布局又称为弹性盒（Flexible Box）布局，它为盒子模型提供了很强的灵活性，任何一个容器都可以指定为 Flex 布局。

基本概念

Flex 容器：采用 Flex 布局的元素，称为 Flex 容器（简称容器）。

Flex 项目：Flex 容器的所有子元素自动成为容器成员，称为 Flex 项目（简称项目）。

Flex 容器内有两根轴：主轴（Main Axis）和交叉轴（Cross Axis），默认情况下主轴为水平方向，交叉轴为垂直方向，项目默认沿主轴排列。

若想使用 Flex 布局，首先要设置父元素的 display 属性为 flex，表示将父元素设置为容器，然后就可以使用容器和项目的相关属性了。

容器常用属性

项目的常用属性

• flex-direction 属性用于设置主轴方向，通过设置主轴方向可以规定项目的排列方向，它有以下 4 个常用的可选值。
• row：默认值，主轴为从左到右的水平方向。
• row-reverse：主轴为从右到左的水平方向。
• column：主轴为从上到下的垂直方向。
• column-reverse：主轴为从下到上的垂直方向。

flex-direction 属性的使用

# 1编写页面结构代码。

<view class="demo1">

  <view>1</view>

  <view>2</view>

  <view>3</view>

</view>

#2 编写页面样式代码。

.demo1 {

  display: flex;

  flex-direction: column;

}

justify-content 属性用于设置项目在主轴方向上的对齐方式，能够分配项目之间及其周围多余的空间，它有以下 5 个常用的可选值。

• flex-start：默认值，表示项目对齐到主轴起点，项目间不留空隙。
• flex-end：项目对齐到主轴终点，项目间不留空隙。
• center：项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离。
• space-between：两端对齐，两端的项目分别靠向容器的两端，其他项目之间的间隔相等。
• space-around：每个项目之间的距离相等，第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间距的一半。

justify-content 属性的使用

# 1编写页面结构代码。

<view class="demo2">

  <view>1</view>

  <view>2</view>

  <view>3</view>

</view>

#2编写页面样式代码。

.demo2 {

  background-color: lightgrey;

  display: flex;

  justify-content: space-between;

}

align-items 属性用于设置项目在交叉轴上的对齐方式，它有以下 6 个常用的可选值。

• normal：默认值，等同于 stretch。
• stretch：未设置项目大小时将项目拉伸，填充满交叉轴方向剩余的空间。
• flex-start：项目顶部与交叉轴起点对齐。
• flex-end：项目底部与交叉轴终点对齐。
• center：项目在交叉轴的中间位置对齐。
• baseline：项目的第一行文字的基线对齐。

# 12 导航栏配置

在微信小程序中，有时为了页面美观，需要更改导航栏的样式。此时可以通过页面配置文件或全局配置文件对导航栏的样式进行配置。

导航栏的相关配置项:

在页面配置文件中对导航栏进行配置

以 pages/index/index.json 页面配置文件为例，通过 navigationBarTitleText 配置项设置导航栏标题为 “微信小程序”。

{

  "navigationBarTitleText": "微信小程序"

}

在全局配置文件中对导航栏进行配置

在全局配置文件 app.json 中，通过 window 配置项可以对全局默认窗口进行配置，配置后会对所有页面都会生效，且优先级低于页面级配置。例如，将导航栏的相关配置项写在 app.json 文件的 window 配置项中作为全局配置使用。

"navigationBarTitleText":  "微信小程序"

# 13 标签栏配置

通过标签栏可以很方便地在多个页面之间进行切换。在微信小程序的全局配置文件 app.json 中添加 tabBar 配置项即可实现标签栏配置。

tabBar 配置项的属性

标签栏数量：微信小程序中的标签栏分为顶部标签栏和底部标签栏，标签数量一般在 2~5 个之间。

# 演示tabBar配置项的属性使用

"tabBar": {

  "color": "#ccc",

  "selectedColor": "#ff4c91",

  "borderStyle": "black",

  "backgroundColor": "#fff",

  "list": [

  ]

},

# list数组中的每个元素都是一个代表标签按钮的对象，通过配置该对象的属性可以对标签栏中的每个标签按钮进行配置。list数组中最少需要配置2个标签按钮，最多只能配置5个标签按钮。

标签按钮的相关属性:

# tabBar配置项的属性使用

"list": [{

  "pagePath": "pages/index/index",

  "iconPath": "images/home.png",

  "selectedIconPath": "images/home-active.png",

  "text": "首页"

}, {

  "pagePath": "pages/list/list",

  "iconPath": "images/contact.png",

  "selectedIconPath": "images/contact-active.png",

  "text": "联系我们"

}]

# 需要注意的是，pages/index/index和pages/list/list这两个页面都必须在pages数组中配置并提前创建好对应的文件。

标签栏的效果：

# 14 vw、vh 单位

在使用 CSS 编写移动端的页面样式时，由于不同手机的屏幕宽高不同，屏幕适配会比较麻烦。针对这类型问题，通过视口单位可以有效解决。

视口表示可视区域的大小，视口单位主要包括 vw（Viewport Width）和 vh（Viewport Height），在 CSS 中很常用。

在微信小程序中也可以使用 vw 和 vh 单位。使用视口单位时，系统会将视口的宽度和高度分为 100 份，1vw 占用视口宽度的百分之一，1vh 占用视口高度的百分之一。vw、vh 是相对长度单位，永远以视口作为参考。例如，屏幕宽度为 375px，那么 1vw = 375px / 100 = 3.75px。

# 15 video 组件

微信小程序提供了 video 组件用来播放视频，video 组件的默认宽度为 300px，高度为 225px，可通过 WXSS 代码设置宽高。

# 视频在页面上循环播放

<video src="http://localhost:3000/01.mp4" loop="true"></video>

# video组件的src属性用于设置要播放视频的资源地址

# video组件的loop属性的属性值设置为true，表示循环播放视频

# 16 表单组件

微信小程序中的表单组件与 HTML 中的表单类似。微信小程序在 HTML 基础上做了封装，并且增加了一些组件。表单组件通常用于用户信息的填写，以便于把用户填写的信息提交给服务器。

常用的表单组件：

form 组件

form 组件表示表单容器，没有任何样式，需要配合其他表单组件一起使用，用于提交用户输入的信息和选择的选项。

form 组件内部可以包含若干个供用户输入或选择的表单组件，允许提交的表单组件为 switch、input、 checkbox、slider、radio 和 picker 组件。表单中携带数据的组件（如输入框）必须带有 name 属性值，否则无法识别提交的内容。

form 组件的常用属性：

button 组件

button 组件表示按钮，功能比 HTML 中的 button 按钮丰富。

button 组件的常用属性如下表所示。

button 组件的常用属性：

# button组件的

# 利用button组件的type属性改变按钮的样式，type属性的可选值有3个，分别是primary（绿色）、default（白色）、warn（红色）。

<button>普通按钮</button>

<button type="primary">主色调按钮</button>

<button type="warn">警告按钮</button>

# 第1个为普通按钮的样式类型，

# 第2个为主色调按钮的样式类型，

# 第3个为警告按钮样式类型。

input 组件

input 组件与 HTML 中的 <input> 标签作用类似，都用于接收用户的输入。在微信小程序中，input 组件增加了很多属性，使 input 组件使用起来更加简单、方便。

input 组件的常用属性：

input 组件的 type 属性

# input组件的使用

<input type="text "/>

<input type="number" />

# 设置type属性值为text，表示在微信客户端中运行的微信小程序出现文本输入键盘

# 设置type属性值为number，表示在微信客户端中运行的微信小程序出现数字输入键盘

checkbox 和 checkbox-group 组件

checkbox 组件表示多选项目，在进行多项选择时会用到。checkbox 组件一般与 checkbox-group 组件搭配使用，checkbox-group 组件表示多项选择器，内部由多个 checkbox 组件组成。建议将不同组的 checkbox 组件嵌套在不同的 checkbox-group 组件中，从而方便管理和区分。

checkbox 组件的常用属性:

# checkbox和checkbox-group组件的使用

<checkbox-group>

  <checkbox>蛋糕</checkbox>

  <checkbox>甜甜圈</checkbox>

  <checkbox>巧克力</checkbox>

</checkbox-group>

radio 和 radio-group 组件

radio 组件为单选项目，是表单中常用的组件，用于在从多个选项中选出一个，选项之间是互斥关系。radio 组件一般与 radio-group 组件搭配使用，radio-group 组件表示单项选择器，内部由多个 radio 组件组成。建议将不同组的 radio 组件分别嵌套在不同的 radio-group 组件中，从而方便管理和区分。

# radio和radio-group组件

# 通过radio和radio-group组件实现性别的单项选择。

<radio-group>

  <radio>男</radio>

  <radio>女</radio>

</radio-group>