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


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 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
ES2020 新特性(种草)
Jan 12 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+DBM的同学录程序(1)
2006/10/09 PHP
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
举例讲解Python中装饰器的用法
2015/04/27 Python
python对excel文档去重及求和的实例
2018/04/18 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
python修改文件内容的3种方法详解
2019/11/15 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
制作部班长职位说明书
2014/02/26 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
医院合作意向书范本
2015/05/08 职场文书
具结保证书范本
2015/05/11 职场文书
海上钢琴师观后感
2015/06/03 职场文书
windows系统搭建WEB服务器详细教程
2022/08/05 Servers