7.2.1 任务分析
一、任务功能分析
本项目是一个婚礼邀请函小程序，通过小程序向亲朋好友发送婚礼到场邀请，相对于传
统方式的请柬，给人们带来不一样的便捷体验，也更容易受到广大年轻群体的喜爱。通过电
子版的邀请函，邀请来宾见证一对新人的幸福时刻。
本项目共由 5 个页面组成，分别是邀请函、照片、美好时光、婚礼地点、宾客信息，如
下图 7.1~7.5 所示。
图 7.1 邀请函页面
图 7.2 照片页面
图 7.3 美好时光页面
图 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 文件中编写播放器的结构，具体代码如下：
<view class="player player-{{isPlayingMusic ? 'play' : 'pause'}}" bindtap="play">
<image src="/images/music_icon.png" />
<image src="/images/music_play.png" />
</view>
在上述代码中，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);
}
评论5