1.在某個.vue裏面添加下面代碼
<template>
<div id="app">
<p>測試掃一掃</p>
<!-- 掃一掃按鈕 -->
<button @click="handleClick" >掃一掃</button>
</div>
</template>
<script>
export default {
name: 'App',
el: '#app',
methods: {
handleClick: function () {
// 掃一掃方法
cordova.plugins.barcodeScanner.scan(
function (result) {
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled)
},
function (error) {
alert(error)
}
)
}
}
}
</script>
2、在index.html 的引入cordova.js和cordova_plugins.js
<body>
<div id="app"></div>
<% if (process.env.TARGET === 'cordova') { %>
<script type="text/javascript" src="cordova.js"></script>
<!-- 掃一掃包的引用 -->
<script type="text/javascript" src="cordova_plugins.js"></script>
<% } %>
<!-- built script files will be auto injected -->
</body>
</html>
3、app.js中加入
if (process.env.TARGET === 'cordova'){
/* eslint-disable no-new */
document.addEventListener('deviceready', function () {
// Init App
new Vue({
el: '#app',
panel: {
swipe: 'left',
leftBreakpoint: 768,
rightBreakpoint: 1024,
},
render: (h) => h(App),
// Register App Component
components: {
app: App,
statusbarOverlay:false
},
});
window.navigator.splashscreen.hide()
}, false);
}else{
new Vue({
el: '#app',
panel: {
swipe: 'left',
leftBreakpoint: 768,
rightBreakpoint: 1024,
},
render: (h) => h(App),
// Register App Component
components: {
app: App,
statusbarOverlay:false
},
});
}
4、添加相應的插件
cordova plugin add phonegap-plugin-barcodescanner --save
然後自然就是打包測試了。