导航
导航
文章目录󰁋
  1. 一、前言
    1. 1.1 ionic3
    2. 1.2 cordova
  2. 二、环境搭建
    1. 2.1 用cordova开发android 应用
    2. 2.2 iOS平台搭建cordova环境
  3. 三、cordova插件的使用
  4. 四、cordova结合vue
    1. 4.1 cordova结合vue开发跨平台app
    2. 4.2 vue调用cordova插件

初探Cordova结合Vue

一、前言

我们可以使用cordova来打包现有的vuereactangular应用为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调用原生的apicordova非常成熟、插件也非常多、扩展性也强,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可能遇到的错误解决方法

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

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


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

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

  1. Gradle build 没有反应如


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

  1. 提示 please configure Android SDK

解决方案:点击蓝色 configure,然后选择对应的sdk (前提是sdk已经安装)

  1. 真机调试,手机连上没有反应
  • 关闭或者卸载自己电脑上面的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
  1. 创建项目

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. 文件上传 或者下载

四、cordova结合vue

4.1 cordova结合vue开发跨平台app

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

cordova打包vue项目:

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

cordova+vuecordova+reactcordova+angularcordova+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.jsassetsPublicPath: '/',
  • 修改成 assetsPublicPath: './'

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

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上面)
  • 直接可以在组件里面使用cordovaapi(注意cordova里面要安装api的插件)
支持一下
扫一扫,支持poetries
  • 微信扫一扫
  • 支付宝扫一扫