前端vue使用cordova打包的安卓应用调用手机扫码（真机测试有效）

原创

于 2019-12-31 11:52:18 发布 · 1.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #cordova #安卓

本文介绍了如何在Vue项目中结合Cordova，通过在Vue的main.js全局配置和页面中编写扫码函数，然后将Vue编译后的文件替换到Cordova项目中，添加Android平台并安装扫码插件，最后生成APK进行真机测试。

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库自己写一个botton按钮绑定调用扫码函数即可

  <x-button mini type="primary" @click.native="handleSmClick">扫 码</x-button>

//主要扫码函数

  handleSmClick(){
        let that =this
        cordova.plugins.barcodeScanner.scan(

最低0.47元/天解锁文章