微信小程序实现扫二维码时仿微信扫码音效

2023-11-10

需求分析:使用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)
    })
  },
  

音频资源

欢迎评论区讨论

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序实现扫二维码时仿微信扫码音效 的相关文章

随机推荐

  • 手撕RPC第一天

    前言 众所周知 RPC 远程服务调用 成为现代架构中不可或缺的一部分 那么 熟悉RPC的原理就显得相当重要了 在这个前提下 我开始了学习RPC之路 常见的rpc框架有轻量级的thrift 国内开源的使用众多的dubbo go实现的gRPC
  • linux cannot connect to wifi

    If you cannot connect to wifi while previously you can You may switch to a different kernel if you have an alternative o
  • Android xml属性大全

    第一类 属性值为true或false android layout centerHrizontal 水平居中 android layout centerVertical 垂直居中 android layout centerInparent
  • php:一次完整的HTTP请求过程笔记

    HTTP 事务执行过程 1 客户端 浏览器 做出请求操作 输入网址 点击链接 提交表单 2 客户端检测缓存 1 有缓存且较新 客户端直接读取本地缓存进行资源展示 2 有缓存但是不新 准备http请求包 发送至服务端进行缓存校验 3 客户端对
  • vue3 使用element plus 打包时 报错

    vue3 vite ts elementPlus中运行正常打包出错 能正常运行 但是打包出错 解决打包时出现导入element plus相关的爆红 导致无法打包的问题 如若出现类似于 Module element plus has no e
  • jenkins+ant&findbugs&fireline

    火线在jenkins上的安装 http magic 360 cn zh user html Jenkins jenkins插件离线下载的好地方 http updates jenkins ci org download plugins 在je
  • C语言运算符——自增与自减

    自增与自减 一个整数类型的变量自身加 1 可以这样写 a a 1 或者a 1 不过 C语言还支持另外一种更加简洁的写法 就是 a 或者 a 这种写法叫做自加或自增 意思很明确 就是每次自身加 1 相应的 也有a 和 a 它们叫做自减 表示自
  • 功能测试数据测试之数据测试关注点

    数据类型 常见数据类型 整型 浮点型 字符型 布尔型等 可用等价类方法对输入数据类型设计测试用例 数据长度 数据长度可能是固定长度或者是在某个范围内的长度 可用等价类和边界值方法对数据长度设计测试用例 数据一致性 组织数据测试该交易 在交易
  • Fatal Python error: init_sys_streams: can‘t initialize sys standard streamsPython runtime state: 问题

    哈喽 大家好 我是 奇点 江湖人称 singularity 刚工作几年 想和大家一同进步 一位上进心十足的 Java ToB端大厂领域博主 喜欢java和python 平时比较懒 能用程序解决的坚决不手动解决 如果有对 java 感兴趣的
  • canvas绘制火柴人

  • 每日面试题day02

    1 int 和 Integer 有什么区别 int 是基本数据类型 Integer 是其包装类 注意是一个类 在 java 中包装类 用途比较多的是用在于各种数据类型的转化中 2 重载和重写的区别 overload 重载 参数类型 个数 顺
  • vue3如何进行数据监听watch/watchEffect

    我们都知道监听器的作用是在每次响应式状态发生变化时触发 在组合式 API 中 我们可以使用 watch 函数和watchEffect 函数 当你更改了响应式状态 它可能会同时触发 Vue 组件更新和侦听器回调 默认情况下 用户创建的侦听器回
  • IntelliJ IDEA Plugins加载太慢_IntelliJ IDEA Plugins搜不出来【已解决】

    问题 IntelliJ IDEA Plugins加载太慢或者IntelliJ IDEA Plugins搜不出来 解决方案
  • html form 表单

    定义 form 表单在网页中主要负责数据采集功能 属于一个容器标记 表单组成 一个表单由 form元素 表单控件 和 表单按钮 组成 1 form元素 form元素用来创建表单 语法格式如下
  • SQL中根据经纬度计算两点之间的直线距离

    最近接到一个需求获取当前用户的经纬度 然后计算与目标地的的距离 我自己也是看别人的博客学习 自己也做个记录吧 直接放出计算的公式 不想浪费时间的 直接看公式套进去就成 依次是纬度 纬度 经度 round 6378 138 2 ASIN SQ
  • vue显示PDF文件

    小编最近接手的项目中 有个需求 前端显示后端返回的PDF格式的文件 经过小编两天的调研和试验 终于找到了一个比较好的插件方法 直接贴代码 1 安装 npm i vue pdf signature save dev 2 pdfShow vue
  • 一个测试的成长历程【功能测试篇】——web测试的总结

  • js自写发布订阅模块

    实现效果如下图所示 代码如下
  • 【论文阅读】文献阅读笔记-泊松重建

    先了解泊松分布 就二项分布而言 泊松分布可以是二项分布的推广 样本数趋向于无穷大 而事件发生的概率趋近于0时 此时期望满足np Lamda 常数 且此时事件发生的概率满足泊松分布 且概率的计算只与Lamda有关 但泊松方程和泊松分布没啥关系
  • 微信小程序实现扫二维码时仿微信扫码音效

    需求分析 使用wx scanCode时无交互感 对用户来说没有反馈 故增加扫码成功时震动及播放微信扫码音效 index html