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

一、运行效果

二、知识储备

（三）vw、vh单位

（五）表单组件

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

三、实现步骤

（六）Node.js概述

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

三、实现步骤

（一）准备工作

1、创建微信小程序

• 项目名称：婚礼邀请函
• 模板选择：不使用模板
  

2、清空index页面内容

• index.wxml

3、修改index.js

4、配置全局导航栏

• app.json
  

5、准备图片素材

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

6、准备服务器端资源

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

var express = require('express'); // 导入Express框架

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

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

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

7、启动服务器

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

（二）项目初始化

1、配置标签栏

2、配置导航栏

"pages": [
    "pages/index/index",
    "pages/photo/photo",
    "pages/time/time",
    "pages/guest/guest"

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

3、编写公共样式

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

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

1、设置背景图片

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

• 查看预览效果

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

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

• 包含顶部图片、标题、合照，新郎和新娘姓名、婚礼信息区域
  

<!--index.wxml-->
<image class="bg" src="/images/bg_1.png" mode=""/>
<view class="content">
  <!-- 顶部图片 -->
  <image class="content-gif" src="/images/save_the_date.gif" alt=""/>