The front-end vue uses the Android application packaged by cordova to call the mobile phone to scan the code (the real machine test is valid)

The code that needs to be added to the vue project:

  1. index.html add code block
    <!-- 引入cordova.js -->
    <script type="text/javascript" src="cordova.js"></script>
     <!-- 扫一扫包的引用 -->
    <script type="text/javascript" src="cordova_plugins.js"></script>
  1. The main.js global configuration code block is as follows, first load the cordova plug-in, and then execute the vue function:
	document.addEventListener('deviceready', function () {
  new Vue({
    el: '#app-box',  //index.html中div的id
    router,   // 路由对象,没有则不要
    components: { App },  //app.vue
    template: '<App/>'
  })
  window.navigator.splashscreen.hide()
}, false)
  1. The page that needs to call the scan code:
    //Apply the Xbotton button control of vux, use the vuxui library to write a botton button binding to call the scan code function
  <x-button mini type="primary" @click.native="handleSmClick">扫 码</x-button>

//Main scan code function

  handleSmClick(){
        let that =this
        cordova.plugins.barcodeScanner.scan(
          function (result) {
           /*alert("We got a barcode\n" +
            "Result: " + result.text + "\n" +
            "Format: " + result.format + "\n" +
            "Cancelled: " + result.cancelled)*/
            let code =result.text
           	console.log(code)
          },
          function (error) {
            console.log(error)
          },{
            preferFrontCamera : false, // iOS and Android   前置摄像头?
            showFlipCameraButton : true, // iOS and Android //前后置摄像头开关
            showTorchButton : true, // iOS and Android //闪光灯开关
            torchOn: false, // Android, launch with the torch switched on (if available) //闪光灯
            saveHistory: false, // Android, save scan history (default false) //历史扫码记录
            prompt : "将条形码放入扫描区域内", // Android //下方提示文字
            resultDisplayDuration: 0, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500  设置扫码完成后返回成功对象的时间,默认延时1.5s
            formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
            orientation : "", // Android only (portrait|landscape), default unset so it rotates with the device  横屏竖屏
            disableAnimations : true, // iOS
            disableSuccessBeep: false // iOS and Android
          }
        )
      }    
  1. Compile the vue project
npm run build

Replace the files in the generated dist folder with the files
related to vue in the www folder of the cordova project
Related documents of vue

Cordova project:

  1. Create a new Cordova project
cordova create d:/hello com.example.hello HelloWorld

cd to the hello folder to operate
2. Add the corresponding platform (android for this test)

//添加android平台的编译
cordova platform add android
  1. Add scan plugin
cordova plugin add phonegap-plugin-barcodescanner --save
  1. Replace the compiled file of the vux project
    Cordova project related files
  2. Generate the final installation package apk file (debug version)
cordova build android

The cordova environment is not set up well, you can refer to this article

You're done installing the apk to the phone for testing~~~~~~~~~~~~~~~~~~~~

Guess you like

Origin blog.csdn.net/ouyangli2011/article/details/103779675