婚礼邀请函微信小程序
婚礼邀请函微信小程序
7.2.1任务分析
一、任务功能分析
本项目是一个婚礼邀请函小程序，通过小程序向亲朋好友发送婚礼到场邀请，相对于传
统方式的请柬，给人们带来不一样的便捷体验，也更容易受到广大年轻群体的喜爱。通过电
子版的邀请函，邀请来宾见证一对新人的幸福时刻。
本项目共由 5个页面组成，分别是邀请函、照片、美好时光、婚礼地点、宾客信息，如
下图 7.1~7.5所示。
图 7.1 邀请函页面 图 7.2 照片页面 图 7.3 美好时光页面
图片文件点我主页下载https://download.csdn.net/download/weixin_43474701/13484856
图7.4 婚礼地点页面 图7.5 宾客信息页面
下面对这 5个页面的功能进行简要介绍。
邀请函页面：新郎和新娘的电话、婚礼地点、婚礼时间。
照片页面：新郎和新娘的幸福照。 美好时光页面：采用视频的方式记录一对新人的相爱历程。
地图页面：通过导航查看婚礼地点的路线图。
宾客信息页面：参加婚礼的宾客填写个人信息，送一些祝福语等。
一、任务实现分析
1.页面结构
从图7.1~图 7.5中可以看出，页面底部都有标签栏，通过单击不同的标签按钮切换到对
应的页面。
在“邀请函”页面中，右上角有个音乐播放按钮，中间是新郎和新娘的合照，合照下面
是新郎和新娘的姓名，单击旁边的电话图标可以呼叫。底部是婚礼时间和地点信息。
在“照片”页面中，通过纵向的轮播图展示了新人的婚纱照片。
在“美好时光”页面中，提供了视频在线播放功能。
在“婚礼地点”页面中，提供了在线地图，单击导航图标可以定位婚礼酒店位置。
在“宾客信息“页面中，提供了一个表单，用于填写宾客信息。
2.目录结构
本项目的目录结构说明如下表 7.2所示。
表 7.2 目录结构说明
路径 说明
app.js 应用程序的逻辑文件
app.json 应用程序的配置文件
app.wxss 定义公共样式
pages/index/ “邀请函”页面保存目录
pages/picture/ “照片”页面保存目录
pages/video/ “美好时光”页面保存目录
pages/map/ “婚礼地点”页面保存目录
pages/guest/ “宾客信息“页面保存目录
images 图片文件
3.项目初始化
在微信开发者工具中创建一个空白项目。创建成功后，新建 app.json文件，在该文件中
定义本项目中的页面和导航栏样式，具体代码如下：
{
“pages”: [
“pages/index/index”,
“pages/guest/guest”,
“pages/map/map”,
“pages/video/video”,
“pages/picture/picture”
],
“window”: {
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#ff4c91”,
“navigationBarTextStyle”: “white”,
“enablePullDownRefresh”: false
},
“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/picture/picture”,
“iconPath”: “images/marry.png”,
“selectedIconPath”: “images/marry.png”,
“text”: “照片”
},
{
“pagePath”: “pages/video/video”,
“iconPath”: “images/video.png”,
“selectedIconPath”: “images/video.png”,
“text”: “美好时光”
},
{
“pagePath”: “pages/map/map”,
“iconPath”: “images/map.png”,
“selectedIconPath”: “images/map.png”,
“text”: “婚礼地点”
},
{
“pagePath”: “pages/guest/guest”,
“iconPath”: “images/guest.png”,
“selectedIconPath”: “images/guest.png”,
“text”: “宾客信息”
}
]
},
在上述代码中，tabBar 对象用于配置页面底部的标签栏，list 是一个数组，数组的每一
个元素是一个标签按钮对象，通过该对象的属性可以配置标签栏中的每个标签按钮。
在每一个标签页打开时，导航栏的标题也需要随之发生变化。下面在每个页面的 json
文件中配置页面标题，以 pages/index/index.json文件为例，具体代码如下：
{
“navigationBarTitleText”: “邀请函”
} 完成配置文件的编写后，在 app.wxss文件中定义公共样式，具体代码如下：
/ app.wxss /
page {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
7.2.2邀请函页面
打开婚礼邀请函小程序后，首先进入到邀请函页面，在页面的右上角有一个背景音乐播
放按钮，用于控制音乐播放状态，单击按钮播放音乐，再次单击按钮暂停音乐。在邀请函页
面中，显示了新娘和新郎的头像、姓名，以及婚礼时间和地点，让宾客可以马上了解婚礼相
关信息。
一、背景音乐播放
在 pages/index/index.wxml 文件中编写播放器的结构，具体代码如下：
在上述代码中，isPlayMusic 变量表示当前是否正在播放音乐，用于通过判断播放状态来
改变 class的值。music_icon.png 是黑胶唱片图标，music_play.png 是唱臂图标。
在 pages/index/index.wxss 文件中编写播放器的样式，具体代码如下：
/* 音乐播放图标 */
.player {
position: fixed;
top: 20rpx;
right: 20rpx;
/* 提高堆叠顺序 */
z-index: 1;
}
.player > image:first-child {
width: 80rpx;
height: 80rpx;
/* 为唱片图标设置旋转动画 */
animation: musicRotate 3s linear infinite;
}
@keyframes musicRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg); }
}
.player > image:last-child {
width: 28rpx;
height: 80rpx;
margin-left: -5px;
}
在上述代码中，提高堆叠顺序从而防止播放器图标被.content 容器覆盖在下面，还有唱
片图标设置了旋转动画。
在 pages/index/index.js文件中的 data中定义 isPlayingMusic，具体代码如下：
data: {
isPlayingMusic: false
},
接下来在 pages/index/index.wxss 文件中通过样式来控制播放器的播放和暂停效果。其
中播放状态的 class为.player-play，暂停状态的 class为.play-pause，具体代码如下：
/* 播放状态 class为.player-play */
.player-play > image:first-child {
animation-play-state: running;
}
.player-play > image:last-child {
animation: musicStart 0.2s linear forwards;
}
/* 暂停状态 class为.player-pause */
.player-pause > image:first-child {
animation-play-state: paused;
}
.player-pause > image:last-child {
animation: musicStop 0.2s linear forwards;
}
@keyframes musicStart {
from {
transform: rotate(0deg);
}
to {
transform: rotate(20deg);
}
}
@keyframes musicStop {
from {
transform: rotate(20deg);
}
to {
transform: rotate(0deg);
} }
完成播放器的样式代码后，下面就开始实现音乐播放功能。在第 6 章的项目中用过了
wx.createInnerAudioContext()接口播放音频，在小程序中，还有一种专门用于播放背景音频
的 wx.getBackgroundAudioManager()接口，其特点在于小程序切入后台时，如果音频处于播
放状态，可以断续播放。为了实现这个效果，需要先在 app.json 中添加如下配置，添加后在
开发版中会直接生效，正式版还需通过审核。
“requiredBackgroundModes”: [
“audio”
],
然后在 pages/index/index.js文件中编写背景音频播放的代码，具体代码如下：
bgm: null,
music_url: ‘http://localhost:3000/1.mp3’,
music_coverImgUrl: ‘http://localhost:3000/cover.jpg’,
onReady: function() {
// 创建getBackgroundAudioManager 实例对象
this.bgm = wx.getBackgroundAudioManager()
// 音频标题
this.bgm.title = ‘merry me’
// 专辑名称
this.bgm.epname = ‘wedding’
// 歌手名
this.bgm.singer = ‘singer’
// 专辑封面
this.bgm.coverImgUrl = this.music_coverImgUrl
this.bgm.onCanplay(() => {
this.bgm.pause()
})
// 指定音频的数据源
this.bgm.src = this.music_url
},
在上述代码中，先创建 BackgroundAudioManager 实例对象，之后分别指定音乐的标题、
专辑名称、艺术家和专辑封面。还设置了自动开始播放与暂停操作。
继续在 pages/index/index.js文件中编写播放器的单击事件，具体代码如下：
// 播放器的单击事件
play: function() {
if (this.data.isPlayingMusic) {
this.bgm.pause()
} else {
this.bgm.play()
}
this.setData({
isPlayingMusic: !this.data.isPlayingMusic
})
}, 上述代码实现了根据isPlayingMusic的值来执行暂停或播放操作，如果值为true则暂停，
值为 false则播放。
保存上述代码后，测试播放器的播放和暂停功能是否实现。
二、页面结构和样式
在 pages/index/index.wxml 文件中的播放器的下面继续编写代码，实现背景图片和内容
区域的基本结构，具体代码如下：
邀请函
我们诚邀您来参加我们的婚礼 时间：2019年1月28日 地点：北京市海淀区XX路XX酒店 在上述代码中，使用 image组件来引入本地图片，不能在 wxss中通过 background 引入 本地图片。由于小程序的体积有限，在实际开发中，推荐用 URL 的方式引入一些比较占用 空间的图片等资源。 接下来在 pages/index/index.wxss 文件中编写样式。其中，背景图需要扑满整个页面， 页面内各元素的高度应不超过页面的高度。为此，推荐使用 viewport单位，即通过 vw和 vh 表示宽度和高度，确保.content 内部的元素高度加起来不超过 100，具体代码如下： /* 背景图 / .bg { width: 100vw; height: 100vh; } / 内容区域 / .content { width: 100vw; height: 100vh; position: fixed; display: flex; flex-direction: column; align-items: center; } / 顶部gif图 / .content-gif { width: 19vh; height: 18.6vh; margin-bottom: 1.5vh; } / 标题 / .content-title { font-size: 5vh; color: #ff4c91; text-align: center; margin-bottom: 2.5vh; } / 头像 */ .content-avatar image { width: 24vh; height: 24vh; border: 3px solid #ff4c91; border-radius: 50%; } 三、一键拨打电话 在 pages/index/index.wxml 文件中的 class 为 content-info 的标签中编写代码，将新郎和 新娘的名字显示在页面中，并且在名字的右上方提供一个电话的图标，具体代码如下：
王辉辉 新郎
