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


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 相关文章推荐
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
Angular表单验证实例详解
Oct 20 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
什么是SOLID
Mar 24 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
用php过滤危险html代码的函数
2008/07/22 PHP
php的hash算法介绍
2014/02/13 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
在视频前插入广告
2006/11/20 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
Python 对象中的数据类型
2017/05/13 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
python实现简单图书管理系统
2019/11/22 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
python try...finally...的实现方法
2020/11/25 Python
python制作抽奖程序代码详解
2021/01/15 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
如何开启linux的ssh服务
2013/06/03 面试题
医药营销专业个人自荐信
2013/09/29 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
入党思想汇报
2014/01/05 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
社区安全温馨提示语
2015/07/14 职场文书
运动会800米赞词
2015/07/22 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python