cordova实现H5套壳应用

cordova是apache孵化的一个项目,目标是实现一套Html+CSS+Js代码同时运行在多个移动平台,比如:安卓,苹果。

我们知道现在H5发展很不错,reactjs、vuejs等SPA单页应用框架非常强大,在较新的手机上表现非常不错,其效果和原生应用并无差别,但是它毕竟仍然只能运行在浏览器中。

Hybird APP就是让H5运行在应用中的技术,它基于Natvie代码和webview做壳,为Html代码提供执行环境,这已经是很普遍的现象了,cordova就是这样一个Hybird APP框架。

我们知道,单纯的把H5代码放到webview里执行是不够的,因为H5代码没法访问设备API,比如:调起摄像头,打开电话簿等。然而通过Native代码做壳,就可以把设备API通过JS封装提供给H5代码使用,从而让H5发挥更贴近Native的功能体验,很让人激动。Cordova通过可扩展的插件机制,允许开发者利用安卓/苹果原生代码封装JS方法,从而提供各式各样的H5高级功能,并且已经有很多成熟的插件可以使用。

废话不多说,我在安装时参考了这篇博客,目标是把H5代码打包到原生安卓应用中去(途中遇到了几个意外,注意下面我给的提示)

安装git bash

是git的命令行客户端,同时这个bash是MINGW64实现的,简单的说就是提供了linux命令和用法的windows命令行,比windows自带的cmd命令行舒服多了,后面的操作我都在这个git bash里执行。

安装JDK

一定要去JAVA官方下载,一定要选择64位版本,否则你后面会遇到Jvm heap不足的报错。

安装android studio

上面的参考博客用的ADT已经过时了。

android studio是最新的开发安卓的IDE,这里主要是用它来方便的安装Android SDK以及管理Android AVD(安卓虚拟设备模拟器),前者是cordova打包APP时要用,后者是开发时模拟运行APP要用。

去官网下载安装即可,启动后会弹窗提示你找不到安卓SDK,你点Cancel就可以进入安装Android SDK的流程了,走完流程即可完成SDK安装。

接下来,你直接创建一个新的安卓项目,在菜单栏中选择tools->Android->AVD Manager,就可以按步骤创建出一个虚拟设备了。

至此安卓方面的环境依赖就准备完全了。

安装Nodejs

cordova是基于Nodejs实现的,去官方下载安装即可。

由于后面要用npm安装cordova,所以需要换成npm的国内镜像:https://npm.taobao.org/

方法就是在git bash里临时搞一个alias叫做cnpm,它其实是npm命令加了一些参数:

安装cordova

创建cordova项目

其实就是创建了一个Hello项目,会出现一个文件夹。具体参数说明可以自己学习官方文档或者网上资料,并不重要。

接下来cd hello进入项目目录,重点关注www目录,它就是我们放置H5代码的地方了。

添加android平台支持

需要指定Hello项目要编译到哪几个平台,我只需要生成安卓app,所以需要敲击如下命令:

可惜这里会报错,会提示你缺少npm包依赖。处理方法就是,提示缺少哪个包,你就通过:

安装它即可,然后重新执行add android命令,直到成功为止。

添加gradle环境变量

cordova编译安卓app的时候用的是gradle这个打包管理工具,安装android studio的时候会默认安装,但是命令行是找不到这个gradle程序的,在windows里将其需要添加PATH环境变量(我的电脑-属性-环境变量),比如我这样:

gradle随着android studio安装,你可以仿照添加到PATH中去。记得,添加环境变量后需要重启git bash才能生效,不要像我一样研究半天。

编译项目

一切就绪,默认cordova create创建的项目会在www目录下放一个html代码的demo,因此我们只需要直接编译整个项目即可。

编译过程gradle会下载一些依赖包,最后会生成安卓的apk,可以看命令行提示找到。

真机运行

把安卓手机USB连到电脑,确保驱动正确安装,允许USB调试模式。

先通过这条命令,会显示出连在电脑上的安卓设备ID:

如果发生端口占用的报错,说明你可能正在使用360手机助手或者android studio,把它们关闭后执行可以看到这样的展示:

可以发现有一个安卓真机,还有一个安卓模拟器。

这样指定将apk安装到真机:

看一下手机,桌面上多了一个hello应用,它承载了Html代码。

模拟器运行

上面模拟器已经配置过了,因此只需要输入命令即可:

PS:我在之前配置AVD的时候提示我的BIOS要开启VT-x才能启动模拟器,你可能也会遇到。

关于cordova

一定要阅读官方文档,非常简短。

另外,一定要关注这一个章节,它介绍了cordova的重要问题。

插件

这篇博客介绍了很多cordova插件,可以作为一个参考。

最后

既然是app,那么就无法实现服务端html渲染,因此为了更好的体验你应该使用SPA单页应用框架来开发,原因还是参考”关于cordova”的外链。

当然,cordova是支持多页的,但是cordova的驱动机制和多页应用的垃圾体验,你几乎只能选择单页应用。

看样,我又该回头啃一下react,尽快升级到webpack2,重回单页的怀抱了。

如果文章帮助您解决了工作难题,您可以帮我点击屏幕上的任意广告,或者赞助少量费用来支持我的持续创作,谢谢~