案例2-3 婚礼邀请函_csdn婚礼邀请函连接服务器

（六）Node.js概述

• 目标：能安装

三、实现步骤

（一）准备工作

1、创建微信小程序

• 单击 【确定】按钮
  

2、清空index页面内容

• index.wxml
  

3、设置index页面配置文件

• index.json
  

4、配置全局导航栏

• app.wxml
  
• 查看预览效果
  

5、准备图片素材

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

6、准备服务器端资源

• 服务器端目录
  
• 将视频资源放在htdocs目录
  
• 本地HTTP服务器程序 - index.js
  
  、、、js
  var express = require(‘express’);

var app = express();

app.use(express.static(‘./htdocs’));

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

、、、

7、启动服务器

• 在命令窗口执行命令：node index.js
• 
• 在浏览器上访问视频资源：http://localhost:8088/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": "邀请函"
      },
      {
        "pagePath": "pages/photo/photo",
        "iconPath": "images/marry.png",
        "selectedIconPath": "images/invite.png",
        "text": "照片"
      },
      {
        "pagePath": "pages/time/time",
        "iconPath": "images/video.png",
        "selectedIconPath": "images/invite.png",
        "text": "美好时光"
      },
      {
        "pagePath": "pages/guest/guest",
        "iconPath": "images/guest.png",
        "selectedIconPath": "images/invite.png",
        "text": "宾客信息"
      }
    ]
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

-查看预览效果

2、配置导航栏

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

• 

• 

• 配置照片的页面的导航栏

• 
  

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

• 
  

• 配置宾客信息的页面的导航栏

• 

• 

• 修改“邀请函”页面的导航栏
  

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

• 

3、编写公共样式

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

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

1、设置背景图片

• 在index.wxml文件里添加图像组件
  
• 查看预览效果
• 
• 此时，背景图片还没有充满“邀请函”页面，需要在样式文件里进行设置

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

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

<!--index.wxml-->
<image class="bg" src="/images/bg_1.png"/>
<view class="content">
  <!--顶部图片-->
  <image class="content-gif" src="/images/save_the_date.gif" />
  <!--标题-->
  <view class="content-tit">邀请函</view>
  <!--合照-->
  <view class="content-avatar">
    <image src="/images/avatar.png"/>
  </view>
  <!--新郎和新娘的姓名-->
  <view class="content-info">
    <view class="content-name">
      <image src="/images/tel.png"/>
      <view>魏何不</view>
      <view>新郎</view>
    </view>
    <view class="content-wedding">
      <image src="/images/wedding.png"/>
    </view>
    <view class="content-name">
      <image src="/images/tel.png"/>
      <view>魏何要</view>
      <view>新娘</view>
    </view>
    <view class="content-wedding">
      <image src="/images/wedding.png"/>
    </view>
  </view>
  <!--婚礼信息-->
  <view class="content-address">
    <view>我们诚邀您来参加婚礼</view>
    <view>时间：2023年10月1日</view>
    <view>地点：泸州市龙马潭区长桥路龙涧假日酒店</view>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

• 查看预览效果
  

3、实现“邀请函”页面的样式

（1）编写背景图片的样式

• 让背景图片布满整个页面
• 
• 查看预览效果
• 

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

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

/* 内容区域的外部容器样式 */
.content{
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
}
1
2
3
4
5
6
7
8
9

####（3）编写顶部图片区域样式

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

/* 顶部图片区域样式 */
.content-gif{
  width: 19vw;
  height: 18.6vh;
  margin-bottom: 1.5vh;
}
1
2
3
4
5
6

（4）编写标题区域样式

• 设置标题字号、颜色、对齐方式与下边距
• 

/* 编写标题区域样式 */
.content-tit{
  font-size: 5vh;
  color: #ff4c91;
  text-align: center;
  margin-bottom: 2.5vh;
}
1
2
3
4
5
6
7

• 查看预览效果
• 

（5）编写合照区域样式

• 设置合照区域宽度、高度、边框与边框半径
• 

/* 编写合照样式 */
.content-avatar image{
  width: 24vh;
  height: 24vh;
  border: 3px solid #ff4c91;
  border-radius: 50%;
}
1
2
3
4
5
6
7

• 查看预览效果
• 

（6）编写新郎和新娘区域样式

• 设置 编写新郎和新娘区域样式、新郎和新娘姓名样式、新郎和新娘电话图片样式、 新郎和新娘中间的双喜图片样式

/* 编写新郎和新娘区域样式 */
.content-info{
  width: 45vw;
  text-align: center;
  margin-top: 4vh;
  display: flex;
  flex-direction: row;
  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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

（7）编写婚礼信息区域样式

• 设置字号、颜色、对齐方式、行高…
• 

• 查看预览效果，“邀请函”页面完成
• 

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

• 在photo.wxml文件里，实现轮播图效果
• 

<!--pages/photo/photo.wxml-->
<!-- 照片轮播图 -->
<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots="true" autoplay="true" interval="3000" duration="1000" vertical="true" circular="true">
  <swiper-item>
    <image src="/images/timg1.jpg"/>
  </swiper-item>
  <swiper-item>
    <image src="/images/timg2.jpg"/>
  </swiper-item>
  <swiper-item>
    <image src="/images/timg3.jpg"/>
  </swiper-item>
  <swiper-item>
    <image src="/images/timg4.jpg"/>
  </swiper-item>
</swiper>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 预览效果
  

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

• 在photo.wxss文件里，实现轮播图效果
  

/* pages/photo/photo.wxss */
/* 设置轮播组件高度 */
swiper{
  height: 100vh;
}

/* 设置轮播图片的尺寸 */
image{
  width: 100vh;
  height: 100vh;
}
1
2
3
4
5
6
7
8
9
10
11

• 预览效果
  

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

• 在time.wxml文件里，实现“美好时光”页面的结构
• 

<!--pages/time/time.wxml-->
<!--美好时光 - 视频-->
<view class="video">
  <view class="video-title">标题：海边随拍</view>
  <view class="video-time">时间：2023年10月1日</view>
  <video src="http://localhost:8088/01.mp4" object-fit="fill"/>
</view>
<view class="video">
  <view class="video-title">标题：勿忘初心</view>
  <view class="video-time">时间：2023年10月1日</view>
  <video src="http://localhost:8088/02.mp4" object-fit="fill"/>
</view>
<view class="video">
  <view class="video-title">标题：十年之约</view>
  <view class="video-time">时间：2023年10月1日</view>
  <video src="http://localhost:8088/03.mp4" object-fit="fill"/>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

启动Node服务器

– 预览效果

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

• 在time.wxml文件里，实现“美好时光”页面的样式
• 

/* pages/time/time.wxss */
/* 外层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: #eee;
}
/* 标题区域样式 */
.video-title {
  font-size: 35rpx;
  color: #555;
}
/* 拍摄日期区域样式 */
.video-time {
  font-size: 26rpx;
  color: #888;
}
/* 视频区域样式 */
.video video {
  width: 100%;
  margin-top: 20rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

– 预览效果

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

• 在guest.wxml文件里，实现“宾客信息”页面的结构
  

– 预览效果

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

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

3、实现姓名区域结构

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

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

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

5、实现性别区域结构

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

6、实现需要点心区域结构

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

• 查看宾客信息代码

- <!--pages/guest/guest.wxml-->
<!--背景图片-->
<image class="bg" src="/images/bj_2.png"/>
<!--内容区域-->
<form>
  <view class="content">
    <!--姓名-->
    <view class="name">
      <input name="name" placeholder-class="phcolor" placeholder="输入您的姓名"/>
    </view>
    <!--手机号码-->
    <view class="telephone">
      <input name="telephone" placeholder-class="phcolor" placeholder="输入您的手机号码"/>
    </view>
    <!--性别-->
    <view class="gender">
      <text>请选择您的性别：</text>
      <radio-group>
        <radio>男</radio>
        <radio>女</radio>
      </radio-group>
    </view>
    <!--需要的点心-->
    <view class="dessert">
      <text>请选择您需要的点心</text>
      <checkbox-group>
        <checkbox>蛋糕</checkbox>
        <checkbox>甜甜圈</checkbox>
        <checkbox>巧克力</checkbox>
      </checkbox-group>
    </view>
    <!--提交按钮-->
    <button>提交</button>
  </view>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

• 预览效果
• 

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

1、编写背景图片样式

• 在guest.wxml文件里定义样式
• 
• 表单内容在背景下面，向上滑动就能看

– 预览效果