关于vue转uniapp项目的扫一扫功能实现

别的不多说了，直接上结果

<template>

  <div class="scan">

    <div id="bcid">

      <div style="height:40%"></div>

      <p class="tip">...载入中...</p>

    </div>

  </div>

</template>

<script type='text/ecmascript-6'>

  let scan = null

  export default {

    data () {

      return {

        codeUrl: '',

      }

    },

    created(){

      this.startRecognize()

    },

    // mounted(){

    //   this.startRecognize()

    // },

    methods: {

      // 创建扫描控件

      startRecognize () {

        let that = this

        setTimeout( () =>{

            if (!window.plus) return

            scan = new plus.barcode.Barcode('bcid')

            scan.onmarked = onmarked

            function onmarked (type, result, file) {

            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(/\n/g, '')

            that.codeUrl = result

            alert(result)

            that.closeScan()

            }

            if (!window.plus) return

            scan.start()

        },100)

      },

      // 开始扫描

    //   startScan () {

    //     if (!window.plus) return

    //     scan.start()

    //   },

      // 关闭扫描

      cancelScan () {

        if (!window.plus) return

        scan.cancel()

      },

      // 关闭条码识别控件

      closeScan () {

        if (!window.plus) return

        scan.close()

      },

    }

  }

</script>

<style lang="less">

  .scan {

    height: 100%;

    #bcid {

      width: 100%;

      position: absolute;

      left: 0;

      right: 0;

      top: 0;

      bottom: 3rem;

      text-align: center;

      color: #fff;

      background: #ccc;

    }

    footer {

      position: absolute;

      left: 0;

      bottom: 1rem;

      height: 2rem;

      line-height: 2rem;

      z-index: 2;

    }

  }

</style>