H5扫码功能实现

最新推荐文章于 2024-07-24 11:01:11 发布

as2nnn

最新推荐文章于 2024-07-24 11:01:11 发布

阅读量1.1w

点赞数 4

分类专栏： H5扫码文章标签： javascript js

本文链接：https://blog.csdn.net/qq_41613524/article/details/107663030

版权

H5扫码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

H5扫码功能的实现

功能实现要用到H5+

1.首先需要下载Hbuilder，然后创建H5+项目。再把自己的项目文件替换到新创建的项目里。项目要引入common.js

2.添加一个扫码按钮，给按钮添加点击事件

$(".Scan-three").on("click",function(){
  openBarcode()
})
//打开扫码界面
function openBarcode() {
  createWithoutTitle('barcode_scan.html', {
    titleNView: {
      type: 'float',
      backgroundColor: 'rgba(215,75,40,0.3)',
      titleText: '扫一扫',
      titleColor: '#FFFFFF',
      autoBackButton: true,
      buttons: [
        {
          fontSrc: '_www/helloh5.ttf',
          text: '\ue401',
          fontSize: '18px',
          onclick: 'javascript:switchFlash()',
        },
      ],
    },
  })
}
function scaned(t, r) {
  //扫码结果返回这里
console.log(t+r)
}

3.新创建一个html，Scan扫码界面代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <title>Scan</title>
    <link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8" />
    <style type="text/css">
      #bcid {
        width: 100%;
        position: absolute;
        top: 0px;
        bottom: 0px;
        text-align: center;
      }

      .tip {
        color: #ffffff;
        font-weight: bold;
        text-shadow: 0px -1px #103e5c;
      }
    </style>
  </head>
  <body style="#000000;">
    <div id="bcid">
      <div style="height: 40%;"></div>
      <p class="tip">...载入中...</p>
    </div>
  </body>
  
  <script src="js/scan.min.js"></script>
  <script type="text/javascript" src="js/common.js"></script>
</html>

4.Scan扫码界面js

var ws = null,
  wo = null
var scan = null
// H5 plus事件处理
function plusReady() {
  // 获取窗口对象
  ws = plus.webview.currentWebview()
  wo = ws.opener()
  // 开始扫描
  ws.addEventListener(
    'show',
    function () {
      scan = new plus.barcode.Barcode('bcid')
      scan.onmarked = onmarked
      scan.start({})
      createSubview()
    },
    false
  )

  // 显示页面并关闭等待框
  ws.show('pop-in')
}
document.addEventListener('plusready', plusReady, false)

// 二维码扫描成功

function onmarked(type, result) {
  switch (type) {
    case plus.barcode.QR:
      type = 'QR'
      break
    case plus.barcode.EAN13:
      type = 'EAN13'
      break
    case plus.barcode.EAN8:
      type = 'EAN8'
      break
    default:
      type = '其它' + type
      break
  }
  result = result.replace(/\r\n/g, '')
  wo.evalJS("scaned('" + type + "','" + result + "')")// 里面的方法自己创建自己需要的功能
  back()
}

// 创建子窗口
function createSubview() {
  //
}
// 开关闪光灯
var bFlash = false
var AVCaptureDevice = null
var Camera = null

function switchFlash() {
  bFlash = !bFlash
  scan.setFlash(bFlash)
  ws.setStyle({
    titleNView: {
      buttons: [
        {
          fontSrc: '_www/helloh5.ttf',
          text: bFlash ? '\ue400' : '\ue401',
          fontSize: '18px',
          onclick: 'javascript:switchFlash()',
        },
      ],
    },
  })
}

5.效果图
扫码界面
在这里插入图片描述

as2nnn

关注

4
点赞
踩
27

收藏

觉得还不错? 一键收藏
5
评论
H5扫码功能实现

H5扫码功能的实现功能实现要用到H5+1.首先需要下载Hbuilder，然后创建H5+项目。再把自己的项目文件替换到新创建的项目里。项目要引入common.js2.添加一个扫码按钮，给按钮添加点击事件$(".Scan-three").on("click",function(){ openBarcode()})//打开扫码界面function openBarcode() { createWithoutTitle('barcode_scan.html', { titleNView:
复制链接

扫一扫

专栏目录