vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码

vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码

案例描述：需求是生成条形码并且在vue项目中实现扫一扫功能并不是拍照上传后端识别那种

项目场景：单纯的h5项目，没办法调用微信等封装好的组件或者js因为有些场景并不在微信自带的浏览器里面

问题描述：

生成条形码使用vue-barcode

cnpm i vue-barcode -D

//在main.js中
import VueBarcode from 'vue-barcode';

Vue.component('barcode', VueBarcode)
//在对应生成条形码页面
 
 //value为输入需要生成的code
 //value注意不要太长因为太长的话生成的码也很长很密集，h5实现的扫一扫毕竟性能
 //不是很好太密集太长识别不了，如果java生成的码出现扫不
 //出来的情况告诉他试试调整成Code-128

第一步：因为扫码js不支持vue组件注册或者是引入等方式，就算是支持我感觉也很麻烦，所以这样的话以动态创建script的方法将扫码js引入vue项目中

//动态创建script的方法
 AddJs: function (url) {
    console.log(url,'url')
    return new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.type = 'text/javascript'
      document.body.appendChild(script)
      script.onload = () => {
        resolve()
      }
    })
  },

第二步：在对应的vue页面调用方法将扫码js引入

 methods: {
     init(){
        util.loadJs('https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js')  
    },
 },
 mounted(){
    this.init()
  }

第三步：在对应的vue页面中设置盛放扫码的div盒子