需求分析:使用wx.scanCode时无交互感,对用户来说没有反馈,故增加扫码成功时震动及播放微信扫码音效
// index.html
<view bindtap="scanCode" class="equal-division-item flex-col items-center" hover-class="hover-class">
<view class="view">
<image src="http://xxx.xxx.com/app/xxx.png" class="image_1" />
</view>
<text decode="decode" class="text_3">扫码消费</text>
</view>
// index.js
scanCode() {
const that = this
// 允许从相机和相册扫码
wx.scanCode({
success(res) {
wx.showLoading({
title: '加载中',
mask: true
})
const {
result
} = res
//.....操作逻辑
},
complete() {
// 扫码震动
wx.vibrateShort({
type: 'heavy'
})
// 播放音乐
this.playMusic()
}
})
},
playMusic() {
const innerAudioContext = wx.createInnerAudioContext() /**微信小程序开发文档自带的音频方法 */
innerAudioContext.autoplay = true /**true是开启自动播放,false则关闭*/
innerAudioContext.src = 'assets/841668.mp3' /**你要播放的音频文件的地址 可以放在线的也可以放本地的,本地的需要用绝对地址 */
innerAudioContext.onPlay(() => {
/**开始播放是触发 */
console.log('Start playback')
})
innerAudioContext.onError((res) => {
/**播放是有错误时触发 */
console.log(res.errMsg)
console.log(res.errCode)
})
},
欢迎评论区讨论