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

---

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

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

👨‍💻 本文由 曼亿点 原创

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

⭐🅰⭐

---

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

---

---

⭐前言⭐

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

---

🎶邀请函界面

---

（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_coverImgUrl
        this.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()接口实现呼叫功能，当呼叫按钮按下后，后看到拨打电话的提示信息。

---

结束语🥇

以上就是微信小程序之列表渲染
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖