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

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

由于直接调用微信的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
  }
})

总结

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

(0)

相关推荐

  • 详解微信小程序-扫一扫 wx.scanCode() 扫码大变身

    效果 js let app = getApp(); Page({ data: { img: "/images/1.jpg" }, onLoad() { }, scan() { wx.scanCode({ success: (res) => { console.log("扫码结果"); console.log(res); this.setData({ img: res.result }) }, fail: (res) => { console.log(re

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

    小程序的一个扫码页面,扫码界面一直开着,同时可以处理其他功能,如下: 由于直接调用微信的scanCode,无法自定义界面,所以只能使用原生组件camera,完成这个功能,关于扫描框的四个角的图片,就自己画一下吧,中间的移动横线,使用了小程序的动画功能,在原生camera组件上,覆盖需要用到cover-view和cover-image,同时加入了提示音 /**scan.wxss**/ .scan-view {   width: 100%;   height: 100%;   display: fl

  • 微信小程序自定义可滑动日历界面

    本文实例为大家分享了微信小程序可滑动日历界面的具体代码,供大家参考,具体内容如下 参考某个博主的自定义控件做了一些改动,希望这篇博客能帮助需要的人. WXML <view class='container'> <view class='month flex m-around'> <view class='arrow' bindtap='prevMonth'>< </view> <view class='year-and-month'> &l

  • 微信小程序自定义底部弹出框功能

    本文实例为大家分享了微信小程序自定义底部弹出框的具体代码,供大家参考,具体内容如下 实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画).效果图如下: 可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属性的弹出框.只需要把内容替换自己需要的即可. 1. wxml代码 <view class="wrap"> <view bindtap="showModal"> &

  • 微信小程序自定义组件实现多选功能

    本文实例为大家分享了微信小程序自定义组件实现多选的具体代码,供大家参考,具体内容如下 效果图: 调用部分(例如在index页面) index.wxml <view catchtap="showMultiple">   多选按钮   <multiple id="multiple" bind:multipleCancel="_multipleCancel" bind:multipleConfirm="_multipleCo

  • 微信小程序自定义轮播图

    本文实例为大家分享了微信小程序自定义轮播图展示的具体代码,供大家参考,具体内容如下 默认的swiper面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色的,椭圆形的,方形的等等. 首先当然是要禁用掉(直接删掉)swiper属性indicator-dots,再用view组件模拟dots,对应的代码如下: <view class="swiper-container"> <swiper autoplay="auto" interval=

  • 微信小程序自定义导航教程(兼容各种手机)

    前言 本文主要给大家介绍了关于微信小程序自定义导航的相关内容,详细代码请见github,请点击地址 (本地下载),其中有原生小程序的实现,也有wepy版本的实现 了解小程序默认导航 如上图所示,微信导航分为两部分,第一个部分为statusBarHeight,刘海屏手机(iPhone X,小米8等)会比其他的手机高很多,第二部分为titleBarHeight,安卓和IOS的高度不同,但是IOS高度是一样的,IOS高度是一样的, 所以我们要实现一个兼容不同手机的导航必须要根据不同的手机实现statu

  • 微信小程序自定义可滚动的弹出框

    本文实例为大家分享了微信小程序自定义可滚动弹出框的具体代码,供大家参考,具体内容如下 最近在写一个装修的活动,规则是点击按钮弹出加上相应的动画. 首先我们需要一个按钮触发显示(如图,点击详细规则显示规则模态框,图二右边的滚动条在手机上不显示) 思路:小程序自己的模态框不能写样式,这是个比较尴尬的情况,这是一个比较小白的解决方案: 在前端写一个视窗,默认让它隐藏 我这边是用showModel来控制,默认给它false,当点击规则按钮是将showModel的值改为true,点击关闭按钮将showMo

  • 微信小程序自定义tab实现多层tab嵌套功能

    小程序最近是越来越火了-- 做小程序有一段时间了,总结一下项目中遇到的问题及解决办法吧. 项目中有个多 tab 嵌套的需求,进入程序主界面下面有两个 tab,进入A模块后,A模块最底下又有多个tab,每个tab上又嵌了2-4个不等的tab... 这种变态需求只能自定义tab了. 其实如果项目不是很复杂,没有多tab嵌套的需求,完全可以用小程序官方的 tabBar,方便快捷. 官方 tabBar 地址:https://developers.weixin.qq.... 一.Demo结构 先看效果图吧

  • 微信小程序实现的涂鸦功能示例【附源码下载】

    本文实例讲述了微信小程序实现的涂鸦功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 布局文件index.wxml: <view class="container"> <!--画布区域--> <view class="canvas_area"> <!--注意:同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作--> &

  • 微信小程序自定义组件实现tabs选项卡功能

    本文为大家分享了微信小程序实现tabs选项卡功能的具体代码,供大家参考,具体内容如下 一个自定义组件由 json wxml wxss js 4个文件组成.要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为自定义组件) components/navigator/index.json { "component": true } components/navigator/index.wxml <!-- 自定

随机推荐