【微信小程序开发（从零到一）【婚礼邀请函】制作】—

【微信小程序开发（从零到一）【婚礼邀请函】制作】——邀请函界面的制作（2）

在这里插入图片描述

👨‍💻个人主页：@开发者-曼亿点

👨‍💻 hallo 欢迎点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由曼亿点原创

👨‍💻 收录于专栏：微信小程序开发

⭐🅰⭐

微信小程序开发【婚礼邀请函】——运行视频

文章目录

- ⭐🅰⭐
- ⭐前言⭐
- 🎶邀请函界面
- - （1）背景音乐播放
  - （2）页面结构和样式
  - - 结束语🥇

⭐前言⭐

打开婚礼邀请函小程序后，首页进入到邀请函页面，在页面的右上角有一个背景音乐播放器按钮，用于控制音乐播放器状态，点击按钮播放音乐，再次点击停止音乐。在邀请函页面，显示新娘和新郎的头像，姓名，以及婚礼时间和地点，让宾客可以马上了解相关信息。

在这里插入图片描述

🎶邀请函界面

（1）背景音乐播放

在pages/index/index.wxml文件中编写播放器结构，具体代码如下：

<!--index.wxml-->
<view class="player player-{{isPlayingMusic ? 'play':'pause'}}" bindtap="play">
<image src="/images/images/music_icon.png"/>
<image src="/images/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(0deeg);}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.js文件中通过样式来控制播放器的播放器的播放和暂停效果。其中播放状态的class为.player-play，暂停状态.class为.playpause，具体代码如下：

}
/* 播放器的播放和暂停效果 */
.player-play > image:first-child{
animation-play-state: running;
}
.player-play > image:last-child{
animation: musicStart 0.2s linear forwards;
}
.player-play > image:first-child{
animation-play-state: paused;
}
.player-play > 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);}
}

完成播放器样式代码后，下面就开始实现音乐播放功能。在微信小程序中，还有一种专门的播放背景音频的wx.getBackgroundAudioManager()接口，其中特点在于小程序切入后台时，如果音频处于播放状态，可以继续播放。为实现这个效果，需要现在app.js中添加一下配置，添加后在开发版中直接生效，正版还需通过审核。

“requireBackgroundModes”:{
"audio"
}

然后在pages/index/index.js文件中编写背景音频播放的代码，具体代码如下：

   isPlayingMusic:false,bgm:null,music_url:"https://nf-sycdn.kuwo.cn/523a03e11876357f6d600598a2609ee2/6640cb27/resource/n2/32/26/1627466358.mp3?from=vip",music_coverImgUrl:"image/banner.jpg",onReady:function(){// 创建getBackgroundAudioManager 实例对象(接口播放音频)this.bgm=wx.getBackgroundAudioManager()// 音频标题this.bgm.title = "marry me"// 专辑封面this.bgm.epname = "wedding"// 歌手名this.bgm.singer = "singer"// 专辑封面this.bgm.coverImgUrl = this.music_coverImgUrlthis.bgmoncanplay(()=>{this.bgm.pause()})// 指定音频的数据源this.bgm.src = this.music_url}},

上述代码中，先创建BackgroundAudioManager实例对象，之后分别分别指定音乐的标题、专辑名称、艺术家、专辑封面。还设置了自动播放于暂停操作。
继续在pages/index/index.js文件中编写播放器的点击事件，具体的代码如下：

   // 播放器的单击事件play:function(e){// 执行暂停或播放操作,如果值为true则暂停，值为 false则播放if(this.data.isPlayingMusic){this.bgm.pause()}else{this.bgm.play()}this.setData({//将data中的isPlayingMusic赋值给它isPlayingMusic: !this.data.isPlayingMusic})},

上述代码实现了根据.isPlayingMusic的值来执行暂停和播放操作，如果值为true则暂停，如果值为false则播放。
保存上述代码后，测试播放器播放和暂停功能是否已经实现。

（2）页面结构和样式

在pages/index/index.wxml文件中的播放器下面进行编写代码，实现背景图片和内容区域的基本结构，具体内容如下：

<!-- 背景图 -->
<image class="bg" src="/images/images/bg_1.png"></image>
<!-- 内容区域 -->
<view class="content">
<!-- 顶部的gif图片 -->
<image class="content-gif" src="/images/images/save_the_date.gif"></image><!-- 标题 -->
<view class="content-titile">邀请函</view>
<!-- 合照 -->
<view class="content-avatar">
<image src="/images/images/avatar.png"></image>
</view>
<!-- 名字 -->
<view class="content-info">
<view class="content-name"bindtap="callGroom">
<image src="/images/images/tel.png"></image>
<view>乔治</view>
<view>新郎</view>
</view>
<view class="content-wedding">
<image src="/images/images/wedding.png"></image>
</view>
<view class="content-name" bindtap="callBride">
<image src="/images/images/tel.png"></image>
<view>佩奇</view>
<view>新娘</view>
</view>
</view>
<view class="content-address"> 
<view>我们诚挚的邀请您来参加我们的婚礼</view>
<view>时间：2024年5月8日</view>
<view>地点：湖南常德</view>
</view>
</view>

在上述代码中，使用image组件来引入本地文件，不能在.wxss文件中通过background引入本地图片。由于小程序的体积有限，在实际开发中，推荐用URL的方式引入一些比较占空间的图片等资源。
接下来在pages/index/indexwxss文件中编写样式。其中，背景图片需要铺满整个页面，页面内各元素的高度不应超过页面的高度。为此，推荐使用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;
}
.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;
}

完成页面和样式后，在pages/index/index.js文件中编写用到的callGroom和callBride事件处理函数，实现一键拨号功能，具体代码如下：

Page({data: {//实现拨打电话功能callGroom:function(){wx.makePhoneCall({phoneNumber: '15138726924',})},callBride:function(){wx.makePhoneCall({phoneNumber: '18236347304',})},})

上述代码通过调用wx.makePhoneCall()接口实现呼叫功能，当呼叫按钮按下后，后看到拨打电话的提示信息。