1、主体页面和导航栏样式app.json
"pages": [
"pages/index/index",
"pages/picture/picture",
"pages/video/video",
"pages/map/map",
"pages/guest/guest"
],
"requiredBackgroundModes": ["audio"],
"window": {
"navigationBarBackgroundColor": "#ff4c91",
"navigationBarTextStyle": "white",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
},其中"requiredBackgroundModes": ["audio"]为音乐播放配置
2、底部标签栏
tabBar用于实现页面底部的标签栏，主要属性如下，其中list是一个数组，数组中的每一个元素都是一个标签按钮对象，设置对应的属性时，可以跳转到对应的标签页。
| 属性 | 说明 |
| color | 未选择时，底部导航栏颜色 |
| selectedColor | 选中时，底部导航栏颜色 |
| borderStyle | 底部导航边框颜色 |
| backgroundColor | 底部导航背景色 |
| list | 导航配置数组 |
| pagePath | 页面访问地址 |
| iconPath | 未选择时图片路径 |
| selectedIconPath | 选中时图片路径 |
| text | 导航图标下方文字 |
3、在app.json中添加如下代码，完成标签栏的配置
"tabBar": {
"color": "black",
"selectedColor": "#ff4c91",
"borderStyle": "white",
"backgroundColor": "#ffffff",
"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": "宾客信息"
}
]
},4、页面的公共样式app.wxss
page{
font-family: Helvetica Neue,Arial, Helvetica, sans-serif ;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}justify-content: space-between;使各项周围都留有空白
5、邀请函的内部结构index.wxss
<!-- 显示歌曲播放暂停的小图标 -->
<view class="player player-{
{isPlayingMusic ? 'play':'pause'}}" bindtap="play">
<image src="/images/music_icon.jpg"></image>
<image src="/images/music_play.png"></image>
</view>
<!-- 背景图片 -->
<image class="bg" src="/images/bg_1.png"></image>
<!-- 内容区域 -->
<view class="content">
<!-- 顶部图片区域 -->
<image class="content-gif" src="/images/save_the_date.gif"></image>
<!-- 标题 -->
<view class="content-title">邀请函</view>
<!-- 新郎和新娘合照 -->
<view class="content-avatar">
<image src="/images/avatar.png"></image>
</view>
<!-- 新郎和新娘的名字 -->
<view class="content-info">
<view class="content-name" bindtap="callGroom">
<image src="/images/tel.png"></image>
<view>王小名</view>
<view>新郎</view>
</view>
<view class="content-wedding">
<image src="/images/wedding.png"></image>
</view>
<view class="content-name" bindtap="callBride">
<image src="/images/tel.png"></image>
<view>张小红</view>
<view>新娘</view>
</view>
</view>
<!-- 婚礼信息 -->
<view class="content-address">
<view>我们曾邀你来参加我们的婚礼</view>
<view>时间：2021年10月11</view>
<view>地点：河南省周口市曦皇大酒店</view>
</view>
</view>6、样式控制
/* 显示歌曲播放暂停的小图标 */
.player{
position: fixed;
top:20rpx;
right:20rpx;
/* 元素的堆叠顺序,防止被content中的内容覆盖在下面 */
z-index: 1;
}
.player>image:first-child{
width: 80rpx;
height: 80rpx;
border: 1rpx solid #ffffff;
border-radius: 50%;
/* 将动画与div绑定,musicRotate只是起的一个名字 */
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;
}
/* 对唱胶图标设置旋转和暂停以及唱臂的移入和移出 */
.player-play>image:first-child{
animation-play-state: running;
}
.player-pause>image:last-child{
animation: musicStart 0.2s linear forwards;
}
.player-pause>image:first-child{
animation-play-state: paused;
}
.player-pause>image:last-child{
animation: musicStop 0.2 linear forwards;
}
@keyframes musicStart{
from{
transform: rotate(0deg);
}
to{
transform: rotate(20deg);
}
}
@keyframes musicStop{
from{
transform: rotate(20deg);
}
to{
transform: rotate(0deg);
}
}
/* 背景图片 */
.bg{
width: 100vw;
height: 100vh;
}
.content{
width: 100vw;
height: 100vh;
/* 绝对定位元素，相对于浏览器 */
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
}
.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: 3rpx solid #ff4c91;
border-radius: 50%;
}
/* 新郎新郎电话区 */
.content-info{
width:45vh;
text-align: center;
margin-top: 4vh;
display: flex;
align-items: center;
}
.content-wedding{
flex: 1;
}
.content-wedding>image{
width:5.5vh;
height:5.5vh;
margin-left: 20rpx;
}
.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-address{
margin-top: 5vh;
color: #ec5f89;
font-size: 2.5vh;
font-weight: bold;
text-align: center;
line-height: 4.5vh;
}
.content-address view:first-child{
font-size: 3vh;
padding-bottom: 2vh;
}7、在index.js中编写背景音频播放的代码
bgm:null,
music_url:'http://localhost:3000/1.mp3',
music_coverImgUrl:"http://localhost:3000/cover.jpg",
onReady:function () {
//用于播放背景音频
this.bgm=wx.getBackgroundAudioManager()
this.bgm.title="marry 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
},8、实现单击播放器实现音乐的播放与暂停，在index.js中添加如下代码
play:function(e){
if(this.data.isPlayingMusic){
this.bgm.pause()
}else{
this.bgm.play()
}
this.setData({
isPlayingMusic: !this.data.isPlayingMusic
})
},9、实现一键拨打电话的功能
callGroom:function(){
wx.makePhoneCall({
phoneNumber: '15138726924',
})
},
callBride:function(){
wx.makePhoneCall({
phoneNumber: '18236347304',
})
}
10、页面最终运行效果如图
婚礼邀请函图片获取资源
链接: https://pan.baidu.com/s/1OcI_KBEXx-WYJv9srXlWAw 提取码: jwwg