九、iPhone 和 Ajax

在本章中，我们将介绍：

  • 构建网站的触摸版（使用 jQTouch）
  • 在 iPhone Ajax 中利用 HTML5 功能
  • 使用 PhoneGap 构建本机应用程序
  • 加速 PhoneGap 项目
  • 构建货币兑换混合应用程序

iPhone 于 2007 年由苹果公司发布。它以其独特的设计、触摸屏和令人耳目一新的用户界面重新定义了智能手机领域。除了电话功能和支持外，它还弥补了其他智能手机普遍存在的互联网体验差距。它装有 Safari 网络浏览器、电子邮件客户端和 iPod，可提供完整的网络体验。

以下屏幕截图显示了 iPhone 4 的主屏幕以及默认内置应用程序：

iPhone and Ajax

和 PC 一样，iPhone 也有一些有用的工具，称为“应用程序”。可以从主屏幕访问所有应用程序。我们有两种编程应用程序的方法：

  • 本地应用程序
  • 网络应用

界面与顶部的菜单栏一致，必要时也与底部的菜单栏一致。

搭建网站触摸版（带 jQTouch）

触摸网站或触摸版实际上指的是网络应用。网络应用程序是设计用于在 iPhone 上获得最佳浏览效果的网页，采用 HTML 和 JavaScript 编程。HTML 和 JavaScript 有一些扩展称为 Safari HTML 和 Safari JavaScript，用于获得与设备相关的效果或支持。与普通网页不同，网络应用程序将遵循 iPhone 一致的用户界面和触摸友好的布局，如菜单栏、滑动选择选项等。有时，它们也被称为“网络剪辑”。下图显示了在 iPhone 上观看的 Facebook 触摸版 touch.facebook.com。

Building a touch version of a website (with jQTouch)

为了快速创建 web 应用程序 UI/样式，有一些可用的框架和工具包，如 IUI、jQTouch、jQuery Mobile、Sencha Touch 等。jQTouch 和 jQuery Mobile 是基于 jQuery 的库。我们将了解如何使用 jQTouch 构建 web 应用程序/触摸版。

准备好了吗

我们需要 Safari web 浏览器来测试 web 应用程序。通常，所有 web 应用程序都可以在任何分级浏览器中大致查看。我们还需要 jQTouch，可在获得 http://jqtouch.com/ 以及 jQuery 核心。

怎么做。。。

iPhone 网络应用的开发可分为：

  • 理解对接口有意义的 meta和 link标记。
  • 使用适当的 HTML、CSS 和 JavaScript 使用调整元素的界面/导航/使用。这些通常由框架来处理，如 IUI、jQTouch、jQueryMobile 等。

理解 meta和 link标签

当在主屏幕上为 web 应用添加书签时，以下声明可帮助我们指定要使用的图标：

<link rel="apple-touch-icon" href="http:///custom_icon.png"/>

通常，iPhone 会为图像添加圆角、阴影和反光。以下是使用 Packt 徽标创建的 57x57 自定义图标示例：

How to do it...

  1. 当我们手中已经有一个预先合成的图标时，为了避免双重效果，我们需要将 custom_icon.png重命名为 apple-touch-icon-precomposed.png，方式如下：

    ```php

    ```

  2. 图标的默认大小为 57x57。要为不同的分辨率指定不同的图标，我们可以使用 sizes属性：

    ```php

    ```

  3. The following screenshot shows the startup or splash image of the native Skype app. The startup image will be shown for a few seconds while launching the app. Its dimension must be 320x460 and can be specified thus:

    ```php

    ```

    How to do it...

  4. 我们可能还想隐藏 Safari 浏览器的控件，以获得本机应用程序的外观。我们将通过以下隐藏地址栏的代码实现这一点：

    ```php

    ```

  5. 要更改状态栏的颜色，我们可以使用以下命令：

    ```php

    ```

  6. iPhone 的视口调整为 980px 的宽度。因此，如果一个网页/web 应用的宽度为 980px，它将正确地安装在 iPhone 中。如果页面只有一个宽度为 200px 的表格或图像，则在 iPhone 中查看时，图像将偏向左角。对于这种情况，我们有一个选项可以通过编程方式指定视口宽度，如下所示：

    ```php

    ```

  7. 前面的代码将固定视口宽度，200px 图像将全宽查看。当同时瞄准 iPhone 和 iPad 时，更明智的做法是使用设备常量 device-width来指定宽度，因此：

    ```php

    ```

  8. 要禁用用户缩放并设置视口，请使用：

    ```php

    ```

  9. Tune the interface/navigation/use of elements with appropriate HTML, CSS and JavaScript usage.

    iPhone web 应用程序有类似的 UI，带有滑动链接以选择选项、标题中的快速导航等。更明智的做法是从框架的基本 HTML 代码开始。这将有助于我们在必要时快速插入元素。

    从框架的基本 HTML 代码开始还有另一个优点。它为我们提供了如何放置链接、如何以及在何处放置后退按钮等提示。

它是如何工作的。。。

让我们看一下以下用于折扣计算器的 jQTouch HTML5 代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Discount Calc</title>
<style type="text/css" media="screen">@import "./jqtouch/jqtouch.css";</style>
<style type="text/css" media="screen">@import "./themes/apple/theme.css";</style>
<script src="./jqtouch/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'icon.png',
addGlossToIcon: false,
startupScreen: 'startup.png',
statusBar: 'black'
});
function getDiscountPercentage(actual_price, discounted_price) {
var discount_percentage = 100 * (actual_price - discounted_price)/ actual_price;
return discount_percentage;
}
$(function(){
$('#calc-input input').blur(function(){
$('#calc-result').html(getDiscountPercentage($('#actual-price').val(), $('#discounted-price').val()) + ' %');
});
});
</script>
</head>
<body>
<div id="jqt">
<div id="home">
<div class="toolbar">
<h1>Discount Calc</h1>
<a href="/go?url=#info" target="_blank"  class="button flip">About</a>
</div>
<div id="calc" class="form">
<form id="calc-input">
<ul class="rounded">
<li><input type="text" id="actual-price" name="actual- price" placeholder="Actual Price"></li>
<li><input type="text" id="discounted-price" name="discounted-price" placeholder="Discounted Price"></li>
</ul>
<h3>Discount Percentage</h3>
<div id="calc-result" class="info">
</div>
</form>
</div>
</div>
<div id="info">
<div class="toolbar">
<h1>About</h1>
<a href="/go?url=#home" target="_blank"  class="cancel">Cancel</a>
</div>
<div class="info">
Demo calculator to find discount percentage.
</div>
</div>
</div>
</body>
</html>

如前所述，我们已经从 jQTouch 的基本 HTML 代码创建了代码。这使我们能够快速插入折扣计算器逻辑和计算器窗体界面。 $.jQTouch()调用创建所有必要的元和链接元素。主题化是通过 CSS 和图像精灵完成的。

jQTouch 通过类名应用效果，如以下代码所示，例如：

<a href="/go?url=#info" target="_blank"  class="button flip">About</a>

应用翻转效果并给出按钮外观。

还有更多。。。

我们可以使用在线图标生成工具快速创建应用程序图标。苹果自己的开发者指南是关于这个话题的另一个广泛的资源。

在线 iPhone 图标生成器

要创建 iPhone 图标，我们有一个第三方网站http://www.flavorstudios.com/iphone-icon-generator 。它可以帮助我们快速创建图标，以防我们对 PhotoShop 不太满意。

苹果在提供免费指南 http://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/Introduction/Introduction.html 。

在 iPhone Ajax 中利用 HTML5 功能

HTML5 是 HTML 标准的最新修订版，被现代 web 浏览器采用。当苹果阻止 iPhone 上的 Flash 访问并将 HTML5 作为替代的开放式解决方案时，HTML5 得到了更多的关注。值得注意的是，2010 年 4 月，苹果公司（Apple Inc.）联合创始人史蒂夫·乔布斯（Steve Jobs）在一封公开信“关于 Flash 的思考”中攻击 Adobe，并强烈解释了在 iPhone 和 iPad 中支持 HTML5 的原因。公开信摘要如下：

  • Flash 并不像广告中那样“开放”
  • H.264 视频格式得到广泛支持，不需要闪存
  • 闪存容易出现安全和性能问题
  • 视频的软件解码影响电池寿命
  • Flash 属于旧 PC 时代，与触摸屏不兼容
  • 依赖 Adobe 作为第三方开发工具提供商将影响苹果平台的发展

因此，HTML5 在 iPhone 中是本机支持的，并且在生态系统中使用非常普遍。W3C 于 2011 年 1 月 18 日推出的 HTML5 徽标如下：

Leveraging HTML5 features in iPhone Ajax

准备好了吗

我们需要在 Mac 上安装 iPhone 模拟器。虽然并非所有选项都可用，但出于预览目的，我们也可以使用基于 WebKit 的 web 浏览器，如 Google Chrome 或 Safari。

怎么做。。。

在 canvas 等其他新 API 中，HTML5 的以下特性对 web 应用程序和手持设备特别有兴趣：

  1. audio element:

    在 HTML5 中，音频播放是浏览器功能的一部分。在此之前，通常使用 Flash 编写的音频播放器来播放.mp3 文件。本机 HTML5 音频使用示例如下所示：

    ```php

    ```

  2. video element

    视频元素被认为是一个闪光“杀手”，并获得了势头。以下是显示 YouTube 视频的 HTML5 代码：

    ```php

    Fallback content: This browser doesn't support HTML5 video

    ```

    这些属性可以解释如下：

    • poster表示必须显示的图像，以向用户提供有关视频的想法，通常是第一个非空白帧图像。
    • controls决定播放器是否有视频控制。
    • preload允许部分视频下载，甚至在触发播放选项之前。这允许用户在触发/单击播放后立即播放视频。这样做的缺点是，即使用户不愿意播放视频，视频也会被下载。
    • Geolocation API

    地理定位是确定用户浏览器物理位置的能力。在手持设备中，可以通过 GPS 进行地理定位，GPS 提供设备的纬度和经度。对于某些 iPhone 应用程序，可能需要物理位置来提供必要的功能。例如，对于显示该地区交易的应用程序，如果用户的位置能够自动识别，而不需要用户输入地址，这将非常有用。以下代码段显示用户的纬度和经度：

    ```php if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( // success callback function (position) { alert('Latitude: ' + position.coords.latitude); alert('Longitude: ' + position.coords.longitude); }, // failure callback function (error) { switch (error.code) { case error.TIMEOUT: alert('Timeout'); break; case error.POSITION_UNAVAILABLE: alert('Position unavailable'); break; case error.PERMISSION_DENIED: alert('Permission denied'); break; case error.UNKNOWN_ERROR: alert('Unknown error'); break; } } ); } else { alert('Geolocation not supported in this browser'); }

    ```

    在真正的 iphoneweb 应用程序中，纬度和经度信息可以传递到服务器脚本以获取本地化数据。

  3. Offline version

    区别本地应用和 web 应用的另一个重要因素是能够立即从 iPhone 加载全部或部分 UI，而无需任何互联网连接，以便用户能够快速响应。我们在上一个配方中设计的折扣计算器 web 应用程序本质上是静态的，我们没有从服务器更新任何内容。因此，如果我们让它离线工作，我们可能会得到一个本地应用程序的感觉。

    HTML5 有一个缓存清单功能，可以帮助开发人员缓存必要的文件，这样即使没有网络，web 应用程序也可以工作：

    • 缓存清单的 MIME 类型为 text/cache-manifest
    • 缓存清单文件可以采用任何名称，但必须使用 html元素指定，因此：<html manifest="/cache.manifest">
    • 这是一个纯文本文件：

    • The implicit syntax to specify files that are to be cached:

      为了指定要缓存的文件，我们有隐式和显式语法。

    ```php CACHE MANIFEST

    comment

    /relative/path http://example.com/absolute/path

    ```

    • 对标题 CACHE, NETWORK和 FALLBACK:使用显式语法

    ```php CACHE MANIFEST CACHE:

    files that are to be cached

    /relative/path/to-be-cached http://example.com/absolute/path/to-be-cached NETWORK:

    files that should not be cached

    /relative/path/no-cache http://example.com/absolute/path/no-cache FALLBACK:

    file mapping of network failure.

    Here, the online file's alternative offline will be loaded.

    /relative/path/no-cache /relative/path/to-be-cached

    ```

  4. Web storage

    HTML5 的另一个漂亮特性是能够在客户机上存储数据。与 Cookie 不同，项目不会以 HTTP 头发送到服务器。Web 存储有两个存储区域：

    • localStorage:就像 cookie 一样，它的作用域是整个域，即使在浏览器关闭时也会持续存在。

    • sessionStorage: Its scope is per page per window and is available only till the window is closed. This helps the data to be restricted only for the window, which is not possible with cookies and local storage.

      localStorage 和 sessionStorage 具有类似的语法来存储值；例如，在 localStorage 中设置、获取和删除 Packt 的密钥名的语法如下：

    ```php localStorage.setItem('name', 'Packt'); // set name var name = localStorage.getItem('name'); // get name localStorage.removeItem('name'); // delete name localStorage.clear(); // delete all local store (for the domain)

    ```

    当密钥名没有任何空格时，我们也可以使用以下替代语法：

    ```php localStorage.name = 'Packt'; // set name var name = localStorage.name; // get name delete localStorage.name; // delete name

    ```

    笔记

    访问会话存储具有类似的语法，但通过 sessionStorage对象。

  5. Client-side SQL database:

    使用 SQL 命令通过 JavaScript API 访问客户端数据库是 HTML5 的另一个有用特性。新的 API 提供了 openDatabase、transaction 和 executeSql 方法。下面是一个示例调用，可以使用这些调用：

    ```php var db = openDatabase('dbName', '1.0', 'long dbname', 1048576); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS books (id unique, text)'); tx.executeSql('INSERT INTO books (id, text) VALUES (1, "Packt")'); });

    ```

它是如何工作的。。。

由于 iPhone 本机支持 HTML5，因此在构建 web 应用程序时很容易利用这些功能。音频和视频元素在 iPhone 中本机播放，无需对基于 Flash 的播放器进行任何额外要求。

地理定位可以轻松找到用户的位置并为用户提供本地化数据。缓存清单功能允许将 web 应用保存在 iPhone 上以供脱机访问。通过 localStorage, sessionStorage或客户端 SQL 数据库，可以在 iPhone 上存储本地数据。这些 HTML5 功能帮助我们构建具有本机应用程序外观的 web 应用程序。

还有更多。。。

当我们想要持续改进应用程序时，web 应用程序可能是首选选项，因为原生应用程序必须经过苹果的批准流程。Gmail 和雅虎！Mail 利用 HTML5 功能在 iPhone 上提供更好的应用体验。

HTML5 演示

http://html5demos.com/ 提供了一套快速的 HTML5 演示。了解浏览器兼容性和使用示例很有帮助。

坚持

Persist JS 是一个抽象库，如果浏览器本身不支持 HTML5 功能，它可以通过其他方式帮助在客户端浏览器上存储数据。可在获取 http://pablotron.org/software/persist-js/ 。

使用 PhoneGap 构建本机应用程序

尽管我们可以将离线访问、启动映像、客户端数据存储和其他漂亮的功能带到 web 应用程序中，但 web 应用程序仍然不能使用设备硬件功能。加速计、声音、振动和 iPhone 内置的地理定位功能都是面向硬件的，只有本地应用程序才能使用。在 PhoneGap 之前，本地 iPhone 应用程序通常在 Mac 机器上使用 Objective C 构建。PhoneGap是一种替代开发工具，允许我们以 HTML、CSS 和 JavaScript 构建本机 iPhone 应用程序。它充当 web 应用程序和移动设备之间的桥梁；因此，它允许我们将我们的 web 应用程序快速转换为其他移动目标。除了 iPhone，它还支持其他智能手机，如 Android 和黑莓。这是一个非常经济高效的解决方案，因为它允许我们在网站构建、web 应用构建和本机应用构建中重用相同的代码库。另一个积极的方面是它是开源的。在此配方中，我们将构建折扣计算器的本机版本。

准备好了吗

构建本机应用程序需要：

  • 安装了 Xcode 的 Mac 计算机。对于那些订阅了 iOS 开发者程序的人来说，Xcode 是免费的。可在获取 http://developer.apple.com/xcode/ 。Xcode 4 由 Xcode IDE、仪器、iOS 模拟器以及最新的 Mac OS X 和 iOS SDK 组成。
  • PhoneGap，可通过的简易安装程序获得 http://www.phonegap.com/download/ 。请注意，ZIP 文件包含所有支持平台的文件夹。当我们切换到 iOS文件夹时，我们可以找到安装程序 PhoneGapInstaller.pkg。它安装 PhoneGapLib、PhoneGap 框架和 PhoneGap Xcode 模板。这使得我们可以很容易地从 Xcode 快速创建 PhoneGap 项目。
  • iOS 开发者计划的付费订阅http://developer.apple.com/programs/ios/ 将我们的应用提交到应用商店，并能够在我们的 iPhone 上运行。如果没有 iOS 开发者访问权限，我们只能在模拟器上预览应用程序。

怎么做。。。

使用 PhoneGap 构建本机 iPhone 应用程序可分为以下步骤：

  1. Building a web app:

    正如我们在第一个菜谱中看到的，首先我们必须构建一个 web 应用程序。

  2. Creating a PhoneGap project in Xcode 4:

    在此步骤中，我们必须通过在 Xcode 中创建 PhoneGap 项目将我们的 web 应用程序与 PhoneGap 链接：

    How to do it...

    安装 PhoneGapLib 后，将使用必要的模板设置 Xcode。因此，创建一个新的 PhoneGap 项目更简单。

    • 启动 Xcode 并从文件菜单中选择新项目。
    • 在为新项目选择模板窗口中，选择基于 PhoneGap 的应用程序，如上图所示。请注意，这仅在我们安装 PhoneGapInstaller.pkg时可用。
    • 在屏幕中为您的新项目选择选项，输入以下产品详细信息：
      • 产品名称：
      • 公司识别码：
      • 输入这些将自动将包标识符填充为 com.packt.DiscCalculator
    • 在下一步中选择项目位置。
    • 运行项目以创建一个 www文件夹。
    • 在项目中添加对 www的文件夹引用。

    注

    最后两个步骤是必要的，因为 Xcode 4 模板中存在缺陷。

    Nitobi 提供免费网络服务，在快速创建 PhoneGap 项目 https://build.phonegap.com/generate 。

    这些步骤将创建一个默认的 PhoneGap 示例项目。本质上，示例中的代码需要注意：

    ```php function onBodyLoad() { document.addEventListener("deviceready",onDeviceReady,false); } / When this function is called, PhoneGap has been initialized and is ready to roll / function onDeviceReady() { // do your thing! navigator.notification.alert("PhoneGap is working") }

    Hey, it's PhoneGap!

    Don't know how to get started? Check out PhoneGap Start

    ```

    在这里，我们可以清楚地注意到这些 PhoneGap 特定功能在我们的 web 应用程序代码中不可用。因此，我们必须将这些逻辑合并到我们的 web 应用程序代码中。这里比较简单的选项是：

    • 从 www文件夹中删除 startup.png和 icon.png；启动图像和图标位于 www文件夹外，文件名为 Default.png（320x480）、 Default-Landscape.png（1004x768）、 Default-Portrait.png（768x1024）、 icon-72.png（72x72）和 icon.png（57x57）。当我们瞄准其他设备时，需要不同的分辨率文件。
    • 使用相关的 PhoneGap 代码修改我们 web 应用程序的 head部分。
    • 然后，用它替换整个 www文件夹内容。
    • Add hardware-specific features.

    到目前为止，我们还没有添加任何特定于硬件的功能。PhoneGap API 允许我们通过 JavaScript 中的 navigator.notification 对象访问特定于硬件的功能：

    • navigator.notification.alert(message, alertCallback, [title], [buttonName])允许我们拥有具有更多功能的本机警报窗口。
    • navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels])允许我们使用具有更多功能的本机确认对话框。
    • navigator.notification.beep(times)允许我们发出嘟嘟声。

    • navigator.notification.vibrate(milliseconds) allows us to make the phone vibrate.

      因此，让我们稍微修改一下代码，使其具有一个“嘟嘟声”、“振动”和“警报”对话框。对于 Disc Calculator 应用程序，www 文件夹中的最终代码如下：

    ```php <!doctype html>

    Discount Calc @import "./jqtouch/jqtouch.css"; @import "./themes/apple/theme.css"; var jQT = new $.jQTouch({ statusBar: 'black' }); function getDiscountPercentage(actual_price, discounted_price) { var discount_percentage = 100 * (actual_price - discounted_price)/ actual_price; return discount_percentage; } $(function() { document.addEventListener('deviceready', function() { navigator.notification.vibrate(2000); // vibrate 2 seconds navigator.notification.alert('Ready!', '', 'DiscCalculator'); }, false); $('#calc-input input').blur(function() { $('#calc-result').html(getDiscountPercentage($('#actual-price').val(), $('#discounted-price').val()) + ' %'); navigator.notification.beep(1); // 1 time beep }); });

    Discount Calc

    About

    Discount Percentage

    About

    Cancel
    Demo calculator to find discount percentage.

    ```

  3. Previewing in iPhone Simulator:

    在选择了活动可执行文件的 Xcode 中使用构建并运行选项，可以轻松地在 iPhone 模拟器中预览。下面的屏幕截图显示了我们在 Xcode 中的DiscCalculator项目：

    How to do it...

    如下面的屏幕截图所示，我们可以从概览下拉列表中选择活动可执行文件，以便在 iPhone 模拟器中执行它：

    How to do it...

    最后，我们在 iPhone 模拟器中运行我们的应用程序，如控制台上所示：

    How to do it...

  4. Previewing in an iPhone:

    为了预览或将我们的应用提交到应用商店，我们需要创建配置文件，而这反过来又需要对 iOS 开发者计划进行付费订阅。资源调配配置文件是一个集合，它将应用程序、开发人员和设备（iPhone）联系在一起，以便在设备上安装它将授权他们进行测试。

    How to do it...

    使用 iOS 开发者网页的资源调配门户中的资源调配助手，此过程非常简单：

    How to do it...

    尽管如前面的屏幕截图所示启动 Provisioning Assistant 将指导您完成每个步骤，但以下是总结：

    • 在 Keychain Access 应用程序中生成 CSR 并将其上载到资源调配门户。然后，下载生成的证书并将其安装在 Keychain Access 中。在这里，认证创建应该是为了“开发”。
    • 在配置门户中输入应用程序 ID（在本例中为 com.packt)详细信息
    • 在配置门户中添加开发设备“UDID（唯一设备标识符）。
    • 现在，开发资源调配概要文件将准备就绪。下载并放到 Xcode 项目中。一旦 iPhone 与 Mac 电脑连接，在设备上启动应用程序将在 iPhone 中加载应用程序。

    注

    要查找 iPhone 的 UDID，我们可以：

    在使用 UDDIT 应用程序 http://itunes.apple.com/app/udidit/id326123820 在 iPhone 上。

    或

    连接 iPhone 后使用 iTunes。

  5. 提交到应用商店：

对于在 iPhone 中预览，我们必须创建“开发”配置文件（也称为“临时”），对于提交到 App Store，我们必须创建“分发”配置文件。创建配置文件的步骤类似，但在证书选项中，我们必须为分发创建配置文件。

下一步是通过 iTunes Connect 在提交应用程序 https://itunesconnect.apple.com/ 为此，我们必须在 iTunes Connect 网站中添加新的应用程序，并输入必要的详细信息。在最后一步中，我们必须通过充当上载程序的应用程序加载程序上载应用程序文件二进制文件。一旦上传并提交，苹果员工将对该应用进行审查。当应用程序符合他们的标准时，它将被批准。

它是如何工作的。。。

PhoneGap 实际上是针对不同平台的 WebView 包装的集合。因此，它在浏览器控件中显示一个 web 应用程序，给人一种原生的感觉。包装器将本机代码函数公开给 JavaScript API。因此，PhoneGap 为任何应用程序带来了原生的感觉和 HTML/CSS 主题。

创建资源调配配置文件决定用于临时开发测试的授权设备。通过 iTunes Connect 网站，提交并管理应用程序以进行进一步修订。

还有更多。。。

我们已经了解了 iOS 平台上的 PhoneGap。但是，我们可能必须为其他平台构建应用程序。

入门指南/帮助向导

PhoneGap 为的所有平台提供了良好的入门指南 http://www.phonegap.com/start 。通过选择目标平台，我们可以获得逐步的视频教程或屏幕演练。

加快 PhoneGap 项目

在上一个菜谱中，我们已经看到了如何使用 jQTouch 构建一个 web 应用程序，并通过 PhoneGap 将其转换为本地应用程序。在这个配方中，我们将看到如何减少所涉及的步骤，并看到 jQTouch 的替代解决方案。

准备好了吗

我们需要在访问 PhoneGap 构建 https://build.phonegap.com/ 。在撰写本文时，此功能处于私有测试版，需要来自的 jQuery Mobilehttp://jquerymobile.com/ 以及 jQuery 核心。

怎么做。。。

为了加快开发，我们必须减少步骤并改进编程方法：

  1. PhoneGap Build service:

    开发 PhoneGap 的公司 Nitobi 有一个在线构建服务，如下面的屏幕截图所示。这意味着，我们不需要在机器中执行任何构建步骤。

    How to do it...

    • 上传 HTML/CSS/JavaScript 格式的源文件，然后在云上构建就足够了。云构建服务还允许为其他平台构建源文件，如 Android、Palm、Symbion 和 Blackberry。对于那些使用 Windows 机器的人来说，这将是一个很好的省时方法，也是一个很好的选择。
    • jQuery Mobile:

    与 jQTouch 相比，jquerymobile 是一个更新的框架。它通过 HTML、CSS 和 JavaScript 提供类似的主题和编程能力。它是用于移动开发的官方 jQuery 库。

    How to do it...

jQTouch主要针对 WebKit 浏览器，因此仅在 iPhone 中支持。但是，如果我们瞄准更多的设备，jQTouch 可能无法顺利工作，因为它不应该是跨平台和跨设备的。另一方面，jquerymobile 支持多种平台和设备。上图显示了 jQuery Mobile 在各种平台上的支持。

如图所示，当我们为多个平台和设备构建应用程序时，这可以节省时间。

它是如何工作的。。。

由于 PhoneGap 构建服务在云上工作，我们不需要任何开发环境要求。它为多台设备构建应用程序。

jQuery Mobile 面向多个设备和平台。这在通过 CSS 和更简单的 JavaScript API 处理主题方面与 jQTouch 类似。由于它的主要重点是跨平台和跨设备支持，它将节省我们在其他设备上移植应用程序的时间。支持图表清楚地显示了此框架在特定设备上提供的支持级别。

还有更多。。。

除了 PhoneGap 之外，还有其他本机应用程序开发工具可用：

构建货币兑换混合应用程序

术语混合应用程序泛指通过 WebView 包装器构建的应用程序，其中显示远程数据。本机应用程序包装器中的 web 浏览器组件主要用于显示以 JSON 格式获取以更新内容的 UI 和数据。PhoneGap 就是这样一种技术。因此，使用 PhoneGap 开发的本机应用程序，以及从远程数据更新 UI 的能力，也可以称为混合应用程序。在本食谱中，我们将了解如何构建货币转换应用程序。

准备好了吗

我们需要：

怎么做。。。

开源汇率 API 以美元为基础货币，提供 120 多种兑换率。其用于货币转换的姊妹库-money.js 在输入汇率数据时可以转换为不同的货币；请注意，有一种基础货币就足够了，其他货币之间的转换是通过数学计算完成的。比如说，如果我们有美元对澳元和美元对印度卢比的汇率，我们可以使用 money.js轻松计算印度卢比对澳元的汇率。因此，当我们有 money.js并且有开源的汇率数据时，我们可以进行实时货币转换。

通过 API 和货币转换库，我们可以构建一个应用程序，如以下屏幕截图所示：

How to do it...

下面是 Xcode PhoneGap 项目中 HTML 文件的代码。我们只创建了 HTML 文件。其余文件来自 PhoneGap Xcode 模板：

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Currency Conv</title>
<style type="text/css" media="screen">@import "./jqtouch/jqtouch.css";</style>
<style type="text/css" media="screen">@import "./themes/apple/theme.css";</style>
<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
<script src="./jqtouch/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script src="./money.js" type="application/x-javascript"
charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
// Load exchange rates data in async manner...
$.ajax( {

url: 'http://openexchangerates.org/latest.php',
dataType: 'json',
async: false,
success: function(data) {
// if money.js is loaded
if (typeof fx !== 'undefined' && fx.rates) {
fx.rates = data.rates;
fx.base = data.base;
} else { // keep data in fxSetup global
var fxSetup = {
rates: data.rates,
base: data.base
}
}
}
});
var jQT = new $.jQTouch( {
statusBar: 'black'
});
$(function() {
// build source currency dropdown
// and initial exchange rates listing...
var _options = [];
var _li = [];
$.each(fx.rates, function(currency_code, exchange_rate) {
var target_currency = fx.convert(amount, {
from: source_currency,
to: currency_code
});
var _selected = (currency_code == fx.base) ? ' selected="selected"': '';
_options.push('<option value="' + currency_code + '"' + _selected + '>' + currency_code + '</option>');
_li.push('<li>' + currency_code + ' <small class="counter">' + exchange_rate + '</small></li>');
});
$('#source-currency').html(_options.join(''));
$('#exchange-rates').html(_li.join(''));
// alert the user when ready
document.addEventListener('deviceready', function() {
navigator.notification.vibrate(2000); // vibrate 2 seconds
navigator.notification.alert('Ready!', '', 'Currency Conv');
}, false);
// when user changes amount or source currency,

// repopulate the exchange rates using fx.convert()...
$('#conv-input').change(function() {
var amount = $('#amount').val();
var source_currency = $('#source-currency').val();
var _li = [];
$.each(fx.rates, function(currency_code, exchange_rate) {
_li.push('<li>' + currency_code + ' <small class="counter">' + target_currency + '</small></li>');
});
$('#exchange-rates').html(_li.join(''));
navigator.notification.beep(1); // 1 time beep
});
});
</script>
</head>
<body>
<div id="jqt">
<div id="home">
<div class="toolbar">
<h1>Currency Conv</h1>
<a href="/go?url=#info" target="_blank"  class="button flip">About</a>
</div>
<div id="conv" class="form">
<form id="conv-input">
<ul class="rounded">
<li><input type="text" id="amount" name="amount"
placeholder="Amount" value="1"></li>
<li><select id="source-currency" name="source-currency">
</select></li>
</ul>
<h3>Exchange Rates</h3>
<div class="form">
<ul id="exchange-rates" class="rounded">
</ul>
</div>
</form>
</div>
</div>
<div id="info">
<div class="toolbar">
<h1>About</h1>
<a href="/go?url=#home" target="_blank"  class="cancel">Cancel</a>
</div>
<div class="info">
App for currency conversion.
</div>
</div>
</div>
</body>
</html>

要在 iPhone 模拟器中编译或预览应用程序，请参阅本章中的使用 PhoneGap构建本机应用程序。

它是如何工作的。。。

我们在转换过程中使用了 money.js库和开源汇率 API。在应用程序加载期间，它以同步方式获取 JSON 格式的交换数据。我们在 $.ajax()方法中将 async标志设置为 false，这样函数调用将是串行的。API 中的交换数据如下所示：

"timestamp": 1319050338,
"base": "USD",
"rates": {
"AED": 3.67000019,
"ALL": 103.18125723,
...

数据加载时通过 fx.rates送入 money.js库，否则在全局 fxSetup变量中设置，库加载后使用。

fx.rates对象的索引中有货币代码；它们通过 $.each()方法进行迭代，以填充源货币下拉列表和 1 USD值的初始汇率列表。注意，为了获得良好的性能，我们先填充 HTML 内容，然后通过一个 html()调用注入内容，从而减少了对 DOM 的访问。

根据要求，当金额或来源货币发生变化时，应重新绘制整个汇率表。它是通过挂接一个 change事件并使用 fx.convert()方法实现的。 money.js支持不同的语法，包括类似 jQuery 的链接支持：

fx(1).from('USD').to('INR');

我们使用了以下语法，它比链式语法更容易迭代，开销也更小：

fx.convert(1,{
from: 'USD',
to: 'INR'
});

请注意，基于 PhoneGap 的应用程序早些时候被苹果拒绝，理由是它们只是网络剪辑（不完全是本地的）。

建议在 HTML 中完成的模板/视图逻辑始终在本地可用，并且数据以 JSON 格式从服务器接收。这样，即使没有数据，应用程序也不会失去它的外观。换句话说，不鼓励从服务器中提取 HTML 内容，这样的 HTML 内容可能会造成间隙，留下破损的外观。当应用商店审核团队审核应用程序时，如果通过远程 HTML 内容更改了应用程序的设计/感觉，则该应用程序可能会被拒绝。应用程序审查是提交过程中的一个重要过程，建议检查以下内容：

还有更多。。。

由于应用程序通常会以 JSON 格式从远程服务器获取数据，因此明智的做法是使用客户端模板解决方案。

胡子

Mustache 是一种流行的无逻辑模板解决方案，位于http://mustache.github.com/ 。它有多种编程语言，包括 JavaScript。下面是一些示例用法：

var view = {
name: "Alice",
tax: function() {
return 40000*30/100;
}
}
var template = "{{title}} should pay {{tax}}";
var html = Mustache.to_html(template, view);

前面的代码将给出输出：Alice 应该支付 12000。

饮料，jQuery 微模板

此 jQuery 微模板库可在上找到 http://plugins.jquery.com/project/micro_template 。它基于 jQuery 作者 John Resig 的 JavaScript 微模板文章http://ejohn.org/blog/javascript-micro-templating/ 关于开发轻量级脚本。该插件改进了模板选择，变量可以是带有模板标记的纯 HTML；数据被推送到模板中。这是移动平台的理想模板库，因为它的代码很小。下面是一些示例用法：

<ol id="tpl-users">

      <: for(var i=0; i < users.length; ++i)
{:>
<li><:=users[i].name:>, Age: <:=users[i].age:></li>
<:}
:>
</ol>
<script type="text/javascript">
var users_data={
"users":[
{"name":"Alice", "age":1},
{"name":"Bob", "age":3},
{"name":"Charles", "age":1}

]
};
$('#tpl-users').drink(users_data);
</script>

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/7639.html