H5程序员如何利用cordova开发跨平台应用

什么是Cordova?

Cordova以前也叫PhoneGap,它提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码,简而言之，cordova就是连接H5和原生系统的桥。通过cordova就可以在H5页面上开发出类似原生APP的应用，而且还是跨平台的。

在windows上如何搭环境搭

1. 首先安装node.js.

不要被这个nodejs吓住了，其实只不过是用它来安装cordova而已。下载对应平台的版本，一路下一步就完成了安装。

装完之后在命令行窗口输入下面的命令验证一下，如果能看到图示字样则表示安装成功：

node -v  

npm -v

　　

2.  下面开始安装cordova

按照官方的安装方式：npm install -g cordova 可以安装成功，不过可能有点慢。我这里推荐淘宝npm镜像加速,在命令行下输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

稍等片刻就可以安装完npm镜像，然后用cnpm -v 能查看到版本号，是表示安装成功

接下来在命令行中输入cnpm install cordova -g,耐心等待...

出现这个提示，说明cordova已经安装好了。接下来创建一个android的app来试试。

为了开发一个能在android上运行的app，需要做一堆的小工作，需要有点耐心。其间可能因为网络被墙的原因，会下载失败，不过网上都有对应的解决方法。下面开始搭建这些附属的环境。

3. 安装jdk

先点击Accept License Agreement 然后下载所需的版本。安装很简单，如果安装默认方式安装，则只需要一路点下一步就好了。

然后添加环境变量：我的电脑-->右键属性 --> 系统高级设置-->高级-->环境变量-->如图所示：

接着在Path中添加如下代码,点击这里进行详情介绍.

 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

最后安装adt-bundle-windows ，它里边集成了sdk和eclipse，省了不少事。考虑到被墙，我这里就直接贴别人的处理方法。详情点击

解压出来，复制sdk的路径，加入环境变量。具体的操作和前面类似，我就不重复了，详情点击.

双击sdk manager.exe 开始更新，由于被墙的原因，很可能更新失败，（可恶的GFW,fk....）. 这里贴上网友的解决方案,详情点击

需要钩选sdk-tools,platform-tools,build-tools,如果要模拟器，还要钩一个Android api ,如果搞不懂哪些是必需的，就多钩几个。比较慢，下载下来有几十个G。

网上还有说要安装Ant , 也有说cordova 6.0以后，都换了build工具了，不知道是真是假，反正我都装了。这里要注意，Ant1.9.x之后的zip包，并不像网上的贴子说的那样，复制bin目录到环境变量，而是要先在命令行下输入build.bat，进行构建，最后会生成build和dist目录，这个dist目录，及下面的lib,bin才是真正要加到环境变量中的内容。我晒一下win10上的效果图：

好了，现在我们可以开始进入最有创造性的内容了。打开命令行，开始我的第一个HelloWorld

cordova create hello com.example.hello HelloWorld

cd hello

cordova platform add android

如果提示build SUCCESS那么恭喜,编译成功！！

如果出现下面的画面，则表示有sdk或依赖的包没有安装

我就多次被卡在这个"Failed to install cordova-plugin-whitelist' 百度一圈无果，果断google, *, 如果没有添加任何cordova插件就报这个错误，肯定是少打了钩，再去钩一圈加来，一般就可以顺利通过了。

提示我Android SDK platform 24那么我就把24的都钩上，这样总行了吧。有点慢，不过好在没有报错了。

接上手机（也可以在sdk manager中添加虚拟机）看看运行效果。手机需要在开发模式中钩选允许调式，然后手机上允许这台计算机连接。然后就输下面的命令：

cordova run 

如果不出意外，你的手机上就会生成一个叫hello的应用，启动之后就是一个cordova的logo. 接下来就是常规的h5开发，如果有用过eclipse的话，可以通过它进行调试，我先做一个简单的，直接用sublimeText进行编写。找到hello目录里边的www，那里是整个h5的根目录，每次运行cordova build 或 run都会用到这里边的文件。

如果要访问原生系统提供的功能，需要用到cordova的插件，比如调用系统对话框来代替alert弹窗，就需要先安装cordova的Dialog插件，比起前面的操作，这个简单，通常不会遇到问题。这里有官方例子. 写的有点罗嗦，简单一句话就是: cordova plugin add 插件名 或git地址

完了之后，就可以在js中使用了，具体的使用方法参考插件官方的说明。

前面说安装插件可能不会有问题，但是当你重新cordova build的时候，可能就会报错了,比如：

You have not accepted the license agreements of the following SDK components:
[Android Support Repository].
Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Manager.
Alternatively, to learn how to transfer the license agreements from one workstation to another, go to http://d.android.com/r/studio-ui/export-licenses.

　　说什么鬼协义没有接受，搞半天也没有弄懂，反正我安装sdk的都是点了aceept的，不点也不让安装啊，真是不明白。留着以后慢慢研究，如果有这方面的解决方法，请告诉我一下，谢谢。【PS：终于找到这个问题的解决方法。其实错误提示中写的很清楚，第一行就写了SDK Manager中钩选缺失的扩展组件就好。是我那天过于急燥，没有看清】还有一个问题没有很好的解决，在js中的对象用console.log在eclipse中看不到，只有一个[object object].目前没有很好的办法，想到可能的方法就是把对象转成json字符串或遍厉出来再打印。或用npm -g install weinre这样的远程调式工具（现在有点过时了）；更好的方式是使用google浏览器自带的工具，详情请点击 需要自备*哦

导入Eclipse

在命令行下启动完app之后，没有任何输出提示，这显然不方便调试。所以需要将项目导入进eclipse进行调式，导入方法很简单，没有太多讲究，右键选择导入--> android 已存在的项目就好了

总结

　　通过不断的折腾，总算是在手机上运行成功了。最大困难可能是前面的环境搭建，一方面是网络被墙，一方面是需要对android/ios这方面的配置有一定知识储备。遇到困难不要慌，不断的搜索，去官方看看文档，错误提示。一个问题一个问题的解决，完成的时候，就会收获一份成功的喜悦。

资源列表

中文参考