IT小白

这个屌丝很懒，什么也没留下！

热门标签

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

作者：IT小白 | 2024-05-22 07:11:22

踩

微信小程序婚礼邀请函代码案例

文章目录

实现步骤

实现步骤

（一）准备工作

1.创建微信小程序

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

2.清空index页面内容

index.wxml

3.修改index页面配置文件

index.json

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/文件名');
});
1
2
3
4
5
6
7
8
9

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/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": "宾客信息"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
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

查看预览效果

2.配置导航栏

配置“邀请函”页面的导航栏
查看预览效果
配置“照片”页面的导航栏
查看预览效果
配置“美好时光”页面的导航栏
查看预览效果
配置“宾客信息”页面的导航栏
查看预览效果
修改全局的导航栏配置
查看“邀请函”页面的导航栏

3.编写公共样式

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

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

1.设置背景图片

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

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-title">邀请函</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>
	<!-- 婚礼信息 -->
	<view class="content-address">
		<view>我们诚邀你来参加我们的婚礼</view>
		<view> 时间；2024年1月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

查看预览效果，显得凌乱

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

1.编写背景图片的样式

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

2.编写内容区域中外部容器样式

外部容器布满整个页面，采用固定定位，设置为纵向的felx布局，容器里的项目是水平居中（交叉轴对齐方式 - 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-title{
  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

查看预览效果

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: 1.5vh;
}
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

查看预览效果

7.编写婚礼信息样式

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

在这里插入图片描述

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

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

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

<!--pages/photo/photo.wxml-->
<!-- 照片轮播图 -->
<swiper indicator-color="white" indicator-active-color="#ff4c91"
indicator-dots="ture" autoplay="true" interval="3000" duration="1000" vertical="true" circular="true">
	<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

查看预览效果

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

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

/* pages/photo/photo.wxss */
/* 设置轮播组件的高度 */
swiper{
	height: 100vh;
}
/* 设置轮播图片的高度 */
image {
	width: 100vw;
	height: 100vh;
}
1
2
3
4
5
6
7
8
9
10

查看预览效果

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

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

<!--pages/time/time.wxml-->
<!-- 美好时光-视频 -->
<view class="video">
	<view class="video-title">海边随拍</view>
	<view class="video-time">拍摄日期：2023-08-15</view>
	<video src="http://localhost:8088/01.mp4" object-fit="fill"></video>
</view>
<view class="video">
	<view class="video-title">海边随拍</view>
	<view class="video-time">拍摄日期：2023-08-15</view>
	<video src="http://localhost:8088/02.mp4" object-fit="fill"></video>
</view>
<view class="video">
	<view class="video-title">海边随拍</view>
	<view class="video-time">拍摄日期：2023-08-15</view>
	<video src="http://localhost:8088/03.mp4" object-fit="fill"></video>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

启动后台的Node服务，才能访问视频资源
查看预览效果

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

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

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

查看预览效果

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

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

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

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

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

3.实现姓名区域的结构

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

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

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

5.实现性别区域的结构

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

6.实现需要的点心区域的结构

在相应位置添加一个文本组件，一个多选按钮组和两个多选按钮
查看“宾客信息”页面的结构代码

<!--pages/guest/guest.wxml-->
<!-- 背景图片 -->
<image class="bg" src="/images/bj_2.png"></image>
<!-- 内容区域 -->
<form>
	<view class="content">
		<!-- 姓名 -->
		<view class="name">
			<input name="name" placeholder-class="phcolor" placeholder="输入您的姓名 type="text"/>
		</view>
		<!-- 手机号码 -->
		<view class="telephone">
			<input name="telephone" placeholder-class="phcolor" placeholder="输入您的手机号码" type="number"/>
		</view>
		<!-- 性别 -->
		<view class="gender">
			<text> 请选择您的性别：</text>
			<radio-group>
				<radio>男</radio>
				<radio>女</radio>
			</radio-group>
		</view>
		<!-- 需要的点心 -->
		<view class="dissert">
			<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
36