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

一、运行效果

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

• “邀请函”页面
  

• “照片”页面
  

• “美好时光”页面
  

• “宾客”页面
  

二、知识储备

（一）导航栏配置

• 目标：掌握导航栏的配置方法，能够完成导航栏标签栏的配置
• 通过标签栏可以很方便的在多个页面之间进行切换。在微信小程序的全局配置文件app.json中添加tabBar配置项即可实现标签栏的配置
• 在微信小程序中，有时为了页面美观，需要更改导航栏的样式。此时可以通过页面配置文件或全局配置文件对导航栏的样式进行配置。
  
• 通过标签栏切换页面效果图
  

（三）vw、vh单位

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

（四）video组件

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

（五）表单组件

• 目标
  

（六）Node.js概述

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

三、实现步骤

（一）准备工作

1、创建微信小程序

• 项目名称：婚礼邀请函
  

• 单击【确认】按钮
  

2、清空index页面内容

• index.wxml
  

3、修改index页面配置文件

• index.json
  

4、修改全局配置文件

• index.json
  

4、配置全局导航栏

• app.json
  
• 查看预览效果
  

5、准备图片素材

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

6、准备服务器端资源

• 服务器端目录
  
• 将视频资源放在htdocs目录
  
• 本地HTTP服务器程序-index.js
  

var express = require('express'); //创建express框架的示例

var app = express(); //创建Wxpress框架的实例

app.use(express.static('./htdocs')); //设置静态资源目录

app.listen(8088, res => {
   //web应用监听8088端口
  console.log('服务器启动成功，访问地址：http://localhost:8088/文件名');
});

7、启动服务器

• 在命令行矿口执行命令：node index.js
  
• 在浏览器访问视频资源 - http://localhost:8080/01.mp4
  

8、配置四个页面

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

（二）项目初始化

1、配置标签栏

• 编写标签栏样式的相关配置
  
• 在list数组里配置标签按钮
  

"tabBar": {
   
      "color": "#ccc",
      "selectedColor": "#ff4c91",
      "borderStyle": "white",
      "backgroundColor": "#fff",
      "list": [
        {
   
          "pagePath": "pages/index/index",
          "iconPath": "images/invite.png",
          "selectedIconPath": "images/invite.png",
          "text"