微信小程序自定义扫码功能界面的实现代码


Posted in Javascript onJuly 02, 2020

小程序的一个扫码页面,扫码界面一直开着,同时可以处理其他功能,如下:

微信小程序自定义扫码功能界面的实现代码

由于直接调用微信的scanCode,无法自定义界面,所以只能使用原生组件camera,完成这个功能,关于扫描框的四个角的图片,就自己画一下吧,中间的移动横线,使用了小程序的动画功能,在原生camera组件上,覆盖需要用到cover-view和cover-image,同时加入了提示音

/**scan.wxss**/
.scan-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #B9BEC4;
  position: fixed;
  align-items: center;
  justify-content: space-around;
}
 
.scan-border {
  width: 94%;
  height: 94%;
  border: 6rpx solid #08FDFE;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.scan-camera {
  width: 500rpx;
  height: 500rpx;
  border-radius: 6rpx;
  margin: 30rpx;
}
 
.cover-corner {
  width: 80rpx;
  height: 80rpx;
  position: absolute;
}
 
.cover-left-top {
  left: 0;
  top: 0;
}
 
.cover-right-top {
  right: 0;
  top: 0;
}
 
.cover-left-bottom {
  left: 0;
  bottom: 0;
}
 
.cover-right-bottom {
  right: 0;
  bottom: 0;
}
 
.scan-animation {
  position: absolute;
  top: -10rpx;
  left: 10rpx;
  width: 480rpx;
  height: 8rpx;
  background-color: #08FDFE;
  border-radius: 50%;
}
<!--scan.wxml-->
<view class="scan-view">
  <view class='scan-border'>
    
    <camera class='scan-camera' mode="scanCode" binderror="cameraError" bindscancode='scancode' frame-size='large'>
      <cover-image class='cover-corner cover-left-top' src='/images/left-top.png'></cover-image>
      <cover-image class='cover-corner cover-right-top' src='/images/right-top.png'></cover-image>
      <cover-image class='cover-corner cover-left-bottom' src='/images/left-bottom.png'></cover-image>
      <cover-image class='cover-corner cover-right-bottom' src='/images/right-bottom.png'></cover-image>
      
      <cover-view class='scan-animation' animation="{{animation}}"></cover-view>
    </camera>
    <!-- 这里可以处理其他内容 -->
  </view>
</view>
// scan.js
// 移动动画
let animation = wx.createAnimation({});
// 提示音
let innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.src = '/images/beep.mp3'
 
Page({
  data: {
    
  },
  onLoad: function () {
    
  },
  onShow(){
    this.donghua()
  },
  donghua(){
    var that = this;
    // 控制向上还是向下移动
    let m = true
    
    setInterval(function () {
      if (m) {
        animation.translateY(250).step({ duration: 3000 })
        m = !m;
      } else {
        animation.translateY(-10).step({ duration: 3000 })
        m = !m;
      }
 
      that.setData({
        animation: animation.export()
      })
    }.bind(this), 3000)
  },
  scancode(e){
    // 提示音
    innerAudioContext.play()
    // 校验扫描结果,并处理
    let res = e.detail.result
  }
})

总结

到此这篇关于微信小程序自定义扫码功能界面的实现代码的文章就介绍到这了,更多相关微信小程序自定义扫码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Knockoutjs的环境搭建教程
Nov 26 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
JS字符串和数组如何实现相互转化
Jul 02 #Javascript
Vue父子之间值传递的实例教程
Jul 02 #Javascript
JS出现404错误原理及解决方案
Jul 01 #Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 #Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 #Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 #Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 #Javascript
You might like
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
社区母亲节活动记录
2014/03/06 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
退伍军人感言
2015/08/01 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
Python中22个万用公式的小结
2021/07/21 Python
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android