Cordova+Vue实现Android APP开发

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

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

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

开发环境及工具

操作系统：Windows 10 Pro,1709
node.js：v8.11.2 （https://nodejs.org/dist/latest-v8.x/）
Java环境：

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

Path=%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin
安卓环境：

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 文件，根据需要安装包
工具

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控制手机硬件的功能。

Cordova+Vue实现Android APP开发相关推荐

Cordova+Vue实现Android APP开发（二）-- 打包运行在真机上和打包运行在本地调试，以及打包时候一些问题的处理
接上一篇文章:Cordova+Vue实现Android APP开发(一) 一.使用cordova打包运行app 打包静态资源,没有问题的,但是把自己的vue其他项目转成android app时候,发现 ...
android app开发混合开发,混合开发入门 Vue结合Android/iOS开发仿京东项目App
download:混合开发入门 Vue结合Android/iOS开发仿京东项目App 无需原生开发基础,也能完美呈现京东商城.本课程融合vue.Android.IOS等目前流行的前端和移动端技术,混合 ...
5G 时代的 Android App 开发入门与项目实战
随着移动互联网的持续发展,Android系统从智能手机逐步拓展到平板电脑.智能电视.车载大屏.智能家居.智能手表等诸多设备,Android开发依然是前景可期的IT岗位. 当然,整个社会正在迈向5G时代 ...
Android app开发捷径，让你少去踩坑
Android APP开发完成后,通常需要在哪些机型上进行测试? 开发Android APP时,需要考虑的分辨率有哪些? 目前华为.三星和小米市场占有率是遥遥领先的,华为各机型.三星Note2.Not ...
Android APP开发
Android APP开发 Android 是基于Linux平台的.开源的.智能手机操作系统.Android APP开发现在使用比较广泛的程序语言是Java,Java是安卓APP开发的基础,我们在上学 ...
Android APP开发需求文档范本
Android APP开发需求文档范本软件需求文档格式的标准写法 1．引言 1．1 编写目的 • 阐明开发本软件的目的: 1．2 项目背景 • 标识待开发软件产品的名称.代码: • 列出本项目的任 ...
html5 plus与vue,基于Html5 Plus + Vue + Mui 移动App 开发（二）
基于Html5 Plus + Vue + Mui 移动App 开发(二) 界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1.下拉刷新.上拉获取更多功能 ...
android开发入门与实践_我的新书《Android App开发入门与实战》已经出版
前言工作之余喜欢在CSDN平台上写一些技术文章,算下时间也有两三年了.写文章的目的一方面是自己对技术的总结,另一方面也是将平时遇到的问题和解决方案与大家分享,还有就是在这个平台上能和大家共同交流. ...
一眼就看懂；Android App 开发前景介绍及学习路线规划
Android App 开发的发展趋势和前景安卓 App 开发是大趋势从目前的各大社交终端以及移动媒体中手机占了百分之75.5的比例,随着各种移动端的系统升级,手机 App 也在现今这个社会面临着 ...
android app开发_如何雇用Android App开发人员
android app开发 You have thought of a good project for an application in android and you have a gut fe ...

Cordova+Vue实现Android APP开发

开发环境及工具

教程

Cordova+Vue实现Android APP开发相关推荐

最新文章

热门文章