构建一个完整的Cordova应用

时间 2019-12-05

标签构建一个完整 cordova 应用栏目 Cordova 繁體版

原文原文链接

本文承接上篇《建立Cordova插件》，经过实现一个简单的应用做为这个Cordova初级系列的结束。javascript

前边对Cordova编程已经讲了很多了，尚未拿真实应用为例完整的演练一遍构建过程。这里将用一个完整的应用为例从头至尾一步步的演示如何建立和测试应用。css

关于示例应用

把全部的API集中在一个例子中展现是一个好办法。下面咱们以实现一个指南针表盘为例。html

应用在屏幕上显示一个表示指南针转盘的图像。当用户沿着水平坐标轴转动设备时，指南针图像也转动。应用效果以下图:java

这里会用到jQuery Mobile提高用户UI，还会利用Cordova merges文件夹为Android和iOS提供不一样的图像(方便起见下面只在Android平台开发)。jquery

建立应用

在开发文件夹中用CLI建立Cordova项：android

cordova create compass
cd compass
cordova platform add android

这时咱们就有了一个新的Cordova项目，它支持Android平台。项目中可能会用到一个或多个核心插件。能够访问Cordova CLI使用指南网站，找到包含向项目添加每一个Cordova插件的完整命令说明。 ios

咱们要在程序中调试应用，须要向控制台写信息，参照指南中添加console插件的命令，以下：git

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

应用使用了指南针，还须要使用以下命令添加compass插件。apache

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

注意若是不在Cordova工做时打开-d开关，它不会向你输出执行过程信息。编程

接下来复制之前示例中的index.html到项目的www目录。用以下代码编辑这个页面：

<body onload="onBodyLoad()">
    <h1>Example 13-2</h1>
    <img src="compass.png" id="compass" />
    <br />
    <p id="headingInfo"></p>
</body>

为了把应用作的漂亮些，可使用jQuery Mobile把应用建立的更像移动应用。首先下载jQuery和jQuery Mobile，复制到www目录中，并向index.html页的head部分添加对它们的引用。

<link rel="stylesheet" href="jquery.mobile-1.3.2.min.css />
<script type="text/javascript" charset="utf-8" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.2.min.js"></script>

应用旋转图像的能力由一个叫jQuery Rotate的免费插件实现；你能够在http://code.google.com/p/jqueryrotate 找到关于这个插件的信息。要添加插件，把这个插件的js文件放在www文件夹中，而后在index.html中添加以下一行script标签：

<script type="text/javascript" charset="utf-8" src="jQueryRotateCompressed.js"></script>

当须要的jQuery文件都就位后，把index.html的body部分更新成下面这样：

<body onload="onBodyLoad()">
    <div data-role="page">
        <div data-role="header">
            <h1>指南针</h1>
        </div>
    </div>
    <div data-role="content">
        <div style="text-algin:center;">
            <img src="img/compass.png" id="compass" alt="">
            <br/>
            <p id="headingInfo">
                <b>Heading:</b> 0 Degreess
            </p>
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <h3>Created By Af</h3>
    </div>
</body>

是jQuery Mobile使用元素中的data-role属性来把这些特殊的元素定义成适当的外观。所以在前面的例子中，在页面上建立了一个header div并把它的data-role赋为header，一样把footer div的data-role属性设置为footer。data-position="fixed"把页脚固定在页面底部。

接下来我把页面的内容放在一个属性data-role是content的div中。为了加载指南针图像，并在页面居中显示朝向信息，添加一个新的div并设置成"style="text-algin:center"的样式。

注意为了避免显得杂乱，没有把style特性放在data-role为content的div中。也方便说明学习重点。

如今已经升级了用户界面，是时候开始关注应用的js代码了。在应用的index.html的script标签中定义了一些应用用到的函数。

第一个要用到的是响应window.onerror事件的函数。由于咱们知道代码不会正确执行，而且多数时候Cordova应用发生错误时都是保持静默的，这样为这个事件赋值并关联处理函数以便于发现发生在运行应用上的错误。下面展现的这个函数，基本上是接受了一个错误，应用文件名URL碰到了这个错误，而且行号引发了这个错误；而后它产生了适当的错误信息并把它写到日志，显示到对话框上。

// 遇到错误时触发
window.oneeror = function(msg, url, line) {
    var resStr;
    var index = url.lastIndexOf('/');
    if (index > -1) {
        url = url.substring(index + 1);
    }
    resStr = 'Error in ' + url + ' on line ' + ': ' + msg;
    console.log(appName + resStr);
    alert(resStr);
    return false;
}

接下来是通篇都用到的onDeviceReady函数。它做为Cordova的deviceready事件的监听器建立，而且在Cordova容器完成初始化后触发。在这个函数中了解到Cordova容器准备好了，这样可作想作的一切了。如下是这个函数：

function OnDeviceReady() {
    console.log('onDeiveReady fired.');
    hi = document.getElementById('headingInfo');
    // 设置监视
    // 每秒(1000毫秒)读指南针
    var watchOptions = {
        frequency : 1000
    };
    console.log(appName + 'Creating watch: ' + JSON.stringify(watchOptions));
    watchID = navigator.compass.watchHeading(onSuccess, onError, watchOptions);
}

函数首先定义了一个hi变量，它指向ID为headingInfo的页面元素。变量稍后用来用展现设备朝向的元素替换内容。

接下来函数定义了一个watchOptions变量，它用来设置一个朝向监视，这个监视可让应用按期更新朝向。watchOptions对象便可以给它的frequency属性或filter属性赋值。

当使用朝向监视时，它每1000毫秒会让Compass API报告设备朝向。filter属性用来在报告朝向前定义朝向变化的数量(用度)。下面的例子filter属性告诉Compass API每秒发布大于1度的朝向：

var watchOptions = {
    filter: 1
};

这里能够指定这两个属性，但要是指定了filter，frequency属性会被Compass API忽略。

注：此处是坑。Android已经不支持filter。
var watchOptions = {
    frequencey: 1000,
    filter: 1
};

定义watchOptions后，函数调用watchHeadin来建立朝向监视：

watchID = navigator.compass.watchHeading(onSuccess, onError, watchOptions);

就像已经了解的全部其余Cordodva API同样，onSucces函数在Compass API发送一个朝向值时执行，onError函数在Compass API遇到错误时执行。

当执行onSuccess时，Compass API把heading对象传递过来，它包括表示设备朝向的属性，以下：

{
    "magneticHeading":0,
    "trueHeading":0,
    "headingAccuracy":0,
    "timestamp":137873854661
}

onSuccess函数使用heading对象的magneticHeading属性来肯定当前朝向，而后使用这个值按照度数旋转指南针图像，就像下面函数展现的：

function onSuccess(heading) {
    console.log(app.Name + 'Received Heading');
    console.log(appName + JSON.stringify(heading));
    var hv = Math.round(heading.magneticHeading);
    console.log(appName + 'Rotating to ' + hv + ' degrees');
    $("#compass").rotating(-hv);
    hi.innerHTML = '<b>Heading:</b> ' + hv + ' Degrees';
}

注意指南针图像以设备当前朝向相反的方向旋转。这是由于设备被转动，指南针图像必须以相反的方向转动，这样指南针的北方老是指向磁极的北方。

最后应用的onError函数在监视发生错误时执行。它用传递给函数的error对象来识别错误的缘由并为用户显示适当的错误信息。注意onError函数还取消了监视，由于在应用不能测量朝向时继续监视朝向也没有太大意义了。

function onError(err) {
    console.error(appName + 'Heading Error');
    console.error(appName + 'Error: ' + JSON.stringify(err));
    // 发生问题移除监视
    navigator.compass.clearWatch(watchID);
    // 在页面上清除朝向值
    hi.innerHTML = '<b>Heading: </b>None';
    // 告之用户
    if (err.code == CompassError.COMPASS_NOT_SUPPORTED) {
        aleert('不支持指南针');
    } else if (compassError.code == CompassError.COMPASS_INTERNAL_ERR) {
        alert('指南针内部错误');
    } else {
        alert('未知的朝向错误');
    }
}

注意比以往其余应用更屡次的写控制台。这么作是为了更真实的展现建立Cordova应用。屡次使用控制台写出全部遇见的应用对象，这让咱们更好的了解从应用中得到了什么，这样能在发生错误时更容易的调试问题。

在应用中定义一个appName对象：

var appName = "Compass - ";

当应用写控制台时，把appName的值追加到每一个记录中：

console.error(appName + 'some message');

当在Android上调试时，能够用监视器应用来查看实时的日志记录。就像14.4展现的，你能够用appName过滤传入的值以便只查看这个应用的控制台信息。

测试应用且它是合意的，移除或标注多处应用写控制台的地方。

完整的index.html请参考源码。

使用Merges

如今尚未提过Cordova CLI的merge功能。前面"Cordova开发机制"解释过它怎样工做，这里展现它的使用。

假设项目在compass文件夹中，把Android平台的指南针图像compass.png放在compass/merges/android/img/中，把iOS版本的放在merges/ios/img/中。在构建过程当中，Cordova CLI把merges中的android文件夹的图像复制到compass/platforms/android/assets/www/img/中。ios也是一样的作法。

结果是能够维护一套代码并在须要的正确资源中按照平台切换。这对不一样平台来讲更加易于管理资源。

最后注意在模拟器上通常没有指南针，须要须要在真机上测试这个应用。

转眼就到2015年末了，最近几个月有些事就没有持续写。最近想起来好像提到过这个系列应该有个收尾，就不要让它跨年了。另外最近看了看一些其余技术，像ReactJS、ASP.NET Web API、Kotlin等，还正在读一些软件构建技术方面的经典（惭愧，应该是早就读过的），但愿本身能持续把学习和实践中的一些粗浅认识拿出来晒（如今通常是分段分享在微博@AfternoonLeaf），期待与您共同进步。