初探Cordova结合Vue

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 ） 注意可能遇到的问题参考（安装遇到问题图文解决方案文件夹

运行项目 ：注意

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

2.2 iOS平台搭建cordova环境

• 安装 nodejs 安装 xcode
• 安装 cordova

cnpm install -g cordova

1. 创建项目

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

cordova create cordovademo02  com.baidu.cordova  Cordovademo

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

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插件的使用

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

四、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: './'

4.2 vue调用cordova插件

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

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

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

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

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

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

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
})

1. 注意需要在 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 的插件）