移动端跨平台开发框架 Cordova 学习笔记(一) 环境搭建及创建第一个 Cordova Android APP

转载请注明本文出自 clevergump 的博客：http://blog.csdn.net/clevergump/article/details/54861886, 谢谢!

这个系列的文章, 介绍的是移动端著名的跨平台开发框架 Cordova. 跨平台, 顾名思义, 就是只需开发一套代码, 就可以在多个平台上运行. Cordova 针对的是移动端的跨平台, 所以我们只需借助于该框架提供的 API, 编写出一套代码, 就可以同时在 Android, iOS, WindowsPhone 等手机系统上运行.

本文要介绍的是 Cordova 开发环境的搭建, 以及创建并运行第一个 Cordova Android APP的步骤. 相关操作步骤参考官网的这篇文章: Create your first Cordova app. 下面分别来介绍这两部分内容.

一. Cordova 开发环境的搭建

1. 安装 node 和 npm
   注意: 在linux系统下, 不要使用 apt-get install 的方式安装. 而要像 Cordova 官网介绍的那样, 去nodejs官网 (https://nodejs.org/en/download/) 下载软件包, 解压后将 bin 目录添加到 PATH 中即可. 添加成功的标志是:
   执行 node -v 及 npm -v 都能显示出各自的版本号. 另外如果是 linux 系统, 则还可以执行 which node , which npm 指令, 看看查找出的路径是不是刚才添加到 PATH 中的路径, 如果是, 那么就进一步说明安装是没有问题的.

   ubuntu系统:
   
   例如: 如果我将下载的nodejs压缩包解压后放在 /home/abc/Softwares/nodejs 路径下, 那么将bin目录添加到环境变量PATH后, 执行 which node , which npm 指令查找出来的这两个指令的路径就应该是如下结果:
   

   windows系统:
   

2. 安装 git 客户端
   ubuntu 系统已经自带 git , windows 系统需要额外下载安装(下载地址: http://git-scm.com/downloads), 安装成功的标志是: 执行git指令会有输出结果, 或者查询 git --version 能显示当前已安装的 git 客户端的版本号:

   ubuntu系统:
   

   windows系统:
   

3. 使用 npm 安装cordova, 官网介绍的安装指令是:
   在 OSX 和 Linux系统下:

   sudo npm install -g cordova

   在windows系统下:

   npm install -g cordova

   但是这些指令都默认是从国外的官网下载相关安装包和依赖包, 由于墙的原因, 下载速度太慢, 可以将下载地址改为使用镜像地址, 例如: taobao的镜像地址. 具体修改方法, 可参考这篇文章 https://cnodejs.org/topic/4f9904f9407edba21468f31e, 找到 .npmrc 文件 (ubuntu系统中该文件位置是~/.npmrc, windows系统中该文件位置是: 系统盘:\Users\用户名.npmrc ), 在该文件中添加如下内容:

   registry = https://registry.npm.taobao.org

   此后再去执行官网介绍的上述指令, 即可从taobao的镜像地址中去下载相关的安装包和依赖包了.

   下载安装完成后, 会显示刚才下载的相关安装包和依赖包的版本信息树状图, 如下:
   ubuntu系统:
   

   windows系统:
   

   此后, 可以在命令行中输入 cordova, 看看cordova是否安装成功. 如果安装成功, 会显示该指令的用法介绍, 具体如下:
   ubuntu系统:
   

   windows系统:
   

---

二. 创建并运行第一个 Cordova Android APP

不论是Cordova工程的创建, 配置, 还是运行等操作, 都需要执行相关指令. 由于涉及到的指令较多, 我们无需死记硬背, 只需记住如下两个重要的指令即可:

cordova help   // 查看cordova支持的各项操作的核心指令名称及相关含义cordova help <command> // 查看cordova某个特定指令的详细用法

当我们需要执行某个操作时, 即使忘记该操作所对应的指令的具体内容, 甚至忘记指令的关键词, 也都没关系, 我们随时可以使用上述两个指令来现场查看具体的指令细节. 输入 cordova help, 会显示各个操作的相关指令简介及使用案例, 如下图:

下面我们就来演示一下, 如何使用 Cordova创建一个 Android 的 HelloWorld工程. 假设我们要在 hello 文件夹下创建一个名为 HelloWorld 的工程, 包名是 com.example.hello, 那么就可以执行如下指令:

cordova create hello com.example.hello HelloWorld

创建完成后, 工程目录结构如下:

查看当前系统支持安装的平台, 及当前已安装的平台, 输入指令:

 cordova platform ls

在 ubuntu系统中查询结果如下:

当前还未安装任何平台, 但当前系统支持安装的平台有7个, 如: android, ubuntu等, 注意: 不支持安装 iOS, windows, wp8 (WindowsPhone) 等系统.

在 windows 系统中查询结果如下:

当前也是还未安装任何平台, 但当前系统支持安装的平台有8个, 如: android, windows, wp8等, 注意: 不支持安装 iOS, ubuntu 等系统.

可以看到, ubuntu 和 windows 系统都支持 Android 平台, 并且我也对 Android APP开发较为熟悉, 所以下面就以 Android 平台为例来进行讲解.

首先, 需要添加 Android 平台, 指令是:

cordova platform add android --save

如果在该系统中先前没有安装最新版的 gradle插件, 那么将会下载该最新版的插件. 安装界面如下:
ubuntu系统中:

windows系统:
由于该系统下的相关依赖包先前都已安装好了, 所以这里就不会再下载这些包了.

当Android平台添加完成后, 在目录 hello/platforms下会多出一个android文件夹, 该文件夹内就是用于创建Android 工程的相关文件结构. 此时, 整个工程的文件结构如下:

由于构建Android工程, 需要满足许多条件, 例如: Android SDK, JDK及相关依赖包等都有特定的要求. 所以我们可以查询Cordova工程对于构建Android工程的相关要求, 查询指令是:

cordova requirements android

当然, 如果我们已经添加了 Android平台, 那么可以省略上述指令中的 android 字样, 变为如下指令:

cordova requirements

那么, 这将查询的是所有已安装的各个平台的要求.

其实, 还是像我先前说过的那样, 上述指令无需死记硬背, 我们只需记住先前介绍的那两个帮助指令即可, 这里我们可以通过帮助指令来查看 requirements 指令的用法, 如下图:

这里, 我们分别在 ubuntu 和 windows系统下, 查看我们当前在这两个系统内各自分别已安装的各平台的具体要求 (这里都只有 Android平台).

ubuntu系统:

windows系统:

从上述两张图中可知, 在这两个系统中, 我们都已安装了Android开发所需的其他软件, 这样我们就可以进行代码开发了. 但其实, 我们在前边创建完工程后, 系统实际上已经为我们默认创建了一个可以直接运行的工程. 我们只需编译运行即可. 可能有些朋友不太相信, 那么就让我们一起来试着对该工程直接进行编译运行吧.

执行如下指令进行编译:

cordova build  或 cordova build android

执行了该指令后, 可能会下载一些依赖包. 如下图所示:

下载完相关依赖包后, 会进行构建, 构建完成后会提示 BUILD SUCCESSFUL , 显示总共用时以及构建后产生的apk文件的路径.

ubuntu系统下:

windows系统下:

构建完成后, 会生成一个使用系统默认签名的apk文件. 我们既可以直接使用 adb install 指令来安装该apk, 也可以使用Cordova指令来安装, Cordova 安装运行apk的指令为:

cordova run android

最后, 运行出来的效果如下:

系统这个默认的 APP是如何创建的呢? 下面我们就来解释一下Cordova构建APP的原理吧. 其实我们在先前使用 cordova create 指令创建工程后, 我们提到, 系统会默认帮我们创建如下的目录结构:

你是否留意到上述目录结构中有个 www 文件夹呢? 并且该文件夹内还有 html, css, js文件. 看到这里, 你是否想到了 web网页? 另外, 如果你曾经使用过 lamp 或 wamp 等 PHP Web开发框架, 那么当你看到 www 文件夹时, 你一定会立刻想到 apache 中也有个名叫 www 的文件夹用来存放Web前端文件. 想到这里, 估计你已经猜到了, 该工程在手机上显示的其实是一个网页. 没错, Cordova Android APP 就是利用 Android 系统内置的浏览器控件 WebView 来加载 www 文件夹内的网页的. 虽然 Android 系统本身就有 WebView 控件, 但是对于不熟悉 Android native APP 的开发人员来说, 要想使用 Android 系统自带的 WebView 控件, 毕竟会有一定的入门门槛. 所以为了能让这部分开发人员在不学习任何 Android 特定知识的情况下, 也能自如地开发 Android APP, Cordova 在创建工程时, 已经默认设置了 WebView 的相关参数, 这样开发人员只需写好前端页面, 就可以让页面顺利地在手机上展示出来了, 而无需关心任何与 Android 相关的设置.

那么, 我们能否将系统默认的网页替换为我们自己的呢? 答案是可以的. 我们只需修改 www 文件夹下的相关前端页面的代码, 只要保证代码能在PC端浏览器运行ok, 那么就基本能够保证该网页在手机上也能运行ok. 当然要注意手机屏幕的尺寸是小于电脑屏幕尺寸的, 所以在设置宽高时要留意这一点即可.

下面我们就来修改一下代码吧. 我们来实现一下《JavaScript DOM编程艺术》这本书中介绍的图片库的例子吧, 首先展示一下这个图片库的例子最终要实现的网页效果, 如下图所示:

下面解释一下该效果. 首先页面上会显示上下排列的三个链接, 链接下方有一个默认的黄色背景的图片(图片内容为JS字样)和一行文字描述. 当点击某个链接后, 下方的图片就会切换为该链接所对应书的封面图片, 同时图片下方也会显示这本书的名称. 当然, 如果页面不支持JS, 那么当点击链接后, 会直接在网页中打开该链接对应的图片.

为实现该效果, 我们需要向 img 文件夹内添加四张图片. 分别是黄色背景 JS 字样的占位符图片, 以及上图中这三本书的封面图片. 添加后整个hello文件夹的目录结构如下:

然后再分别修改 index.html , css/index.css, js/index.js 文件即可. 具体代码如下:

index.html:

<!DOCTYPE html><html>    <head>        <!--        Customize this policy to fit your own app's needs. For more guidance, see:            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy        Some notes:            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:                * Enable inline JS: add 'unsafe-inline' to default-src        -->        <meta charset="UTF-8"/>        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">        <meta name="format-detection" content="telephone=no">        <meta name="msapplication-tap-highlight" content="no">        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">        <link rel="stylesheet" type="text/css" href="css/index.css">        <title>Hello World</title>    </head>    <body>        <div id="content">            <ul id="imgGallery">                <li class="inlineFrame"><a href="img/JavaScript DOM编程艺术.png" >JavaScript DOM编程艺术</a></li>                <li class="inlineFrame"><a href="img/JavaScript高级程序设计.png">JavaScript高级程序设计</a></li>                <li class="inlineFrame"><a href="img/JavaScript权威指南.png">JavaScript权威指南</a></li>            </ul>            <p class="inlineFrame">                <img id="img" src="img/js.png" alt="JavaScript经典书籍的图片"/>                <p id="imgDesc">JavaScript经典书籍的名称</p>            </p>        </div>        <script src="js/index.js"></script>    </body></html>

css/index.css:

* {    margin: 0;    padding: 0;}ol, ul{    list-style: none;}li{    margin: 5px 0;}#content{    max-width: 400px;  /* 因为手机屏幕较窄, 所以要注意宽度的数值不能太大 */    margin: 0 auto;    text-align: center;}#inlineFrame{    display: inline;}p img{    margin-top: 20px;}

js/index.js:

window.onload = addLoadListener(prepareGallery());function addLoadListener(func) {    var oldOnload = window.onload;    if (typeof oldOnload == "function") {        window.onload = function () {            oldOnload();            func();        }    } else {        window.onload = func;    }}function prepareGallery() {    if (!document.getElementById) {        return false;    }    if (!document.getElementsByTagName) {        return false;    }    if (!document.getElementById("imgGallery")) {        return false;    }    var linkElems = document.getElementById("imgGallery").getElementsByTagName("a");    for (var i = 0; i < linkElems.length; i++) {        var linkElem = linkElems[i];        linkElem.onclick = function () {            return !showPic(this);        }    }}function showPic(linkElem) {    // 图片是必须存在的, 若不存在就无法继续后续操作, 会影响返回值的结果, 所以使用否定式的判断句.    if (!document.getElementById("img")) {        return false;    }    var imgSrc = linkElem.getAttribute("href");    var imgElem = document.getElementById("img");    if (imgElem.nodeName != "IMG") {        return false;    }    imgElem.setAttribute("src", imgSrc);    // 图片的文字描述是可选的, 若不存在就忽略掉, 不会影响返回值的结果, 所以使用肯定式的判断句.    if (document.getElementById("imgDesc")) {        var imgTitle = linkElem.firstChild.nodeType == 3 ? linkElem.firstChild.nodeValue : "";        var imgDescElem = document.getElementById("imgDesc");        if (imgDescElem.firstChild.nodeType == 3) {            imgDescElem.firstChild.nodeValue = imgTitle;        }    }    return true;}

如果对上述代码有疑问, 请参阅《JavaScript DOM编程艺术》这本书的详细讲解. 下面我们直接在手机上运行该工程, 看看在手机上的效果吧:

好了, 我们的修改大功告成.

---

三. 参考资料

• Cordova官网文章: Create your first Cordova app
• 《JavaScript DOM编程艺术》