vue-cli4 + cordova扫描二维码

最近要实现一个扫码的功能所以要用到cordova的扫描插件，由于不熟捣腾了很久现在记录一下。顺便做个分享。

一. 安装cordova

npm i cordova -g

二. 使用cordova初始化项目

cordova create cordovademo

然后进入 cordovademo 项目目录执行

cordova platform add android

这时如果执行就可以打包编译成一个apk文件在手机上安装了

cordova build android

接下来我们要添加一个vue的项目

三. 添加Vue 项目

直接在cordovademo创建项目就可以了,创建项目时的自定义选项，根据自己需要选择安装

vue create vueapp

配置vue.config.js
@vue/cli 3x之后生成的项目都没这个vue.config.js配置文件了。所以这里我们需要自己新建一个vue.config.js文件然后添加上配置

vue.config.js:

module.exports = {//基本路径publicPath: './',//输出文件目录// outputDir: './www/', //这里定义编译后输出的文件路径productionSourceMap:false, //不生成map
}

四. 在vue项目里使用cordova

首先在cordovademo目录下添加摄像头等插件

cordova plugin add cordova-plugin-camera  //支持手机相机与相册调用
cordova plugin add phonegap-plugin-barcodescanner //支持手机扫描二维码

这里使用vue-cordova插件安装npm install --save vue-cordova
然后到vueapp项目里的index.html添加上<script src="cordova.js"></script>
在main.js中引入vue-cordova全局，不过我就没在这添加这个了。不过在这里判断添加cordova.js很重要

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
// import VueCordova from 'vue-cordova'
import App from './App.vue'// Vue.use(VueCordova)
Vue.use(MintUI)
Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')// add cordova.js only if serving the app through file://
//所有在mian.js中判断当前平台添加cordova.js
if (window.location.protocol === 'file:' || window.location.port === '3000') {var cordovaScript = document.createElement('script')cordovaScript.setAttribute('type', 'text/javascript')cordovaScript.setAttribute('src', 'cordova.js')document.body.appendChild(cordovaScript)
}

在要调用摄像头的页面上使用
导入插件

  import Vue from 'vue'import VueCordova from 'vue-cordova'Vue.use(VueCordova)

在页面等待加载完毕才能调用cordova插件

mounted(){console.dir('deviceready...')Vue.cordova.on('deviceready', () => {console.log('Cordova : device is ready !');});}

调用摄像头扫描二维码

methods:{handleClick(){//设置扫码框配置const scanOption = {preferFrontCamera : false, // iOS and AndroidshowFlipCameraButton : true, // iOS and AndroidshowTorchButton : true, // iOS and AndroidtorchOn: false, // Android, launch with the torch switched on (if available)saveHistory: false, // Android, save scan history (default false)prompt : "在扫描区域内放置条形码", // AndroidresultDisplayDuration: 0, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED// orientation : "landscape", // Android only (portrait|landscape), default unset so it rotates with the devicedisableAnimations : true, // iOSdisableSuccessBeep: false // iOS and Android}
//扫描二维码window.cordova.plugins.barcodeScanner.scan((result) => {console.log(result)Toast({message: '扫码数据：'+result.text,position: 'bottom',duration: 5000});}, (error) => {console.err(error)},scanOption)//打开拍照功能/*Vue.cordova.camera.getPicture((imageURI) => {window.alert('Photo URI : ' + imageURI)}, (message) => {window.alert('FAILED : ' + message)}, {quality: 50,destinationType: Vue.cordova.camera.DestinationType.FILE_URI})*/}}

这里注意的是这一句window.cordova.plugins.barcodeScanner.scan,之前我直接用官方文档上的cordova.plugins.barcodeScanner.scan 它老是会报 error ‘cordova’ is not defined no-undef ，所以在window对象下才能访问这个扫码插件这点要注意。

五. 编译打包

编译vue项目

npm run build

把dist目录下的所有文件复制到cordovademo文件夹下的www中。这里其实可以直接配置vue.config.js编译目录直接指向这个www文件夹这样就不用自己手动复制过去了。
执行 cordova platform add android
cordova打包编译成apk文件cordova build android编译好它会提示编译到了哪个目录下

然后在手机上安装，大功告成！

六.结语

最后有的小伙伴可能会遇到cordova 打包访问不到网络

在androidManifest.xml 文件中的 application标签上加上 android:hardwareAccelerated=“true” 属性和
android:usesCleartextTraffic="true"即可

vue-cli4 + cordova扫描二维码相关推荐

Vue中实现扫描二维码和条形码
如何使用Vue实现一个H5扫码功能? 安装 @zxing/library 依赖 npm i @zxing/library --save; 需要注意的是一定要在https环境下使用!一定要在https ...
Vue 移动端实现调用相机扫描二维码或条形码
一.开发前的准备实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能(详见概述 | 微信开放文档),或者支付宝 H5 开放的API(详见?支付宝H5开放文档). 但是 ...
在Vue中调用微信的扫描二维码功能
在Vue中调用微信的扫描二维码功能步骤新建vue文件(这里采用mint的标签库--就一个按钮~~) 关键代码 <template><div class="login_d ...
vue扫描二维码，真机调试
vue扫描二维码,真机调试 vue代码使用HBuilderX 运行界面 vue代码 <el-button>标签需要引用element-ui,如果没有,可以注释,打开下面的普通<bu ...
vue实现调用摄像头扫描二维码
安装依赖:vue-qrcode-reader npm install vue-qrcode-reader -s 直接上代码 <template><div><div cla ...
ionic5 + cordova：使用QRScanner完成扫描二维码功能
接到一个app的改造的任务,主要是适配一款手持设备,在页面上增加一个类似微信的二维码扫描的唤醒按钮,点击之后进入扫描二维码的页面---- 步骤如下: 1.在项目中下载QRCode的cordova插件: ...
Vue 实现简单的二维码扫描功能
1.使用以下命令安装实现扫描二维码的插件 npm install --save vue-qecode-reader 或者 cnpm install --save vue-qrcode-reader 插 ...
vue websocket 公众号扫描二维码登录PC端
首先使用的是websocket进行消息的传递,当我们在pc端请求到二维码图片后,打开微信扫一扫,扫描二维码后,就可以在websocket里接收到扫描消息,然后进行自己的业务逻辑处理,具体代码如下: w ...
Vue3 扫描二维码
记录下vue3的扫描二维码功能开发(摄像头扫描,二维码上传文件扫描) 1. 安装vue3-qr-reader插件 npm i --save vue3-qr-reader或yarn add vue3-q ...