微信小程序02-页面制作

微信小程序02-页面制作

1、案例：个人信息

（1）案例分析

• 需求：大学毕业后，许多大学生都将迈出校园去求职。为了让招聘人员快速地认识自己，可以做一个“个人信息”微信小程序，展示自己的个人信息。

• 整体页面可以分为上下两个部分。

  • 上半部分为头像区域，用于显示头像；
  • 下半部分为详细信息区域，用于显示姓名、年龄、性别、特长和爱好。

• 开发组件规划

  • 头像区域和详细信息区域使用view组件制作
  • 头像使用image组件制作

（2）知识储备-WXML

• 在制作微信小程序页面时，页面的结构可以用WXML来实现。WXML是微信团队为微信小程序开发而设计的一套语言，可以结合微信小程序中的各种组件构建页面结构。
• WXML VS HTML
  • ①HTML和WXML使用的标签不同。例如，HTML经常使用<div>标签搭建页面结构，而WXML则使用<view>标签搭建页面结构；HTML经常使用<span>标签定义行内文本，而WXML则使用<text>标签定义行内文本。
  • ②WXML提供了和Vue.js中模板语法类似和模板语法，例如数据绑定、列表渲染、条件渲染等，而HTML没有。
  • ③HTML页面可以在浏览器中预览，而WXML页面仅能在微信客户端和微信开发者工具中预览。
  • ④WXML中的单标签必须在结尾“>”前面加上“/”，否则微信开发者工具会报语法错误，而HTML中允许省略单标签“>”前面的“/”。
  • ⑤WXML所使用的标签是微信小程序定义的标签，应避免使用HTML标签，这样才能保证页面被正确转译。
  • HTML相关知识请参考HTML入门，VUE相关知识请参考Vue快速入门

（2）知识储备-WXSS

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

（2）知识储备-常用组件

• 微信小程序页面和普通网页都是通过标签来定义页面结构的，但是在微信小程序开发中，更习惯将这些标签称为组件，这些组件自带微信风格的UI样式和特定功能效果。

（2）知识储备-页面路径配置

• 在微信小程序中可以通过app.json全局配置文件中的pages配置项来配置微信小程序的页面路径。
• pages配置项是一个数组，该数组用于指定微信小程序由哪些页面组成，数组中的每一个元素都对应一个页面的路径信息。
• pages数组中的第一项为微信小程序的初始页面，即pages/index/index页面。
• 页面自动创建两种方式
  • 以pages/index/index页面为例，配置成功后，微信开发者工具会自动生成index.wxml文件、index.wxss文件、index.js文件和index.json文件。
  • 在pages目录下右键鼠标，选择“新建Page”来创建页面，微信开发者工具会自动在app.json文件中添加对应的路径。如果对页面文件直接进行删除操作，则不会触发代码的自动更新效果，需要手动修改app.json文件中的pages数组。

"pages": [
 "pages/index/index",
 "pages/logs/logs"
],

（2）知识储备-view组件

• 在WXML中，view组件表示视图容器，常用于实现页面的布局效果。类似HTML中的div。

<view>view组件</view>

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

• hover-class：

  • 实现手指按下后更改文字为加粗效果。

  <view hover-class="bold">手指按下后我会发生变化哦~</view>
  

  • 然后在页面的WXSS文件中定义样式类，示例代码如下。

  .bold {
    font-weight: bold;
  }
  

• hover-start-time：实现手指按住1秒后更改文字为加粗效果

  <view hover-start-time="1000" hover-class="bold">1秒后出状态</view>
  

• hover-stay-time：实现手指松开之后3秒内更改文字为加粗效果

  <view hover-stay-time="3000" hover-class="bold">我能点亮3秒</view>
  

（2）知识储备-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合法值如下

  

  

  • aspectFit缩放模式：维持图片宽高比不变的情况下使图片完整显示出来

  <image src="/images/demo01.jpg" mode="aspectFit" style="width: 200px; height: 195px;
  border: 1px solid black;" />
  

  

  • top裁剪模式：

  <image src="/images/demo02.jpg" mode="top" style="width: 300px; height: 240px;" />
  

  

（2）知识储备-rpx单位

• 在使用CSS编写移动端页面样式时，由于不同手机的宽度不同，故在换算单位时会遇到很多问题。
• 为了方便开发者适配各种手机屏幕，微信小程序在WXSS中加入了新的尺寸单位：rpx（Responsive Pixel，自适应像素）。rpx单位是微信小程序独有的、用于解决屏幕适配问题的尺寸单位。
• rpx单位的设计思想是把所有设备的屏幕在宽度上等分为750份，即屏幕的总宽度为750rpx。微信小程序在不同设备上运行的时候，会自动把rpx单位换算成对应的像素单位来渲染，从而实现屏幕适配。

（2）知识储备-样式导入

• 通过只修改公共样式实现对所有相关页面样式的修改，从而节约时间、方便管理。

@import "公共样式文件路径";

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

/** page.wxss **/
.name {
 padding: 5px;
}

• 在pages/index/index.wxss文件中导入page.wxss文件

/** index.wxss **/
@import "/page.wxss";

（3）案例实现

• 准备工作
  • ①创建项目。在微信开发者工具中创建一个新的微信小程序项目，项目名称为“个人信息”，模板选择“不使用模板”。
  • ②复制素材。将图片复制到images文件夹中，该文件夹保存了用户头像素材。

• **实现页面结构：**在pages/index/index.wxml文件中编写“个人信息”微信小程序的页面结构

<view>
   <!-- 头像区域 -->
   <view class="top">
     <view class="user-img">
       <image src="/images/avatar.png"></image>
     </view>
   </view>
   <!-- 详细信息区域 -->
   <view class="menu">
     <view class="item">姓名：张三</view>
     <view class="item">17</view>
     <view class="item">男</view>
     <view class="item">特长：手指特长</view>
     <view class="item">爱好：爱好女生</view>
   </view>
 </view>

• **实现页面样式：**在pages/index/index.wxss文件中编写页面样式

/**index.wxss**/
/* 头像区域的样式 */
.top {
  background: #3A4861;
  width: 100%;
  padding: 30rpx 0;
}
.top .user-img {
  width: 252rpx;
  margin: 0 auto;
 }
.top image {
  width: 252rpx;
  height: 252rpx;
  border-radius: 50%;
  border: 6rpx solid #777F92;
}
/* 详细信息区域的样式 */
.menu .item {
  height: 96rpx;
  line-height: 96rpx;
  border-bottom: 2rpx solid #ccc;
  padding: 0 40rpx;
  font-size: 34rpx;
}

• 页面实现效果

2、案例：本地生活

（1）案例分析

• 需求：“本地生活”微信小程序是一个介绍本地美食、装修、工作等信息的微信小程序，该微信小程序的首页包含轮播图区域和九宫格区域。

• 该页面分为上下两部分

  • 上半部分为轮播图区域
  • 下半部分为九宫格区域

• 开发组件规划

  • 轮播图区域使用swiper和swiper-item组件制作
  • 九宫格区域使用view组件、text组件和image组件制作

（2）知识储备-swiper组件

• 轮播图

  • swiper组件表示滑块视图容器，用于创建一块可以滑动的区域。
  • swiper组件内部需要嵌套swiper-item组件，swiper-item组件表示滑块视图内容。
  • 微信小程序没有严格规定swiper-item组件内部可以嵌套哪些组件。
    • 如果嵌套image组件，可以实现轮播图效果。
    • 如果嵌套view组件，可以实现view组件的滑动切换效果。

• 样式

  • swiper组件的默认高度为150px，默认宽度为100%。
  • swiper-item组件的初始高度和初始宽度都为100%。
  • swiper组件和swiper-item组件的样式都可以通过WXSS代码进行重置。

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

<swiper>
  <swiper-item>1</swiper-item>
  <swiper-item>2</swiper-item>
  <swiper-item>3</swiper-item>
</swiper> 

• swiper组件的常用属性
  • color类型表示颜色类型，可以设为十六进制颜色值、颜色名称、rgb()、rgba()等。
  • 面板指示点为轮播图下方的小圆点，可以显示当前轮播图有几张图片。
  • 衔接滑动的作用是当轮播图滑动到最后一张时，继续滑动可以返回第一张轮播图。

• 实现轮播图3秒自动无缝切换效果，同时显示面板指示点，并设置指示点颜色为黄色、当前选中指示点颜色为红色
  • 通过设置current属性，可以切换当前显示的swiper-item组件中的内容，其值是组件的索引，索引从0开始，对应swiper-item组件的顺序；
  • 通过设置indicator-color属性，更改指示点颜色为黄色；
  • 通过设置indicator-active-color属性，更改指示点选中时的颜色为红色；
  • 通过设置autoplay属性，使轮播图可以自动切换；
  • 通过设置interval属性，将自动切换的时间间隔更改为3秒；
  • 通过设置circular属性，使轮播图可以衔接滑动。

<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> 

（2）知识储备-text组件

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

<text>定义行内文本</text> 

• text组件的常用属性
  • space：设置不同枚举值，实现不同空格效果，否则只会显示一个空格。
  • decode：设置true，实现当text组件中的文本包含 、<、>、&、'、 、 时进行解码。
  • user-select：设置true，实现长按选中文本的效果。

（2）知识储备-Flex布局

• 在移动Web开发中，经常使用Flex布局来实现自适应页面。Flex布局用法便捷，能够通过简单的几行代码实现各种复杂的布局效果。在微信小程序中也可以使用Flex布局实现自适应页面。Flex布局相关知识请参考flex布局详解
  • Flex布局又称为弹性盒(Flexible Box)布局，它为盒子模型提供了很强的灵活性，任何一个容器都可以指定为Flex布局。
  • 采用Flex布局的元素，称为Flex容器（简称容器）。它的所有子元素自动成为容器成员，称为Flex项目（简称项目）。
  • 容器内有两根轴：主轴(Main Axis)和交叉轴(Cross Axis)，默认情况下主轴为水平方向，交叉轴为垂直方向，项目默认沿主轴排列，根据实际需要可以更改项目的排列方式。
  • 若想使用Flex布局，首先要设置父元素的display属性为flex，表示将父元素设置为容器，然后就可以使用容器和项目的相关属性了。
• 容器的常用属性

• 项目的常用属性

• flex-direction属性：用于设置主轴方向，通过设置主轴方向可以规定项目的排列方向。
  • row：默认值，主轴为从左到右的水平方向。
  • row-reverse：主轴为从右到左的水平方向。
  • column：主轴为从上到下的垂直方向。
  • column-reverse：主轴为从下到上的垂直方向。
• flex-direction页面结构的示例代码

<view class="demo1">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</view> 

• flex-direction页面样式的示例代码

.demo1 {
  display: flex;
  flex-direction: column;
} 

• justify-content属性：用于设置项目在主轴方向上的对齐方式，能够分配项目之间及其周围多余的空间。

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

• justify-content页面结构的示例代码

<view class="demo2">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</view> 

• justify-content页面样式的示例代码

.demo2 {
  background-color: lightgrey;
  display: flex;
  justify-content: space-between;
} 

• align-items属性：用于设置项目在交叉轴上的对齐方式。

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

• flex-wrap属性：用于规定是否允许项目换行，能够设置多行排列时换行的方向。

  • nowrap：默认值，表示不换行，如果单行内容过多，项目宽度可能会被压缩。
  • wrap：当容器单行容不下所有项目时允许换行排列。
  • wrap-reverse：当容器单行容不下所有项目时允许换行排列，换行方向为wrap的反方向。

（3）案例实现

• 准备工作
  • ①在微信开发者工具中创建一个新的微信小程序项目，项目名称为“本地生活”，模板选择“不使用模板”。
  • ②项目创建完成后，在app.json文件中配置一个pages/grid/grid页面，并将其他页面全部删除。
  • ③复制图片到images文件夹中，该文件夹保存了本项目所用到的图片素材。

• **实现页面结构：**在pages/grid/grid.wxml文件中编写“本地生活”微信小程序的页面结构。

<!--pages/grid/grid.wxml-->
<!--轮播图区域的结构 -->
<swiper indicator-dots="true" autoplay="true" interval="3000">
  <swiper-item>
    <image src="/images/swiper01.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/swiper02.jpg"></image>
  </swiper-item>
</swiper>
<!-- 九宫格区域的结构 -->
<view class="grids">
  <view class="item">
    <image src="/images/shi.png"></image>
    <text>美食</text>
  </view>
  <view class="item">
    <image src="/images/xiu.png"></image>
    <text>装修</text>
  </view>
  <view class="item">
    <image src="/images/yu.png"></image>
    <text>洗浴</text>
  </view>
  <view class="item">
    <image src="/images/che.png"></image>
    <text>汽车</text>
  </view>
  <view class="item">
    <image src="/images/chang.png"></image>
    <text>唱歌</text>
  </view>
  <view class="item">
    <image src="/images/fang.png"></image>
    <text>住宿</text>
  </view>
  <view class="item">
    <image src="/images/xue.png"></image>
    <text>学习</text>
  </view>
  <view class="item">
    <image src="/images/gong.png"></image>
    <text>工作</text>
  </view>
  <view class="item">
    <image src="/images/hun.png"></image>
    <text>结婚</text>
  </view>
</view>

• **实现页面样式：**在pages/grid/grid.wxss文件中分别完成轮播图区域和九宫格区域的页面样式编写。

/* pages/grid/grid.wxss */
/* 轮播图区域的样式 */
swiper {
  height: 350rpx;
}
swiper image {
  width: 100%;
  height: 100%;
}
/* 九宫格区域的样式 */
.grids {
  display: flex;
  flex-wrap: wrap;
}
/* 九宫格区域中每一个格子的样式 */
.grids .item {
  width: 250rpx;
  height: 250rpx;
  border-right: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.grids .item:nth-child(3) {
  border-right: 0;
}
.grids .item:nth-child(6) {
  border-right: 0;
}
.grids .item:nth-child(9) {
  border-right: 0;
}
/* 九宫格区域中每一个格子中的图片和文字的样式 */
.grids .item image {
  width: 70rpx;
  height: 70rpx;
}
.grids .item text {
  color: #999;
  font-size: 28rpx;
  margin-top: 20rpx;
}

• 页面实现效果

3、案例：婚礼邀请函

（1）案例分析

• 需求：当一对新人即将举办婚礼时，通常会向他们的亲朋好友发送婚礼邀请函。相比于传统的纸质邀请函，通过微信小程序发送邀请函会让人眼前一亮，给人们不一样的便捷体验。

• “婚礼邀请函”微信小程序由4个页面组成

  • “邀请函”页面：用于展示顶部图片、标题、合照、新郎和新娘姓名，以及婚礼信息。
  • “照片”页面：用于展示新郎和新娘的婚纱照。
  • “美好时光”页面：用于展示一对新人拍摄的一些视频。
  • “宾客信息”页面：用于填写宾客的信息，包括姓名、手机号、性别和需要的点心。

• 开发组件规划

  • 邀请函”页面的样式时，由于不同手机屏幕的宽高不同，为了确保页面显示完整，可以利用vw、vh尺寸单位来适配屏幕。
  • “照片”页面采用纵向轮播的方式进行展示。每一张轮播的图片都占满整个页面的图片区域，纵向滑动屏幕可以实现图片的纵向切换，并且右侧会显示指示点。在用户无操作时，图片会自动无缝轮播。
  • “美好时光”页面显示了一个视频列表，列表中的每一项都包含标题、拍摄日期和视频。视频可以显示出进度条、视频时长，并支持全屏显示。
  • “宾客信息”页面提供了一个表单。

（2）知识储备-导航栏配置

• 在微信小程序中，有时为了页面美观，需要更改导航栏的样式。此时可以通过页面配置文件或全局配置文件对导航栏的样式进行配置。
• 默认配置如下
  • navigationBarTitleText被配置为Weixin。
  • navigationBarBackgroundColor被配置为#fff。
  • navigationBarTextStyle被配置为black。

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

{
  "navigationBarTitleText": "微信小程序"
} 

• 全局配置文件app.json中对导航栏进行配置：在全局配置文件中，通过window配置项可以对全局默认窗口进行配置，配置后会对所有页面都生效，且优先级低于页面级配置。

"navigationBarTitleText": "微信小程序",

（2）知识储备-标签栏配置

• 通过标签栏可以方便地在多个页面之间切换。在微信小程序的全局配置文件app.json中添加tabBar配置项即可实现标签栏配置。
  • color：设置标签栏上文字的颜色为#ccc；
  • selectedColor：设置标签栏上的文字被选中时颜色为#ff4c91；
  • borderStyle：设置标签栏上边框的颜色为black；
  • backgroundColor：设置标签栏的背景色为#fff；
  • list：用于配置标签栏中每个标签按钮。list数组中最少需要配置2个标签按钮，最多只能配置5个标签按钮。

 1  "tabBar": {
 2    "color": "#ccc",
 3    "selectedColor": "#ff4c91",
 4    "borderStyle": "black",
 5    "backgroundColor": "#fff",
 6    "list": [
 7    ]
 8  }, 

• 通过配置标签按钮的对象的属性可以实现各种设定。标签按钮的相关属性如下。
  • pagePath属性用于设置页面路径；
  • iconPath属性用于设置未选中时的图标路径；
  • selected IconPath属性用于设置选中时的图标路径；
  • text属性用于设置标签按钮上显示的文字。

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

"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": "联系我们"
}] 

（2）知识储备-vw、vh单位

• 在使用CSS编写移动端的页面样式时，由于不同手机的屏幕宽高不同，屏幕适配会比较麻烦。针对这类问题，通过视口单位可以有效解决。
• 视口表示可视区域的大小，视口单位主要包括vw(Viewport Width)和vh(Viewport Height)，在CSS中很常用。在微信小程序中也可以使用vw和vh单位。
• 使用视口单位时，系统会将视口的宽度和高度分为100份，1vw占用视口宽度的百分之一，1vh占用视口高度的百分之一。vw、vh是相对长度单位，永远以视口作为参考。例如，屏幕宽度为375px，那么1vw = 375px / 100 = 3.75px。

（2）知识储备-video组件

• 相比于通过文字等其他媒体形式传递信息，通过视频传递信息的方式更吸引人。在微信小程序中，可以将视频素材加入页面中，从而丰富整个页面的呈现形式。
• 微信小程序提供了video组件用于播放视频，video组件的默认宽度为300px，高度为225px，可通过WXSS代码设置宽高。

<video>视频</video>

• video组件常用属性
  • src表示要播放视频的资源地址。
  • loop表示是否循环播放。

//表示循环播放http://localhost:3000/01.mp4地址的视频
<video src="http://localhost:3000/01.mp4" loop="true"></video>

（2）知识储备-表单组件

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

• form组件

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

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

  • <form>表单</form>
    

  • form常用属性如下

  

• button组件

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

  • <button>按钮</button>
    

  • button组件的常用属性如下

  

  • 下面演示如何利用button组件的type属性改变按钮的样式

  <button>普通按钮</button>
  <button type="primary">主色调按钮</button>
  <button type="warn">警告按钮</button>
  

• input组件

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

  • <input />
    

  • input组件的常用属性如下

  

  • input组件的type属性表示输入的类型，例如文本、数字、身份证等，不同的类型会弹出不同的屏幕键盘。input组件的type属性的可选值如下

  

  <input type="text" />
  <input type="number" />
  

• checkbox和checkbox-group组件

  • checkbox组件表示多选项目，在进行多项选择时会用到。checkbox组件一般与checkbox-group组件搭配使用，checkbox-group组件表示多项选择器，内部由多个checkbox组件组成。

  <checkbox>多选项目</checkbox>
  <checkbox-group>多项选择器</checkbox-group>
  

  • checkbox组件的常用属性如下

  

  <checkbox-group>
    <checkbox>蛋糕</checkbox>
    <checkbox>甜甜圈</checkbox>
    <checkbox>巧克力</checkbox>
  </checkbox-group> 
  

• radio和radio-group组件

  • radio组件为单选项目，是表单中常用的组件，用于从多个选项中选出一个，选项之间是互斥关系。radio组件一般与radio-group组件搭配使用，radio-group组件表示单项选择器，内部由多个radio组件组成。

  <radio>单选项目</radio>
  <radio-group>单项选择器</radio-group>
  

  • radio组件的常用属性如下

  

  <radio-group>
    <radio>男</radio>
    <radio>女</radio>
  </radio-group> 
  

（3）案例实现

• 准备工作

  • ①在微信开发者工具中创建一个新的微信小程序项目，项目名称为“婚礼邀请函”，模板选择“不使用模板”。
  • ②项目创建完成后，在app.json文件中配置4个页面。

  "pages": [
    "pages/index/index",
    "pages/guest/guest",
    "pages/video/video",
    "pages/picture/picture"
  ], 
  

  • ③复制图片到images文件夹中，该文件夹保存了本项目所用到的素材。

  

  • ④安装Node.js。Nodejs相关知识请参考Nodejs入门
  • ⑤启动服务器。切换工作目录到nodejs服务程序目录，打开命令提示符，然后在命令提示符中执行如下命令，启动服务器。

  node index.js
  

• 项目初始化

  • 标签栏的配置：在app.json文件中添加tabBar配置项完成标签栏的配置

  "tabBar": {
      "color": "#ccc",
      "selectedColor": "#ff4c91",
      "borderStyle": "white",
      "backgroundColor": "#fff",
      "list": [{
        "pagePath": "pages/index/index",
        "iconPath": "images/invite.png",
        "selectedIconPath": "images/invite.png",
        "text": "邀请函"
      }, {
        "pagePath": "pages/picture/picture",
        "iconPath": "images/marry.png",
        "selectedIconPath": "images/marry.png",
        "text": "照片"
      }, {
        "pagePath": "pages/video/video",
        "iconPath": "images/video.png",
        "selectedIconPath": "images/video.png",
        "text": "美好时光"
      }, {
        "pagePath": "pages/guest/guest",
        "iconPath": "images/guest.png",
        "selectedIconPath": "images/guest.png",
        "text": "宾客信息"
      }]
    }
  

  • 各个导航栏标题的配置：以pages/index/index.json文件为例，演示导航栏标题的配置

    {
      "navigationBarTitleText": "邀请函"
    } 
  

  • 全局样式文件中导航栏样式的配置：在app.json文件中编写导航栏样式的配置

    "window": {
      "backgroundTextStyle": "light",
      "navigationBarBackgroundColor": "#ff4c91",
      "navigationBarTextStyle": "white"
    }, 
  

  • 公共样式的编写：在app.wxss文件中定义公共样式

    page {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
    }
  

• **实现“邀请函”页面的结构：**在pages/index/index.wxml文件中编写“邀请函”页面的结构

<!--index.wxml-->
<!-- “邀请函”页面的背景图片 -->
<image class="bg" src="/images/bg_1.png"></image>
<!-- 内容区域的整体结构 -->
<view class="content">
  <!-- 顶部图片 -->
  <image class="content-gif" src="/images/save_the_date.gif"></image>
  <!-- 标题 -->
  <view class="content-title">邀请函</view>
  <!-- 合照 -->
  <view class="content-avatar">
    <image src="/images/avatar.png"></image>
  </view>
  <!-- 新郎和新娘的名字 -->
  <view class="content-info">
    <view class="content-name">
      <image src="/images/tel.png"></image>
      <view>张三</view>
      <view>新郎</view>
    </view>
    <view class="content-wedding">
      <image src="/images/wedding.png"></image>
    </view>
    <view class="content-name">
      <image src="/images/tel.png"></image>
      <view>李四</view>
      <view>新娘</view>
    </view>
  </view>
  <!-- 婚礼信息 -->
  <view class="content-address">
    <view>我们诚邀您来参加我们的婚礼</view>
    <view>时间：2024年10月1日</view>
    <view>地点：北京市海淀区XX路XX酒店</view>
  </view>
</view>

• **实现“邀请函”页面的样式：**在pages/index/index.wxss文件中编写“邀请函”页面的样式

/**index.wxss**/
/* 背景图片的样式 */
.bg {
  width: 100vw;
  height: 100vh;
}
/* 内容区域外层容器的样式 */
.content {
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 顶部图片区域的样式 */
.content-gif {
  width: 19vh;
  height: 18.6vh;
  margin-bottom: 1.5vh;
}
/* 标题区域的样式 */
.content-title {
  font-size: 5vh;
  color: #ff4c91;
  text-align: center;
  margin-bottom: 2.5vh;
}
/* 头像区域的样式 */
.content-avatar image {
  width: 24vh;
  height: 24vh;
  border: 3px solid #ff4c91;
  border-radius: 50%;
}
/* 新郎和新娘的名字区域的样式 */
.content-info {
  width: 45vw;
  text-align: center;
  margin-top: 4vh;
  display: flex;
  align-items: center;
}
/* 新郎和新娘的名字区域中姓名区域的样式 */
.content-name {
  color: #ff4c91;
  font-size: 2.7vh;
  line-height: 4.5vh;
  font-weight: bold;
  position: relative;
}
/* 姓名区域中电话图片的样式 */
.content-name > image {
  width: 2.6vh;
  height: 2.6vh;
  border: 1px solid #ff4c91;
  border-radius: 50%;
  position: absolute;
  top: -1vh;
  right: -3.6vh;
}
/* 新郎新娘名字区域中“喜”字图片的样式 */
.content-wedding {
  flex: 1;
}
.content-wedding > image {
  width: 5.5vh;
  height: 5.5vh;
  margin-left: 20rpx;
}
/* 婚礼信息区域的样式 */
.content-address {
  margin-top: 5vh;
  color: #ec5f89;
  font-size: 2.5vh;
  font-weight: bold;
  text-align: center;
  line-height: 4.5vh;
}
.content-address view:first-child {
  font-size: 3vh;
  padding-bottom: 2vh;
}

• **实现“照片”页面的结构：**在pages/picture/picture.wxml文件中编写“照片”页面的结构

<!--pages/picture/picture.wxml-->
<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots autoplay interval="3500" duration="1000" vertical circular>
  <swiper-item>
    <image src="/images/timg1.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/timg2.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/timg3.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/timg4.jpg"></image>
  </swiper-item>
</swiper>

• **实现“照片”页面的样式：**在pages/picture/picture.wxss文件中编写“照片”页面的样式

/* pages/picture/picture.wxss */
swiper {
  height: 100vh;
}
image {
  width: 100vw;
  height: 100vh;
}

• **实现“美好时光”页面的结构：**在pages/video/video.wxml文件中编写“美好时光”页面的结构

<!--pages/video/video.wxml-->
<view class="video">
  <view class="video-title">标题：海边随拍</view>
  <view class="video-time">拍摄日期：00:15:00</view>
  <video src="http://localhost:3000/01.mp4" objectFit="fill"></video>
</view>
<view class="video">
  <view class="video-title">标题：勿忘初心</view>
  <view class="video-time">拍摄日期：00:15:00</view>
  <video src="http://localhost:3000/02.mp4" objectFit="fill"></video>
</view>
<view class="video">
  <view class="video-title">标题：十年之约</view>
  <view class="video-time">拍摄日期：00:15:00</view>
  <video src="http://localhost:3000/03.mp4" objectFit="fill"></video>
</view>

• **实现“美好时光”页面的样式：**在pages/video/video.wxss文件中编写“美好时光”页面的样式

/* pages/video/video.wxss */
/* “美好时光”页面中的3个外层view组件的样式 */
.video {
  box-shadow: 0 8rpx 17rpx 0 rgba(7, 17, 27, 0.1);
  margin: 10rpx 25rpx;
  margin-bottom: 30rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  background: #fff;
}
/* 标题和拍摄日期区域的样式 */
.video-title {
  font-size: 35rpx;
  color: #333;
}
.video-time {
  font-size: 26rpx;
  color: #979797;
}
/* 视频区域的样式 */
.video video {
  width: 100%;
  margin-top: 20rpx;
}

• **实现“宾客信息”页面的结构：**在pages/guest/guest.wxml文件中编写“宾客信息”页面的结构

<!--pages/guest/guest.wxml-->
<!-- 页面的背景图片 -->
<image class="bg" src="/images/bj_2.png"></image>
<form>
  <view class="content">
    <!-- 姓名 -->
    <view class="input">
      <input name="name" placeholder-class="phcolor" placeholder="输入您的姓名" />
    </view>
    <!-- 手机号码 -->
    <view class="input">
      <input name="phone" placeholder-class="phcolor" placeholder="输入您的手机号码" />
    </view>
    <!-- 性别 -->
    <view class="radio">
      <text>请选择您的性别：</text>
      <radio-group>
        <radio>男</radio>
        <radio>女</radio>
      </radio-group>
    </view>
    <!-- 需要的点心 -->
    <view class="check">
      <text>请选择您需要的点心：</text>
      <checkbox-group>
        <checkbox>蛋糕</checkbox>
        <checkbox>甜甜圈</checkbox>
        <checkbox>巧克力</checkbox>
      </checkbox-group>
    </view>
    <button>提交</button>
  </view>
</form>

• **实现“宾客信息”页面的样式：**在pages/guest/guest.wxss文件中编写“宾客信息”页面的样式

/* pages/guest/guest.wxss */
/* 背景图片的样式 */
.bg {
  width: 100vw;
  height: 100vh;
}
/* 内容区域外层容器的样式 */
.content {
  width: 80vw;
  position: fixed;
  left: 10vw;
  bottom: 8vh;
}
/* 编写输入框的样式 */
.content .input {
  font-size: large;
  border: 1rpx solid #ff4c91;
  border-radius: 10rpx;
  padding: 1.5vh 40rpx;
  margin-bottom: 1.5vh;
  color: #ff4c91;
}
/* 手机号码区域的样式 */
.content .radio {
  font-size: large;
  margin-bottom: 1.5vh;
  color: #ff4c91;
  display: flex;
}
/* 需要的点心区域的样式 */
.content .check {
  font-size: large;
  margin-bottom: 1.5vh;
  color: #ff4c91;
}
.check checkbox-group {
  margin-top: 1.5vh;
  color: #ff4c91;
}
.check checkbox-group checkbox {
  margin-left: 20rpx;
}
.check checkbox-group checkbox:nth-child(1) {
  margin-left: 0;
}
/* 提交按钮的样式 */
.content button {
  font-size: large;
  background: #ff4c91;
  color: #fff;
}
.content .phcolor {
  color: #ff4c91;
}

• 页面实现效果