Cordova+Vue实现Android APP开发

前言：本文是在转载的基础上做了内容补充，仅为记录项目中遇到的问题，转载自

作者：Taotao_Xu 链接：https://www.jianshu.com/p/fd7448e2985a

Cordova是使用HTML,CSS，JavaScript构建的混合移动应用程序的平台。此篇教程的目的是将Vue项目融合到Cordova，正文开始。

开发环境及工具

1. 操作系统：Windows 10 Pro,1709

2. node.js：v8.11.2 （https://nodejs.org/dist/latest-v8.x/）

3. Java环境：

   1.下载安装JDK ，解压出“”jdk_1.8“文件夹
   2.设置JAVA_HOME环境变量
   新建系统变量JAVA_HOME，变量值为JDK根目录
   
   Path=%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin
   

4. 安卓环境：

   1.下载安装Android SDK，解压出“android-sdk-windows”文件夹
   2.配置ANDROID_HOME环境变量
   新建系统变量ANDROID_HOME，变量值为SDK根目录
   
   Path=%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
   
   3.把 Android SDK 环境变量配置完成后，运行文件夹中的 SDK Manager.exe 文件，根据需要安装包

5. 工具

   1.VS code
   2.Android Studio（可选）
   3.模拟器

当准备好上述的开发环境和工具之后，你就可以开发了。可能环境搭建会出现各种问题，耐心解决了就成功一半了。

教程

一、安装cordova框架生成APP

1.用npm安装cordova

npm install -g cordova

2.创建cordova项目

cordova create cordova-vue（cordova-vue为项目名称，自定义）

可能出现的问题：

• 无法加载文件 D:\Users\XX\AppData\Roaming\npm\cordova.ps1，因为在此系统上禁止运行脚本。
  原因：禁止执行脚本，那就打开权限执行脚本
  解决方法：打开 powerShell 用管理员身份运行，输入命令： set-ExecutionPolicy RemoteSigned ，输入A

自此，cordova项目的基本骨架完成了，下面的所有操作都需要在cordova-vue目录下进行。

3.添加android平台

cd cordova-vue

cordova platform add android --save

4.检查构建APP的条件

cordova requirements

若满足下面的条件，说明你可以构建APP了

可能出现的问题：

• Android SDK：not installed
  可能是sdk没安装好或者是环境变量没有配置对
• Android target：not installed
  可能是Android SDK版本没装对，根据提示的版本再安装一次
• Gradle:not installed
  解决方法：到官网下载Gradle（https://services.gradle.org/distributions/），解压后进行环境配置
  新建GRADLE_HOME，地址为Gradle的根目录
  
  Path=%GRADLE_HOME%\bin
  

5.构建APP，并运行demo

cordova build android

出现如下的界面表示你的app构建成功了

可能出现的问题：

• Failed to apply plugin [id ‘com.android.internal.application’]

解决方法：在gradle.properties文件中添加android.overridePathCheck=true就可以了

6.找到APP文件用模拟器打开

APP文件的路径如构建成功的图片所示，根据个人情况而定，我的为：

用模拟器打开的界面：

如果你以上步骤都完成了，恭喜你已经成功了80%，接下来的步骤就是将vue项目整合到Cordova项目里面。

二、vue项目整合到Cordova项目里面

1.构建vue项目

在cordova-vue目录下安装vue项目
安装脚手架：

npm install vue-cli -g

创建项目：

vue init webpack vue-app

2.修改配置项

• vue-app文件夹中config下的index.js的build配置项。
  
• vue-app文件夹中的index.html页面加入cordova.js
  

3.打包

在vue-app项目文件夹下：

npm run build

在cordova项目文件夹下：

cordova build android

此时构建的APP就如下所示了。

到这里基本的cordova-app框架结构就搭建好了，然后就可以专注于vue项目的开发了。另外，# vue-cordova这个插件可以结合vue进行开发，实现安卓的文件存储，地理定位，照相等功能，完成js控制手机硬件的功能。