“"婚礼邀请函"小程序:邀请函页面”的版本间的差异
来自CloudWiki
第167行: | 第167行: | ||
===效果=== | ===效果=== | ||
[[文件:wexin21081804.png]] | [[文件:wexin21081804.png]] | ||
+ | |||
+ | 运行程序、点击右上角按钮,可以看到播放和暂停功能是否实现 |
2021年8月18日 (三) 13:58的版本
任务分析
页面右上角有一个背景音乐播放按钮,用于控制音乐播放状态
邀请函页面上显示了新娘和新郎的头像、姓名以及婚礼时间和地点
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 }) },
效果
运行程序、点击右上角按钮,可以看到播放和暂停功能是否实现