The code that needs to be added to the vue project:
- index.html add code block
<!-- 引入cordova.js -->
<script type="text/javascript" src="cordova.js"></script>
<!-- 扫一扫包的引用 -->
<script type="text/javascript" src="cordova_plugins.js"></script>
- 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)
- 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
}
)
}
- 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
Cordova project:
- 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
- Add scan plugin
cordova plugin add phonegap-plugin-barcodescanner --save
- Replace the compiled file of the vux project
- 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~~~~~~~~~~~~~~~~~~~~