引言

时下流行的移动Web应用可分为三种:原生应用、Web应用和混合型应用。

  • 原生应用:通过各种应用市场安装,采用平台特定语言开发。
  • Web应用:通过浏览器访问,采用Web技术开发。
  • 混合型应用:通过各种应用市场安装,但采用Web技术开发。它虽然看上去是一个原生应用,但里面访问的实际上是一个Web应用。

本文所讲的Cordova,Cordova正是混合型框架中的佼佼者,它基于标准的Web技术——HTML、JavaScript和CSS,用JavaScript包装平台的API供开发者调用,具备强大的编译工具来为不同平台生成应用,同时拥有丰富的第三方资源和产业链。

个人还有一些观点是,只能包装纯HTML/CSS/JS,动态网站jsp,asp,php等是打包不了的,但是,因为前端兴起的SPA单页面应用,配合服务端也能起到动态网站的作用,所有这并不影响它的影响范围。

另一方面Cordova等和React native、Week、Flutter又不太一样,后者已经比较接近原生app了,甚至近来Flutter的热度是愈来愈大。

安装

Cordova安装时是要借助npm平台,故需先安装node,若你之前没有安装,可以到node官网根据自己电脑下载安装node.js

已经安装了node后,在控制台用命令全句安装Cordova

1
npm install -g cordova

如果要安装并配置相关平台的环境变量,若要打包Android APP,则需要安装jdk和安装sdk,和配置相关环境变量,下面会提到。

基本打包操作

注:本文主要通过打包Android应用,来讲解。

1.创建一个cordova项目

如创建一个名为cordovaApp的工程(以下操作代码均为控制台输入命令):

1
cordova create cordovaApp

有些也可以通过下面命令安装也是一样的

1
cordova create cordovaApp com.cordovaApp.app cordovaApp

说明:

  • 第一个cordovaApp 表示文件夹的名称
  • 第二个com.cordovaApp .app 表示项目id
  • 第三个cordovaApp 表示项目名称

进入项目目录

1
cd cordovaApp

项目文件目录:

注:www文件夹下的HTML/CSS/JS文件即为本项目Web应用,你可以在其基础上开发,也可以将自己已经写好的web应用(单页面应用打包好的文件也可以)替换默认的。

2.添加安卓平台

1
cordova platform add android --save

3.创建Android应用

1
cordova build android

4.打包成品查看

手机连接在电脑上,运行该 Android 程序 :

1
cordova run android

或者将 项目\platforms\android\app\build\outputs\apk\debug下的apk包,安装到手机上即可

看,一共才几步,就能让一个网页应用,打包出成一个手机上应用的Android APP,甚至是ios APP, windows 应用等。是不是很实用很简单?

当然没那么简单,运行命令是不是一大堆错误?有错误就不错啦,人家一大堆英文还不知道出了什么问题呢,如果上面几步都没有出错且最后能得到可用的安装包,那恭喜你,你要么很幸运,要么就是有其平台的开发经历。

总结一下常见的几个问题:

解决问题

在第二步添加安卓平台之后,第三步之前,可以先通过下面的命令查看当前电脑的Android平台的配置是否有问题:

1
cordova requirements

如果像像上面一样出现乱码,可以先执行chcp 437命令再执行cordova requirements

1
chcp 437

可以看出4个配置项:Java JDKAndroid SDKAndroid targetGradle

但其实没有在本机上配置好环境变量的话,会报对应项的错误,有android开发经历的会省不少事,博主在这之前也接触过Android的原生app开发,故并没有那么多问题。

配置环境变量

安装jdk

1.系统变量→新建 JAVA_HOME 变量 。

变量值填写jdk的安装目录(这里是 D:\Program Files\Android\jdk)要根据自己安装的

2.系统变量→新建 CLASSPATH变量

输入.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

3.系统变量→编辑PATH的变量

输入:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

安装sdk

1.用户变量→新建ANDROID_HOME变量

输入:变量值填写jdk的安装目录(本人是D:\sdk)

2.用户变量→编辑PATH的变量

输入:%ANDROID_HOME%\platform-tools

SDK配置安装及更新

如果环境变量都配置好了之后,再执行cordova requirements试试:出现乱码,可以先执行chcp 437命令再执行cordova requirements

有时候可能Android target配置项可能会出现问题,而且会很友好的告诉你是去怎么解决,博主现在一时找不到错误的图,就是告诉你通过android.bat解决,然后列出几项更新及安装问题(一般是3项)

这种情况就是去找到你SDK目录下的tool>android.bat文件,

你的可能跟我的不一样,是因为SDK版本问题,不必担心,能打开android.bat就行

双击点开,等待一会儿,会出现一个程序窗口

在这里根据之前的几项更新及安装问题去更新或安装相应项。

直到通过命令行cordova requirements能够得到成功的配置(无报错)

第三步打包也可能出问题

注:这里会出错的人可能很少

终于得到成功的配置(无报错)后

满心欢喜开始创建Android应用

1
cordova build android

看似没出什么问题,但 项目\platforms\android\app目录下根本找不到apk文件,

打包信息一大堆在控制台,我也找不到图,就这样想象吧,哈哈

你细心看一下打包信息就能会发现可能说一些sdk配置不是低于最低版本,这时候依然是根据上面的SDK配置安装及更新来更新sdk配置。

结语

问题不多不少,还有上面没总结到的。

如果有其他平台开发经历的话,用起来是非常方便的,而且很实用,能让你前端的web应用这么快的打包成一个手机应用,是前端开发者的一大庆事,毕竟Flutter学习成本那么大不是,无奈。

温馨提示:既然是要打包成手机应用,那你的web应用至少要做成移动窗口下也能排版正常才好哦。