注: 我在 Android 上測(cè)試成功完成魂贬，ios沒有測(cè)試。

1. 創(chuàng)建 Barcode 掃碼控件裙顽，在 beforeRouteEnter 進(jìn)入頁面的時(shí)候調(diào)取付燥。
2. 如果沒有相機(jī)權(quán)限，去調(diào) h5+ api愈犹，進(jìn)行授權(quán)設(shè)置键科。不同手機(jī)被調(diào)取的授權(quán)界面設(shè)置不一樣闻丑。
3. 掃碼獲取信息成功后，取消 Barcode掃碼控件勋颖，bc.cancel()嗦嗡。
4. 在 Android 手機(jī)上，不能全屏饭玲，百度了很多都不能解決侥祭，這很扯淡!。

<template>
  <div class="scanQRCode">
    <div v-if="showQRcode.showcode" class="scanQRCode-body" id="scan"></div>

    <button v-else type="button" @click="clickEvent">掃碼成功</button>
  </div>
</template>

<script>
import Vue from 'vue'
let scan = null
export default {
  data () {
    return {
      randomid: '',
      showQRcode: {
        showcode: true
      }
    }
  },

  methods: {
    clickEvent (this.randomid) {
      帶著掃碼信息茄厘，去做自己想要的操作
    },

    // 開始識(shí)別
    startScan () {
      if (!window.plus) return
      // 創(chuàng)建Barcode掃碼控件
      this.startRecognize()
      setTimeout(() => {
        scan.start()
      }, 200)
    },

    // 創(chuàng)建掃描控件對(duì)象
    startRecognize () {
      var _this = this
      if (!window.plus) return

      scan = null
      scan = new window.plus.barcode.Barcode(
        'scan',
        [window.plus.barcode.QR],
        {
          frameColor: '#f08700',
          scanbarColor: '#f08700'
        }
      )

      /**
      * 掃碼識(shí)別成功事件
      * type: ( Number ) 必選 識(shí)別到的條碼類型
      * result: ( String ) 必選 識(shí)別到的條碼數(shù)據(jù)
      */
      scan.onmarked = (type, result, file) => {
        let text = '未知: '
        switch (type) {
          case window.plus.barcode.QR:
            text = 'QR: '
            break
          case window.plus.barcode.EAN13:
            text = 'EAN13: '
            break
          case window.plus.barcode.EAN8:
            text = 'EAN8: '
            break
          default:
            text = '其他: '
            break
        }
        _this.randomid = result
        _this.showQRcode.showcode = false
        if (result !== '' || result !== null || result !== undefined) {
          _this.$nextTick(() => {
            Vue.set(_this.showQRcode, 'showcode', false)
            scan.close()
          })
        }
        console.log(text + result)
      }
    },

    camerapermissions () {
      var Build = window.plus.android.importClass('android.os.Build')
      var Manifest = window.plus.android.importClass('android.Manifest')
      var MainActivity = window.plus.android.runtimeMainActivity()
      // var context=main.getApplicationContext(); // 未用到,在此僅供參考
      var ArrPermissions = [
        Manifest.permission.READ_EXTERNAL_STORAGE,
        Manifest.permission.WRITE_EXTERNAL_STORAGE,
        Manifest.permission.CAMERA
      ]

      function PermissionCheck (permission) {
        if (Build.VERSION.SDK_INT >= 23) {
          if (MainActivity.checkSelfPermission(permission) === -1) {
            return false
          }
        }
        return true
      }

      function PermissionChecks (Arr) {
        var HasPermission = true
        for (var index in Arr) {
          var permission = Arr[index]
          // 如果此處沒有權(quán)限,則是用戶拒絕了
          if (!PermissionCheck(permission)) {
            HasPermission = false
            break
          }
        }
        return HasPermission
      }

      function PermissionRequest (Arr) {
        var REQUEST_CODE_CONTACT = 101
        if (Build.VERSION.SDK_INT >= 23) {
          MainActivity.requestPermissions(Arr, REQUEST_CODE_CONTACT)
        }
      }

      // 如果沒有權(quán)限矮冬，則申請(qǐng)
      if (!PermissionChecks(ArrPermissions)) {
        PermissionRequest(ArrPermissions)
      } else { // 如果擁有權(quán)限，那么干點(diǎn)啥吧^_^
        // .......
      }
    },

    qrcode () {
      var _this = this
      if (window.plus) {
        let _s = window.plus.navigator.checkPermission('camera')
        if (_s === 'authorized') {
          _this.startScan()
        } else if (_s === 'undetermined') {
          var msg = '請(qǐng)?jiān)趹?yīng)用權(quán)限里設(shè)置允許使用相機(jī)權(quán)限'
          window.plus.nativeUI.alert(msg, function (e) {
            if (window.plus.os.name === 'iOS') {
              window.plus.runtime.openURL('app-settings:CAMERA')
            } else {
              _this.camerapermissions()
              _this.$nextTick(() => {
                _this.$forceUpdate()
                _this.$router.replace('/mine')
              })
            }
          })
        } else {
          if (window.plus.os.name === 'iOS') {
            window.plus.runtime.openURL('app-settings:CAMERA')
          } else {
            var main = window.plus.android.runtimeMainActivity()
            var Intent = window.plus.android.importClass('android.content.Intent')
            var Build = window.plus.android.importClass('android.os.Build')
            var Uri = window.plus.android.importClass('android.net.Uri')
            var intent = new Intent()
            intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
            if (Build.VERSION.SDK_INT >= 9) { // 系統(tǒng)8.0以上的
              intent.setAction('android.settings.APPLICATION_DETAILS_SETTINGS')
              intent.setData(Uri.fromParts('package', main.getPackageName(), null))
            } else if (Build.VERSION.SDK_INT <= 8) { // 系統(tǒng)8.0以下的
              intent.setAction(Intent.ACTION_VIEW)
              intent.setClassName('com.android.settings', 'com.android.setting.InstalledAppDetails')
              intent.putExtra('com.android.settings.ApplicationPkgName', main.getPackageName())
            }
            main.startActivity(intent)
            _this.$nextTick(() => {
              _this.$forceUpdate()
              _this.$router.replace('/mine')
            })
          }
        }
      }
    }

  },

  beforeRouteEnter (to, from, next) {
    next((vm) => {
      // 調(diào)取二維碼掃碼
      vm.qrcode()
    })
  },

  beforeDestroy () {
    if (!window.plus) return
    scan.cancel()
    scan.close()
  }
}
</script>

掃碼控件