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


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 相关文章推荐
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 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的错误信息
2006/10/09 PHP
php 操作excel文件的方法小结
2009/12/31 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
python collections模块的使用
2020/10/16 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
毕业晚会主持词
2014/03/24 职场文书
大学自主招生推荐信
2014/05/10 职场文书
校园环保建议书
2014/05/14 职场文书
学习党代会心得体会
2014/09/05 职场文书
完整版商业计划书
2014/09/15 职场文书
未婚证明格式
2015/06/15 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技