好嘞，今儿得空，给大家念叨念叨我折腾Cordova开发工具的事儿。这玩意儿以前就听过，可真没正儿八经用过。这不是最近想把手头一个破Web页面套个壳儿，让它能在手机上装个App的样子嘛这才想起来它。

打哪儿开始？官网呗！

第一步肯定是找官网，这没啥说的。上去一看，嚯，老长一串介绍。耐着性子读了下，知道它是个啥了。简单说，就是用HTML、CSS、JavaScript这些做网页的玩意儿，就能弄出手机App来！还能横跨一堆平台，什么安卓、iOS，全都在射程范围内，听着挺美。

这玩意儿咋实现的？它里面有个叫WebView的东西。这么说，它就像是在你App里头直接开了一个小窗户，专门用来显示你做好的网页内容。你这App的壳儿，就包着这个小窗户。

手痒想试试？装环境呗！

光看可不行，得动手。官网上写的清清楚楚，你得有，这玩意儿是运行的基础。我看了眼自己电脑，还行，装的版本够新，这步省了。

然后开命令行，直接开干！照着说明，一句命令敲下去：

• npm install -g cordova

就等着它哗下载，一会儿功夫，装完了。命令行里敲个`cordova -v`，版本号出来了，证明装成了！

搞个项目玩玩

环境齐了，那就弄个新项目看看。再敲命令：

• cordova create MyTestApp * MyTestApp

这命令啥意思？就是让Cordova给我生成了一个叫"MyTestApp"的空壳项目，包名就叫"*"。回车下去，它吭哧吭哧一通建文件夹、拷模板文件，一会儿工夫，项目目录就建好了。

看看项目结构长啥样

好奇心驱使，赶紧进项目文件夹瞧瞧。里面主要分两大块：

• www 文件夹：这不就是老朋友嘛里面放的就是所有网页的文件，HTML、CSS、JS、图片，都搁这儿了。这地方我熟，开发主要就是改这块的东西。
• platforms 文件夹：这个刚开始是空的。等你要打哪个平台的包（比如安卓），你让它加个平台，它就会在这生成对应的代码。
• plugins 文件夹：插件的地盘。要那些原生的功能（比如调个摄像头、用个GPS），就得靠装插件。

看明白了，我的活儿主要在`www`里。

加点料：平台

现在这项目还是个光杆司令，我得告诉它要生成啥平台的App。比如我想先在安卓上跑跑看。

切回命令行，进项目目录，敲：

• cordova platform add android

等它跑完，再去看`platforms`文件夹，多了个`android`文件夹！点进去一看，里面就是安卓那一套项目结构，什么`res`、`src`都有，但这玩意儿我不太熟，感觉也先不用管它。

再搞点高级功能：插件

光能显示网页多没劲，得能调用手机真本事才行。比如，我想让它能联网检查状态。这不就得用到原生的网络能力嘛

Cordova靠插件实现这些。去哪找？它有个公共插件库。直接敲命令：

• cordova plugin add cordova-plugin-network-information

嗖的一下，这网络信息插件就装到项目里了，装好的插件全在`plugins`文件夹猫着。怎么用？回头在我自己的JS代码里就能调用了，像是`*`这样的东西。

动手改改网页

架子搭好了，得看看效果。打开`www`里面的`*`，这项目首页就它了。

我手贱，删掉了自带的啰嗦代码，自己简单捣鼓了个：

<h1>Cordova 试试水</h1>
<p>状态: <span id="networkStatus">未知</span></p>

然后改对应的JS文件（`*`），让它用刚装的网络插件查状态：

*('deviceready', onDeviceReady, false);
function onDeviceReady() {
// 这里可以调用插件能力！
var networkState = *;
var statusDisplay = *('networkStatus');
* = '网络类型: ' + networkState;