vueプロジェクトに追加する必要のあるコード:
- index.htmlコードブロックを追加
<!-- 引入cordova.js -->
<script type="text/javascript" src="cordova.js"></script>
<!-- 扫一扫包的引用 -->
<script type="text/javascript" src="cordova_plugins.js"></script>
- 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)
- スキャンコードを呼び出す必要があるページ:
// 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
}
)
}
- vueプロジェクトをコンパイルします
npm run build
生成されたdistフォルダー内のファイルを、cordovaプロジェクトのwwwフォルダー内の
vueに関連するファイルに置き換えます。
コルドバプロジェクト:
- 新しいCordovaプロジェクトを作成する
cordova create d:/hello com.example.hello HelloWorld
操作するには、helloフォルダーにcdします
。2。対応するプラットフォームを追加します(このテストではandroid)
//添加android平台的编译
cordova platform add android
- スキャンプラグインを追加
cordova plugin add phonegap-plugin-barcodescanner --save
- vuxプロジェクトのコンパイル済みファイルを置き換えます
- 最終的なインストールパッケージのapkファイル(デバッグバージョン)を生成します
cordova build android
コルドバ環境が適切に設定されていない場合は、この記事を参照してください
テストのためにapkを電話にインストールしました~~~~~~~~~~~~~~~~~~~~