最近要实现一个扫码的功能所以要用到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'