初探Cordova结合Vue|博客系列

# 一、前言

我们可以使用cordova来打包现有的vue、react、angular应用为app，可以借助cordova来调用手机设备的原生能力，比如拍照、扫码、定位等

# 1.1 ionic3

ionic3=cordova+angular+ionicUI（Ionic UI组件+ Javascript API+Ionic Native）

优点：它提供了漂亮的UI组件库、强大的JS APi以及基于调用原生的的Native APi,可以让我们快速开发跨平台的混合APP以及移动web页面。（推荐*）
缺点：angular react vue开发的移动端应用要打包成app的时候得重新再学习ionic

# 1.2 cordova

cordova: 可以把html css js写的代码打包成app，还可以让js调用原生的api。cordova非常成熟、插件也非常多、扩展性也强，10年的历史

打包App有几个方案

ionic
reactNative
weex
flutter
cordova+vue
cordova+react
cordova+angular

# 二、环境搭建

# 2.1 用cordova开发android 应用

安装jdk 、配置jdk
安装android studio
安装nodejs
安装cordova

## 淘宝源安装
npm install -g cordova --registry=https://registry.npm.taobao.org

cnpm install -g cordova

创建项目cordova create 项目名称

cordova create 项目名 com.公司名.项目名类名 （建议）

cordova create cordovademo02  com.baidu.cordova  Cordovademo

创建项目的时候注意包名称：发布上线打包的时候用到包名称，注意

修改应用包名名称参考：http://www.ionic.wang/article-index-id-91.html

修改应用包名名称：

修改config.xml里面的包名称
修改完成以后重新执行cordova platform add android

cd 到项目里面 cd cordovademo02

把android的平台添加到项目里面 cordova platform add android
把项目导入到 android studio 进行运行调试（或者运行 cordova run android）注意可能遇到的问题参考（安装遇到问题图文解决方案文件夹

导入platform下的Android文件

导入android studio可能遇到的错误解决方法

导入后提示：Android Studio Error:Connection timed out: connect

解决方案参考：https://blog.csdn.net/u013020000/article/details/73159754

遇到错误 failed to find with hash string 'android-26'

解决方案点击图上蓝色链接进行安装

Gradle build 没有反应如

解决方案：点击build见图箭头。如果有下载内容耐心等待（30分钟-2小时）

提示 please configure Android SDK

解决方案：点击蓝色 configure，然后选择对应的sdk （前提是sdk已经安装）

真机调试,手机连上没有反应

关闭或者卸载自己电脑上面的360手机助手或者其他连手机的软件
安装你手机对应的sdk

建议 android 5-到android8 sdk都安装（安装sdk ： Tools->SDK Manager）

点击右上角对应箭头按钮配置

查看当前连接上的手机

手机必须开启调试模式（百度搜 xxx手机开启调试模式）
手机拔下来重启android studio，重新插入手机重试
百度搜（android studio 连不上手机...）

运行项目：注意

android手机要连上电脑，并且 android手机必须开启调试模式
android studio 必须得安装手机对应的sdk
关闭360手机助手、xxx手机助手
修改项目: 运行cordova prepare

# 2.2 iOS平台搭建cordova环境

安装nodejs 安装xcode
安装cordova

cnpm install -g cordova

创建项目

cordova create 项目名 com.公司名.项目名类名 （建议）

cordova create cordovademo02  com.baidu.cordova  Cordovademo

1. cd cordovademo02
3.把ios的平台添加到项目里面 cordova platform add ios
1. 用xcode打开项目运行

# 三、cordova插件的使用

cordova插件拍照插件、定位插件、文件上传插件以及vconsole开启真机（手机）调试模式

cordova安装插件

如果我们要在自己的html里面调用手机原生的功能（拍照、扫描二维码、获取地理位置...）,借助cordova的插件

cordova 官网：https://cordova.apache.org/

如何使用插件：

安装插件 cordova plugin add 插件名称
复制文档使用

查看已经安装的插件：

cordova plugin list

卸载插件：

cordova plugin rm  cordova-plugin-network-information

插件使用

1. 设备插件的使用

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device/index.html

## 安装 看文档使用
cordova plugin add cordova-plugin-device

2. 使用网络相关的插件

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-network-information/index.html

# 安装 看文档使用
cordova plugin add cordova-plugin-network-information

3. 定位插件

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/index.html

cordova plugin add cordova-plugin-geolocation

注意改代码以后要运行：cordova prepare
注意：要引入cordova.js
注意：项目里面不要有中文文件夹、不要有zip包、不要有中文文件

4. 拍照插件

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html

注意：ios拍照完成以后调用 navigator.camera.cleanup(onSuccess, onFail)

5. 文件上传或者下载

文件插件: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/index.html
文件传输插件：https://www.npmjs.com/package/cordova-plugin-file-transfer

# 四、cordova结合vue

# 4.1 cordova结合vue开发跨平台app

cordova结合vue开发跨平台混合app之Cordova打包Vue项目

cordova打包vue项目：

cordova: 可以把html css js写的代码打包成app，还可以让js调用原生的 api

cordova+vue、cordova+react 、cordova+angular 、 cordova+jquery

创建vue项目的时候有两种方式：

vue init webpack 项目名称

vue init webpack-simple  项目名称

正式发布vue的项目：（把vue项目打包成浏览器能解析的代码）

npm run build # 把vue打包成浏览器能解析的代码

把vue项目用cordova打包成app：

npm run build （注意：图片目录的路径）
把vue打包后的静态资源复制到cordova项目里面
运行 cordova prepare

注意：

vue init webpack-simple  #项目名称

修改：webpack.config.js 里面 publicPath
把publicPath: '/dist/' 改为 publicPath: 'dist/'
修改index里面引入dist的路径,去掉前面的/ (重要)

vue init webpack 项目名称

修改：config/index.js 把 assetsPublicPath: '/',
修改成 assetsPublicPath: './'

ios下打开效果。这样很方便打包原有的项目为app

# 4.2 vue调用cordova插件

cordova打包vue项目并在Vue中调用原生的api：

使用vue-cordova 插件（不推荐使用）

https://github.com/kartsims/vue-cordova

vue项目安装 npm install --save vue-cordova
在 main.js 引入插件并use插件

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

调用插件注意在对应的组件需要引入

var Vue = require('vue')

Vue.cordova.camera.getPicture((imageURI) => {
    window.alert('Photo URI : ' + imageURI)
}, (message) => {
    window.alert('FAILED : ' + message)
}, {
    quality: 50,
    destinationType: Vue.cordova.camera.DestinationType.FILE_URI
})

注意需要在vue项目 index.html引入 cordova.js

<script src="cordova.js"></script>

index.html 引入cordova.js 并定义全局变量让vue组件里面直接使用cordova插件(推荐的使用方法）

在vue index.html引入cordova.js （注意顺序cordova.js放在build.js上面）
直接可以在组件里面使用cordova的api（注意cordova里面要安装api的插件）

阅读全文

← vue项目中的痛点初识vue与环境搭建 →