vue+Hbuilder 二维码扫码功能的实现

此代码须建立在Hbuilder上代码如下：只有真机运行才能起作用<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport

杨园园的微博

9490人浏览 · 2018-08-27 16:01:19

杨园园的微博 · 2018-08-27 16:01:19 发布

此代码须建立在Hbuilder上
代码如下：只有真机运行才能起作用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

  <title>XXXXX</title>


  <style type="text/css">
    *{ -webkit-user-select: none;}
    html,body{
      margin: 0px;
      padding: 0px;
      height: 100%;
    }
    #bcid {
      background:#0F0;
      height:480px;
      width:360px;
    }
  </style>

  <script type="text/javascript" >
      // 扩展API加载完毕后调用onPlusReady回调函数
      document.addEventListener( "plusready", onPlusReady, false );
      // 扩展API加载完毕，现在可以正常调用扩展API
      function onPlusReady() {
          var e = document.getElementById("scan");
          e.removeAttribute( "disabled" );
      }
      var scan = null;
      function onmarked( type, result ) {
          var text = '未知: ';
          switch(type){
              case plus.barcode.QR:
                  text = 'QR: ';
                  break;
              case plus.barcode.EAN13:
                  text = 'EAN13: ';
                  break;
              case plus.barcode.EAN8:
                  text = 'EAN8: ';
                  break;
          }
          alert( text+result );
      }
      function startRecognize() {
          scan = new plus.barcode.Barcode('bcid');
          scan.onmarked = onmarked;
      }
      function startScan() {
          scan.start();
      }
      function cancelScan() {
          scan.cancel();
      }
      function setFlash() {
          scan.setFlash();
      }


      function startRecognize() {
          console.log("333333333333333");
          scan = new plus.barcode.Barcode('bcid');
          scan.onmarked = onmarked;
          this.startScan
      }
     function startScan () {
          scan.start();
      }
  </script>
</head>
<body>
<div>扫码功能</div>
<input type='button' onclick='startRecognize()' value='创建扫描控件' />
<input type='button' onclick='startScan()' value='开始扫描' />
<input type='button' onclick='cancelScan()' value='取消扫描' />
<input type='button' onclick='setFlash()' value='开启闪光灯' />
<div id= "bcid"></div>
<input type='text' id='text'/>
<!--<div id="app"></div>-->
<script src="../dist/build.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3mn83YpfI9VdPSZg1DfuK7lg0UqRljwt"></script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^