微信小程序案例2-3：婚礼邀请函

一、运行效果

• “婚礼邀请函”微信小程序由4个页面组成，分别是“邀请函”页面、“照片”页面、“美好时光”页面和“宾客信息”页面。每个页面顶部的导航栏和底部的标签栏是公共部分，在每个页面中都会出现；页面中间的部分是页面内容，每个页面的内容都不同。

• "邀请函"页面
  

• 照片页面
  

• 美好时光页面
  

• “宾客信息”页面
  

二、知识储备

（一）导航栏配置

• 目标：掌握导航栏的配置方法，能够完成导航栏标题颜色、背景颜色等页面效果的设置
• 在微信小程序中，有时为了页面美观，需要更改导航栏的样式。此时可以通过页面配置文件或全局配置文件对导航栏的样式进行配置。
  

（二）标签栏配置

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

• 通过标签栏切换页面效果

（三）vw、vh单位

• 目标：掌握vw、vh单位的使用方法，能够灵活运用vw、vh单位设置宽度和高度
• 在使用CSS编写移动端的页面样式时，由于不同手机的屏幕宽高不同，屏幕适配会比较麻烦。针对这类型问题，通过视口单位可以有效解决。视口表示可视区域的大小，视口单位主要包括vw（Viewport Width）和vh（Viewport Height），在CSS中很常用。

（四）video组件

• 目标：掌握video组件的使用方法，能够灵活运用video组件实现页面中视频的处理
• 微信小程序提供了video组件用来播放视频，video组件的默认宽度为300px，高度为225px，可通过WXSS代码设置宽高。
  

（五）表单组件

• 目标：掌握表单组件的使用方法，能够灵活运用表单组件完成表单页面的制作
• 微信小程序中的表单组件与HTML中的表单类似。微信小程序在HTML基础上做了封装，并且增加了一些组件。表单组件通常用于用户信息的填写，以便于把用户填写的信息提交给服务器。
  

（六）Node.js概述

• 目标：能安装Node.js，简单使用Node.js启动服务器，并且能访问服务器端资源
  

三、实现步骤

（一）准备工作

1、创建微信小程序

• 项目名称：婚礼邀请函
• 模板选择，不适用模板
  
• 单击【确定】按钮
  

2、清空index页面内容

• index.wxml
  

3、修改index页面配置文件

• 修改index.json
  

4、配置全局导航栏

• app.json
  
• 查看预览效果

5、准备图片素材

• 在项目根目录创建images目录，拷贝项目所需图片
  

6、在服务器端准备资源

• 服务器端目录
  
• 将视频资源放在htdocs目录
  
• 本地HTTP服务器- index.js
  没弄好 下一个

7、启动服务端

• 在命令行窗口执行命令：node index.js

• 在浏览器访问视频资源-http://localhost:8088/01.mp4
  

8、配置四个页面

• 在app.json文件里配置四个页面
  

（二）项目初始化

1、配置标签栏

• 编写标签栏样式的相关配置
  

• 在list数组里面配置标签按钮

• 查看预览效果
  

2、配置导航栏

• 配置邀请函页面的导航栏
  

• 查看预览效果
  

• 配置照片页面的导航栏
  

• 查看预览效果
  

• 配置美好时光页面的导航栏
  

• 查看预览效果
  

• 配置宾客信息的导航栏
  

• 查看预览效果
  

• 修改全局的导航栏配置
  

• 查看邀请函页面的导航栏
  

3、编写公共样式

• 在app.wxss文件里定义公共样式
  

（三）实现“邀请函”页面的结构

1、设置背景图片

• 在index.wxml文件里添加图像组件
  

• 查看预览效果

• 此时，背景图片没有充满“邀请函”页面，需要在样式文件里进行设置

2、编写内容区域的结构

• 包含顶部图片、标题、合照、新郎和新娘的姓名、婚礼信息区域
  
• 查看预览效果，有点凌乱
  

（四）实现“邀请函”页面的样式

1、编写背景图片的样式

• 让背景图片布满整个页面
  
• 查看预览效果，效果图片为最终图，能看懂就行
  

2、编写内容区域的外部容器样式

• 外部容器布满整个页面，采用固定定位，设置为纵向的Flex布局（纵向是主轴，横向是交叉轴），容器里的项目水平居中（交叉轴对齐方式 - align-items）
  

3、编写顶部图片区域样式

• 设置图片区域的宽度和高度以及下边距
  

4、编写标题区域样式

• 设置标题字号、颜色、对齐方式与下边距
  
• 查看预览效果，我懒，自己加油

5 、编写合照区域样式

• 设置合照区域宽度高度、边框与边框半径
  
• 查看预览效果
  

6、编写新郎和新娘区域的样式

• 设置新郎与新娘区域样式、新郎和新娘姓名样式、新郎和新娘电话图片样式、新郎和新娘中间的双喜图片样式
  
• 查看预览效果
  

7、编写婚礼信息区域样式

• 设置字号、颜色、对齐方式、行高
  
• 查看预览效果，“邀请函”页面彻底完成
  

（五）实现“照片”页面的结构

• 在photo。wxml文件里，实现轮播效果
  
• 查看预览效果
  

（六）实现“照片”页面的样式

• 在photo.wxss文件里设置“照片”页面的样式

• 查看预览效果
  

（七）实现“美好时光”的页面的结构

• 在time.wxml文件里编写“美好时光”页面的结构
  

• 启动后台服务器，才能访问到视频资源
  

• 查看预览效果
  

（八）实现“美好时光”页面的样式

• 在time.wxss文件里实现“美好时光”页面的样式
  
• 查看预览效果
  

（九）实现“宾客信息”页面的结构

1、实现“宾客信息”页面的背景图片

• 在guest.wxml里添加图像组件，设置背景图片
  
• 查看预览效果
  

2、编写内容区域整体页面结构

• 添加一个表单，在表单里添加一个所需的组件
  

3、实现姓名区域的结构

• 添加一个input组件
  

4、实现手机号码区域的结构

• 在相应位置添加一个input组件
  

5、实现性别区域的结构

• 在相应位置添加一个文本组件，一个单选按钮和两个单选按钮
  

6、实现需要的点心区域的按钮

• 在相应位置添加一个文本组件，一个多选按钮组和两个多选按钮

• 查看预览效果
  

（十）实现“宾客信息”页面的样式

1、编写背景图片的样式

• 在guest.wxss文件里面定义样式
  

• 查看预览效果
  

• 表单内容在背景图片下方去了，要向上滑动才能看见

2、编写内容区域外层容器的样式

• 在guest.wxss文件里定义.content样式类
  

• 查看预览效果
  

3、编写姓名区域的样式

• 在guest.wxss文件里定义.name样式类
  

• 查看预览效果
  

4、编写手机号码区域的样式

• 在guest.wxss文件里定义.telephone样式类

• 查看预览效果
  

5、编写性别区域的样式

• 在guest.wxss文件里定义.gender样式类
  
• 查看预览效果
  

6、编写需要的点心区域的样式

• 在guest.wxss文件里定义.dessert样式类
  
• 查看预览效果
  

7、编写提交按钮样式

• 查看预览效果
  
• 录屏效果 敬请期待…