"婚礼邀请函"小程序：邀请函页面

任务分析

页面右上角有一个背景音乐播放按钮，用于控制音乐播放状态

邀请函页面上显示了新娘和新郎的头像、姓名以及婚礼时间和地点

page、bg(背景图片）和content(内容容器）具有相同的宽度和高度，

它们是层叠在一起的，占满了整个显示区域

content和player将通过在WXSS样式中设置position：fixed进行定位，

背景音乐播放

WXML

<view class="player player-{{isPlayingMusic ? 'play' : 'pause'}}" bindtap="play">
  <image src="/images/music_icon.png" />
  <image src="/images/music_play.png" />
</view>

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;
}

播放和暂停效果

index.js:

  data: {
    isPlayingMusic: false
  },

index.css:

/* 播放状态 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);
  }
}

• animation-play-state: running/paused 播放器的播放和暂停
• animation: musicStart 0.2s linear forwards/musicStop 0.2s linear forwards; 控制唱臂的移入和移出

背景音乐播放

除了第三章介绍的音频接口，

微信还提供了wx.getBackgroundAudioManager()

这种即使在小程序切入后台时，也可以继续播放。

app.json中添加如下配置：

 "requiredBackgroundModes": [
    "audio"
  ],

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

  bgm: null,
  music_url: 'https://www.ytmp3.cn/down/64665.mp3',
  music_coverImgUrl: 'http://localhost:3000/cover.jpg',
  onReady: function() {
    // 创建getBackgroundAudioManager实例对象
    this.bgm = wx.getBackgroundAudioManager()
    // 音频标题
    this.bgm.title = '因为爱情e'
    // 专辑名称
    this.bgm.epname = 'wedding'
    // 歌手名
    this.bgm.singer = '王菲'
    // 专辑封面
    this.bgm.coverImgUrl = this.music_coverImgUrl
    this.bgm.onCanplay(() => {
      this.bgm.pause()
    })
    // 指定音频的数据源
    this.bgm.src = this.music_url
  },

继续在index.js中编写代码，实现单击事件：

 // 播放器的单击事件
  play: function() {
    if (this.data.isPlayingMusic) {
      this.bgm.pause()
    } else {
      this.bgm.play()
    }
    this.setData({
      isPlayingMusic: !this.data.isPlayingMusic
    })
  },

效果

运行程序、点击右上角按钮，可以看到播放和暂停功能是否实现

页面结构和样式

WXML

<!-- 背景图片 -->
<image class="bg" src="/images/bg_1.png" />
<!-- 内容区域 -->
<view class="content">
  <!-- 顶部GIF图片 -->
  <image class="content-gif" src="/images/save_the_date.gif" />
  <!-- 标题 -->
  <view class="content-title">邀请函</view>
  <!-- 新郎和新娘的合照 -->
  <view class="content-avatar">
    <image src="/images/avatar.png" />
  </view>
  <!-- 新娘和新郎的名字 -->
  <view class="content-info">
    <view class="content-name" bindtap="callGroom">
      <image src="/images/tel.png" />
      <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" />
      <view>张琳琳</view>
      <view>新娘</view>
    </view>
  </view>
  <!-- 婚礼信息 -->
  <view class="content-address">
    <view>我们诚邀您来参加我们的婚礼</view>
    <view>时间：2019年1月28日</view>
    <view>地点：北京市海淀区XX路XX酒店</view>
  </view>
</view>