フロントエンドvueは、cordovaによってパッケージ化されたAndroidアプリケーションを使用して携帯電話に電話をかけ、コードをスキャンします(実際のマシンテストは有効です)

vueプロジェクトに追加する必要のあるコード:

  1. index.htmlコードブロックを追加
    <!-- 引入cordova.js -->
    <script type="text/javascript" src="cordova.js"></script>
     <!-- 扫一扫包的引用 -->
    <script type="text/javascript" src="cordova_plugins.js"></script>
  1. main.jsグローバル構成コードブロックは次のとおりです。最初にcordovaプラグインをロードしてから、vue関数を実行します。
	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. スキャンコードを呼び出す必要があるページ:
    // vuxのXbottonボタンコントロールを適用し、vuxuiライブラリを使用してスキャンコード関数を呼び出すためのボットンボタンバインディングを記述します
  <x-button mini type="primary" @click.native="handleSmClick">扫 码</x-button>

//メインスキャンコード機能

  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. vueプロジェクトをコンパイルします
npm run build

生成されたdistフォルダー内のファイルを、cordovaプロジェクトのwwwフォルダー内の
vueに関連するファイルに置き換えます。
vueの関連ドキュメント

コルドバプロジェクト:

  1. 新しいCordovaプロジェクトを作成する
cordova create d:/hello com.example.hello HelloWorld

操作するには、helloフォルダーにcdします
。2。対応するプラットフォームを追加します(このテストではandroid)

//添加android平台的编译
cordova platform add android
  1. スキャンプラグインを追加
cordova plugin add phonegap-plugin-barcodescanner --save
  1. vuxプロジェクトのコンパイル済みファイルを置き換えます
    コルドバプロジェクト関連ファイル
  2. 最終的なインストールパッケージのapkファイル(デバッグバージョン)を生成します
cordova build android

コルドバ環境が適切に設定されていない場合は、この記事を参照してください

テストのためにapkを電話にインストールしました~~~~~~~~~~~~~~~~~~~~

おすすめ

転載: blog.csdn.net/ouyangli2011/article/details/103779675