首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

Dojo Mobile 1.6 入门(5)

Dojo Mobile 1.6 入门(5)

用 PhoneGap 进行原生部署通过移动 Web 部署应用程序越来越流行了。随着移动浏览器的改进和 HTML5 的发展,移动 Web 会成为移动应用程序的更强大的分发方式。但是,在许多情况下,希望把应用程序以原生方式部署到相关平台的应用程序商店。现在,不必使用每个平台的原生 SDK 开发应用程序的不同版本,而是可以使用 PhoneGap 把移动 Web 应用程序包装在原生包中。
PhoneGap 是一个开放源码项目,可以在任何应用程序中免费使用,无论应用程序采用什么分发模型(免费、商业、开放源码或混合式许可证)。PhoneGap 本身采用 MIT 和 BSD 开放源码许可证。可以选择最适合自己的许可证。
PhoneGap 包含用于为六种平台构建原生应用程序的 SDK:iOS、Android、Blackberry、webOS、Windows Mobile 和 Symbian。开始使用 PhoneGap 的步骤因平台而异。本节讲解如何把它部署到 iOS 上。关于使用其他平台的信息见 。
我们来创建一个非常基础的 Dojo 应用程序,使用 PhoneGap 在 iOS 设备上以原生方式运行它。为了构建原生的 iOS 应用程序,需要包含 OS X 10.6 Snow Leopard 和 Xcode 的 Mac 计算机。可以从 Apple 的 Developer Center 或 Mac App Store 下载 Xcode。一定要下载 iOS SDK,否则无法构建 iOS 应用程序。
假设已经安装了 Xcode 和 iOS SDK:  
  • 下载  的最新版本(一个 zip 文件)。
  • 提取并打开这个文件中的 iOS 目录。应该会看到名为 PhoneGapLibInstaller.pkg 的包。
  • 启动 PhoneGapLibInstaller.pkg 把 PhoneGap 安装到 Xcode 中。
  • 安装程序运行结束时,启动 Xcode 并创建一个新项目。
  • 在左边的项目类型组中,选择 User Templates 组下面的 PhoneGap(见图 14),然后在右边选择 PhoneGap-based Application
  • 单击 Choose,指定项目的名称(这个示例命名为 "HelloNative")。
图 14. 在 Xcode 中创建 PhoneGap 项目在 Xcode 的 Groups & Files 部分中(通常在窗口的左边),展开 "www" 文件夹并打开 index.html 文件。这个文件中的代码应该像清单 13 这样。
清单 13. 默认的 PhoneGap iOS index.html 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <!-- Change this if you want to allow scaling -->
    <meta name="viewport" content="width=default-width; user-scalable=no" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <title>HelloNative</title>
     
    <!-- iPad/iPhone specific css below, add after your main css >
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)"
href="ipad.css" type="text/css" />        
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)"
href="iphone.css" type="text/css" />        
    -->
    <!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js
from http://www.JSON.org/json2.js into your www directory and include it here -->
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript" charset="utf-8">


    // If you want to prevent dragging, uncomment this section
    /*
    function preventBehavior(e)
    {
      e.preventDefault();
    };
    document.addEventListener("touchmove", preventBehavior, false);
    */
     
    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!
    }
     
    </script>
  </head>
  <body onload="onBodyLoad()">
      
  </body>
</html>




现在,我们要构建与 "Hello, World" 应用程序功能相同的原生应用程序。第一步是包含 Dojo 本身。在 index.html 中找到以下行:
1
<script type="text/javascript" charset="utf-8"  src="phonegap.js"></script>




在这一行下面,添加清单 14 中的代码。
清单 14. 包含 Dojo
1
2
3
4
5
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes
/iphone/iphone.css">
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>




清单 14 中的代码从 Google CDN 装载 Dojo 的 CSS 和 JavaScript 文件。当然,在真实的应用程序中,如果要使用 PhoneGap 以原生方式部署移动 Web 应用程序,应该包含 Dojo 的本地拷贝。否则,如果用户离线,他们就无法使用您的应用程序。另外,如果在设备本地有 Dojo 文件,应用程序的运行速度会快得多。
返回列表