Cordova开发技巧

最新推荐文章于 2024-08-14 15:45:18 发布

weixin_33769207

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量157

点赞数

文章标签： javascript 移动开发 git ViewUI

原文链接：https://segmentfault.com/a/1190000002933971

版权

本文承接上篇《Cordova应用解析》。

Crodova支持的每个移动平台都有一些处理方法和工具用来测试和调试Cordova应用。一般可以用模拟器和物理设备加载Cordova应用，还可以用桌面浏览器测试。然而一些处理方法和功能适用于所有支持的移动平台，先看一些开发者应该注意的事项，然后再说明一些开发处理方法和工具用来测试和调试Cordova应用。

Cordova开发注意事项

同一框架下不同的开发者写的项目总会存在一些不一致，并且Cordova支持的平台之间都有不同的处理方式，要做到应用开发的整洁和无缝是很困难的。大部分问题在框架版本更新过程中解决了，现在还有两个问题。

处理API的不一致

可以在http://phonegap.com/about/feature页面看到一张功能支持列表。如果要用到的功能在某个平台上不被API支持，就需要针对这个平台完善这个功能。

真实的支持情况还是以API文档为准

如果某API不能被开发时用到的所有平台支持，可以使用上一节说到的device.platform和device.version确定应用跑在哪些平台或系统上，并在不支持这个API的平台上禁用这个功能。另一种处理方法是在调用某个API时使用JavaScript的try/catch语句直接处理这种失败的情况。

应用中的图形

不同平台、同一平台不同的版本对于图标和闪屏的要求通常是不一样的。开发者在构建不同平台的Cordova应用时一定要准备一套适用于不同平台要求的图形。PhoneGap维护了一个不同操作系统上的图标要求的列表： https://github.com/phonegap/phonegap/wiki/App-Icon-Sizes。

另外一些平台的设备上，设备会向系统使用某种主题帮助自已在市场上容易区分。这些设备上的图标需要修改以适合不同的主题。在Cordova应用中可以自定义构建方法把这些不同的平台的相应的合适的图形文件整合到要构建的平台中去。

开发Cordova应用

再总结一下创建Cordova应用的过程。

单个移动设备平台

开发者可能只需要在单个平台上开发。只要打开命令行界面，使用如下命令：

cordova create app_name
cd app_name
cordova platform add platform_name
cordova prepare platform_name

app_name指应用名，platform_name指平台。如果要创建一个Android应用，名叫lunch_menu，可以这么写：

cordova create lunch_menu
cd lunch_menu
cordova platform add android
cordova prepare android

也可以指定更多应用信息：

cordova create lunch_menu com.cordovaprogramming.lunchmenu "Lunch Menu"
……

这样创建了一个项目，web内容位于根目录的www的文件夹中。而在Android平台文件夹中有web内容的副本，用来生成Android应用。

如果想添加一个平台，需要手动复制现有项目的www文件夹中的web内容。

多个移动设备平台

Cordova是一个跨平台移动开发框架，例如在android和iOS平台上创建项目可以使用如下命令：

cordova create lunch_menu
cd lunch_menu
cordova platform android ios

这样项目文件夹中的platforms文件夹中产生两个平台的文件夹，而根目录下的www文件夹也由两个平台共享。每次测试或调试web内容时，要由CLI把web内容复制到platforms对应的子文件夹中。这样在开发时，使用IDE进行开发工作，使用CLI管理移动设备平台，使用命令行工具进入项目文件夹根目录便于使用命令。再使用Android IDE或测试使用，使用如下命令：

cordova prepare android

或在Android和iOS中测试和调试，使用cordova prepare android ios。prepare命令把www文件夹中所有文件复制到平台文件夹的合适位置中，这里指Android的assets/www文件夹和ios的www文件夹。config.xml文件夹内容覆盖平台相关的config.xml文件。文件夹结构如下图：

![文件夹结构](img/10.png)

移动web项目中总有些图标、图形、css和js文件在各平台中有所不同。老的版本中需要手动管理。稍后的版本中由CLI管理，即把各平台的资源各自放在merges文件夹中，在使用prepare命令时，CLI把这些内容复制到各自平台项目文件夹中。而在最近的版本中去掉了merges文件夹，而使用一种功能更为强大、扩展性更强的hooks的机制，如果对此感兴趣请参考Cordova文档。

测试Cordova应用

准备好Cordova项目后就可以测试了，可以用移动平台IDE(如Anroid的Eclipse)导入Cordova项目用平台调试工具，也可以直接使用命令行测试。

在模拟器上运行

移动平台一般都自带模拟器，外观和行为与真机相似。使用前面讲过的命令执行在模拟器上的运行：

cordova emulate device_platform

和前边讲过的一样，CLI要准备文件，使用平台命令行工具构建应用，加载合适的模拟器并运行应用。

在物理设备运行

最终的测试最好还是在物理设备上运行。用USB线连接设备并执行如下命令：

cordova run device_platfrom

前边也讲过run会执行prepare命令，使用平台命令行工具构建应用，并部署到设备上。

有些设备必须在第一次使用时注册或签名。

使用Cordova调试功能

如果不用IDE也有一些方法在遇到问题时进行调试。

使用Alert()

最简单的调试Cordova应用的方法是使用alert()，可以让你知道运行在哪或显示变量内容。它比较适合某些类型的调试任务，例如你知道有事件没有触发或一些变理读写不正确可以用alert()。

下面是一段有错误的示例示码，来自上一篇的HellowWorld3.html。它在执行时没有触发deviceready事件，我们在onBodyLoad()和onDeviceReady函数上使用alert()，在确认应用工作正常后再去掉。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=uft-8">
        <meta name="viewport" content="user-scalable=no,initial-scale=1,maxmium-scale=1,minimum-scale=1,width=device-width;" />
        <script type="text/javascript" charset="utf-8" src="Cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
            function onBodyLoad() {
                alert('onBodyLoad!");
                document.addEventListener("deviceready", onDeviceReady, false);
            }
            function onDeviceReady() {
                alert("onDeviceReady!");
                br = "<br />";
                var element = document.getElementById("appInfo");
                element.innerHTML = 'Cordova Version: ' + device.cordova + br + 'Platform: ' + device.platform + br + 'Model: ' + device.model + br + 'OS Version: ' + device.version;
            }
        </script>
    </head>
    <body onload="onBodyLoad()">
        <h1>HelloWorld3</h1>
        <p>This is a Cordova application that makes calls to the Cordova APIs.</p>
        <p id="appInfo">Waiting for Cordova Initialization to complete</p>
    </body>
</html>

这样把alert写在每个函数的前面，开发者知道何时应该触发事件，使用alert就知道触发时发生了什么事。

我们并没有用Cordova的API navigator.notification.alert()函数，因为在执行onBodyLoad()函数时cordova.js还没有加载，因此不能确定是否可用。

写Console

在调试的代码中写alert会有问题，就是会不断的打断程序流。例如在分析实时或应用执行后的情况，或者已经执行完的应用中的进程，这都不能打断程序的执行。但Cordova应用可以通过JavaScript基于WebKit浏览器渲染引擎的console对象实现这种工作。

使用console对象开发者可以向浏览器控制台写信息，这些信息可以通过原生的SDK或设备模拟器的功能在程序外部查看。console对象是窗口级别的对象，是一个可以由应用中的js代码访问的全局对象。Webkit支持几种语句，最常用是这几句：

console.log("message");
console.warn("message");
console.error("message");

3.0版本以后console从Cordova核心API中删除，换成插件的形式使用。可以使用前面说的添加插件命令添加：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

用下面的代码举例说明console的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta http-equiv="Content-type" content="text/html">
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        function onDeviceReady() {
            console.warn("This is a warning message");
            console.log("This is a log message");
            console.error("And this is an error message");
        }
    </script>
</head>
<body onload="onBodyLoad()">
    <h1>Debug Example</h1>
    <p>Look at the console to see the message the application has outputed</p>
</body>
</html>

在Android平台会在elcipse的Logcat中显示log、warning和error信息，并用不同颜色和字体显示。

如果js代码遇到错误会没有任何提示，可以把代码用try/catch封装，还可以把错误信息写到控制台，如下面所示：

try {
    console.log("some message");
    ...
} catch (e) {
    console.error(e.message);
}

Android Logcat还会显示产生信息的行号方便查找应用哪里出了问题。

使用外部工具调试和测试

有许多活跃的开发者社区都提供附带的工具。像PhoneGap工具页面(http://phonegap.com/tool)就有附带工具的信息。以后会专门对Android平台工具作介绍。

用Weinre调试应用

Web Inspector Remote(Weinre)是一个由社区构建的远程网页调试器。现在是PhoneGap构建服务的一部分。可以从http://people.apache.org/~pmuellr/weinre/docs/latest下载文件和使用说明。

在Cordova开发时，可以在物理设备或设备模拟器上远程调试运行在Cordova容器中Web应用。Weinre包括了一个调试服务器、调试客户端和一个调试对象。调试服务器运行在Macintosh或Windows上，调试客户端运行在桌面浏览器上。

使用前对Weinre做些配置。首先安装服务器，它基于Node.js，可以使用下面命令安装：

npm install -g weinre

安装完成后在命令行中输入：weinre。服务器开始执行后，它在命令行窗口中显示如下说明：

2013-06-22T17:00:50.564Z weinre: starting server at http://localhost:8080

可以在http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html一些信息，详细说明了在服务器启动时传递的命令行选项参数。

服务器启动后，使用基于浏览器的客户端与服务器和Cordova应用交互。访问服务器打开weinre调试客户端，显示如下图：

![](img/11.png)

服务器和客户端者运行起来后就可以通过向页面的body部分添加如下脚本标签连接Cordova应用和调试服务器。

<script src="http://debug_server:8080/target/target-script-min.js"></script>

把debug_server替换成调试服务器的正确主机名或IP地址。这样就把应用加入到weinre调试对象并向Cordova应用提供需要上传到weinre服务器的信息的代码。注意在调试时使用物理设备不能使用localhost，而要使用主机名或IP地址，通常是使用wifi连接组成的局域网。

记的在应用发布到生产环境时去掉weinre脚本标签。如果不去掉可能因为没有调试服务器应用会被挂起。

加入标签后，在模拟器或设备上执行应用。在浏览器上的weinre调试客户端页面中点击第一个链接，截图如下：

![](img/12.png)

调试服务器提供了查看和操作页面元素和网页其他内容的方法。调试客户端页面顶部不同的按钮用于展示调试对象信息。截图如下图：

![](img/13.png)

这个工具的一个功能是选中某部分代码，weinre会把网页内容高亮显示出来。

使用调试客户端可以访问如下内容区域：

元素：HTML、CSS和JavaScript代码。
资源：应用使用的本地资源，如数据库、本地存储和session存储。
网络：使用XMLHTTPRequests(XHR)的请求的信息。
时间表：在测试对象应用产生的事件。
控制台：前边描述的使用console对象写到控制台的信息。

因为weinre功能是基于Google Chrome开发者工具，也可以在Google Code网站(http://code.google.com/chrome/devtools/docs/overview.html)查找到更多更详细的信息。

用Ripple仿真器测试应用

Ripple仿真器是用来帮助Cordova应用进行初始化测试的工具。它是基于浏览器的仿真器，可用于模仿几种不同的系统。

Ripple在浏览器容器中模仿Cordova API的执行。可以在开发中用Ripple进行快速的功能和UI测试，然后在打包/构建应用后再在设备或模拟器上进行更彻底的测试，它并不能取代使用设备或模拟器的测试。它最初是一个BlackBerry项目，因此有许多帮助BlackBerry开发者的功能。

Ripple作为Google Chrome插件安装。参考网址：http://emulate.phonegap.com,按照页面链接在Chrome上下载和安装。安装后要允许Ripple进行文件访问，在Chrome中打开配置页，选择Extensions部分，在插件列表中，启用"Allows access to file URLs"选项。

配置好后直接打开应用中某页面，还需要对打开页面启用Ripple。点击地址栏右侧的Ripple图标，打开一个窗口为加载的页面启用Ripple。也可以在URL的后面添加*?enableripple=true启用Ripple。

Ripple启用后，浏览器显示一个页面提示用户启用哪种仿真。Ripple能仿真Apache Cordova和其他几种别的平台和框架，选中Cordova按键继续，至此Ripple会显示一个在模仿的手机屏幕中的页面，在手机屏幕画面周围是属性面板，用来配置手机的选项和状态，如设备的屏幕分辨率、加速器、网络、地理位置等等。可以点击标签展开选项，改动仿真设备的配置。这时可以点击手机屏和应用交互，要做修改只需要改动这个html页，然后在Chorme浏览器中重新加载这个页面就可以继续测试了。

下一篇了解一下在Android平台上开发Cordova应用。

weixin_33769207

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Cordova开发技巧

本文承接上篇《Cordova应用解析》。Crodova支持的每个移动平台都有一些处理方法和工具用来测试和调试Cordova应用。一般可以用模拟器和物理设备加载Cordova应用，还可以用桌面浏览器测试。然而一些处理方法和功能适用于所有支持的移动平台，先看一些开发者应该注意的事项，然后再说明一些开发处理方法和工具用来测试和调试Cordo...
复制链接

扫一扫