使用PhoneGap和Dreamweaver打包Web應用為移動程序
Dreamweaver / PhoneGap的集成讓你就像部署基于Android和iOS移動設備的原生應用程序一樣快速部署你的web應用程序。(原生應用程序是一種編寫來運行在特定操作系統或設備上的應用程序)。PhoneGap框架的作用像web應用程序和移動設備之間的橋梁。即便你不熟悉像Objective-C或 Cocoa之類的編碼語言。它也可以幫助你將web應用程序打包進移動應用程序。
本教程將向你展示如何打包現在有的在Dreamweaver中建立的移動應用程序。它不會向你展示如何從頭構建該應用程序。也不會告訴如何在移動設備中部署打包好的應用程序。這些議題將在稍后公布其他教程中進行講解。
注意：你用 Dreamweaver打包的這個移動應用程序僅以調試為目的。該應用程序將在Android和iOS模擬機上運行，以及遷移到你個人的移動設備上運行。但是你不能上傳調試版移動應用程序到蘋果或Android商店。為了上傳iOS或Android應用程序，你必須采用Dreamweaver之外的額外步驟來為他們簽名。關于上傳應用程序到蘋果或Android商店的更多信息，請查看Android文檔，或在蘋果iOS置備門戶網站的程序用戶指南。(在你能訪問蘋果iOS置備門戶網站之前你必須注冊蘋果開發者計劃[免費] ，并參加iPhone開發者計劃[年費])。
系統要求
你必須確保滿足以下系統要求，才能繼續本教程。
MAC OS-iOS
- Mac OS X雪豹10.6.x或更新版
- 帶有iOS SDK的Xcode 3.2.x(在本教程中你將下載它)
MAC OS-Android
- Mac OS X 10.5.8或更新版(僅x86)
- Android SDK(在本教程中你將下載它)
Windows-iOS
- iOS是僅適用于蘋果電腦的用戶
Windows-Android
- Windows XP(32位)，Vista(32或64位)，或Windows 7(32或64位)
- Android SDK(在本教程中你將下載它)
建立示例應用程序站點
本教程使用示例應用程序來演示原生應用程序打包。應用程序是為了Meridien 24/7，這是一個讓你在移動設備上找到當地餐館的虛擬的原生應用程序。
在你開始學習如何打包應用程序之前。你必須安裝示例文件和建立Dreamweaver站點。
1. 下載示例壓縮包meridien_mobile.zip，解壓縮文件并在電腦上保存它。我喜歡把我所有的Dreamweaver站點保存在一個叫做Sites的主要文件夾，它位于我Windows的C盤上。
2. 運行Dreamweaver，并選擇站點->新建站點…
3. 在站點設置對話框的站點名稱文本框中，輸入新站點名稱為：Meridien。
4. 在本地站點文件夾文本框中，輸入你在步驟1中保存在你電腦上的meridien_mobile文件夾的路徑。你可以點擊文本框右側的文件夾圖標來瀏覽到meridien_mobile文件夾。
5. 完成時，單擊保存來關閉站點設置對話框。
新站點的文件填充了Dreamweaver文件面板(如圖1)。
(圖1.帶有新的Meridien 24/7站點文件的Dreamweaver文件面板)
meridien_mobile文件夾包含web應用程序的所有文件，包括必須的JavaScript，CSS，以及圖片文件。
6. 在文件面板中雙擊index.html來在文檔窗口中打開它。實際上打包你的應用程序不需要打開index文件;我們只是打開文件以便你能看到應用程序的樣子，以及它是如何工作的。
7. 在文檔窗口中你不會看到更多東西，因為Dreamweaver默認情況下不會呈現實時應用程序。點擊文檔工具欄的實時視圖按鈕來查看應用程序在設備或瀏覽中的樣子。
8. (可選)通過選擇狀態欄(文檔窗口的右下角)中窗口尺寸菜單的不同選項你可以試試不同的應用程序窗口尺寸。窗口尺寸菜單讓你查看當前頁面在不同設備中的樣子(如智能手機和平板電腦)。
(圖2.窗口尺寸菜單)
再次說明，打包你的應用程序你不需要做任何事。這一步只是讓你看看在不同設備中應用程序看起來如何。
配置應用程序框架
在Dreamweaver中打包web應用程序要求iOS SDK(對于iOS設備)和Android SDK(對于Android設備)。除其它事項外，iOS和Android SDK讓你運行設備模擬機。設備模擬機讓你看看在移動設備上你的應用程序看起來像什么，而無需在實際設備上測試應用程序。
只是要清楚，你不需要兩個SDK都打包web應用程序。如果你想創建iOS設備的應用程序你只需要用iOS SDK來打包，或者你想創建Android設備的應用程序你只需要用Android SDK來打包。
Android
1. 選擇站點->移動應用程序->配置應用程序框架。
2. 點擊簡易安裝。然后選擇一個Android SDK安裝位置。位置可以是你電腦上的任意位置(盡管Adobe建議不要安裝SDK到你的站點目錄)。
注意：如果簡易安裝失敗，請查看技術說明90408。
注意：安裝需要一點時間，所以需要耐心等待。
(圖3.展示了Android SDK路徑的配置應用程序框架對話框(Windows下))
3.安裝完成之后，點擊保存來關閉配置應用程序框架對話框。
iOS
iOS SDK安裝比Android SDK安裝有點更復雜。首先你需要從蘋果iOS開發中心手動下載和安裝SDK。然后你需要從Dreamweaver內部指向SDK。再次說明，此功能僅在Mac OS X 10.6.x和以上版本支持。
1. 選擇站點->移動應用程序->配置應用程序框架。
2. 在配置應用程序框架對話框中點擊蘋果iOS開發中心鏈接。
3. 在蘋果網站上，點擊登錄按鈕并使用你的蘋果帳戶來登錄蘋果iOS開發中心。如果你還不是注冊用戶，你可以免費創建一個帳戶。
注意：在本文發表時，所有步驟的***描述鏈接路徑都在蘋果網站上。但是，Adobe不能控制整個蘋果網站，所以如果蘋果做了修改，這些說明可能會稍有不正確。
4. 一旦你登錄后，點擊下載。下載鏈接將把你帶到頁面底部。
5. 點擊下載Xcode 4按鈕來獲取Xcode 4或iOS SDK 4.3下載。
6. ***，下載***版的Xcode和iOS SDK。再次說明，Adobe不能控制整個蘋果網站或它的軟件更新。你只需要確保下載***版Xcode和iOS SDK。
7. 一旦下載完成，在電腦上雙擊安裝程序。Adobe建議你安裝SDK到默認位置：OS X 10.6.x->Developer。
8. 安裝完成后，回到Dreamweaver。配置應用程序框架對話框應該依然是打開的。
9. 點擊iOS開發者工具路徑文本框邊上的文件圖標。瀏覽到OS X 10.6.x->Developer文件夾。
(圖4.在蘋果個人電腦上的顯示了Android和iOS SDK路徑的配置應用程序對話框)
10.一旦鍵入了iOS SDK路徑，點擊保存來關閉配置應用程序框架對話框。
指定本機應用程序設置
接下來你將為你的移動應用程序指定設置。這是打包和測試之前的***一步。
注意：此功能不支持高ASCII或雙字節字符。
1. 確保Meridien站點在文件面板中仍然是打開的。為了讓你打包它，站點必須是打開的。
注意：被打包的站點可以僅包含HTML5、CSS、JavaScript，以及圖片文件。你不能打包基于動態服務器的頁面。如PHP頁面。
2. 選擇站點->移動應用程序->應用程序設置。
3. 在本機應用程序設置對話框的綁定ID文本框中，請定應用程序的綁定ID。綁定ID被app store內部用來識別你的應用程序，采用com.company.appname格式。
用你自己的公司代替company，用你自己的應用程序名代替appname，小心不要刪除任何句點。Dreamweaver用你的站點名稱自動填充appname，但如果你想的話，你可以修改這個值。
綁定ID對應用程序的公共用戶是不可見的。
4. 接下來，輸入應用程序名稱(再次說明，Dreamweaver用站點名稱為你自動填充它)。應用程序作者姓名，以及應用程序的版本號。
5. 點擊應用程序圖標PNG文本框旁邊的文件夾圖標并瀏覽到meridien_mobile站點文件夾的img文件夾。
6. 選擇icon.png文件并點擊OK。該圖片是應用程序將使用的作為在移動設備上的應用程序圖標。
注意：在站點層次包含源圖標圖片文件并不是絕對必須的;實際上你可以選擇系統中的任意PNG圖片。Dreamweaver將進行適當的圖片縮放、命名，和復制文件。
7. 如果你在運行10.6.x或以上的蘋果個人電腦上，你也有指定啟動界面圖片的選項。點擊啟動屏幕PNG文本框旁邊的文件夾圖標。瀏覽到meridien_mobile站點文件夾的img文件夾，選擇splash.png文件，并點擊OK。
注意：在站點層次包含源啟動屏幕圖片文件并不是絕對必須的;實際上你可以選擇系統中的任意PNG圖片。Dreamweaver將進行適當的圖片縮放、命名，和復制文件。
8. 在目錄路徑文本框中，指定你想保存打包的應用程序的位置。如本教程，我將保存到我的桌面。
9. 在選擇目標操作系統版本下，選擇你想構建應用程序的Android或iOS(iPhone/iPod/iPad)版本。對于本教程，你可以只接受默認設置。
注意：這些菜單將根據你之前安裝的SDK內容預先填入。
(圖5.完成的本機應用程序配置對話框(Windows下))
(圖6.完成的本機應用程序配置對話框(Mac OS下))
10. 點擊保存來保存你的設置。
注意：點擊保存時，Dreamweaver會添加phonegap.js文件到你的站點，該文件是移動應用程序的必需部分，并可以使用PhoneGap APIs的代碼提示功能。(你可能需要點擊文件面板的刷新按鈕來查看該新文件)。
生成和模擬移動應用程序
現在你已經準備好生成和模擬應用程序了。Android和iOS的SDK都提供了設備模擬機，因此你可以正確地在自己的電腦上測試移動應用程序。
1. 選擇站點->移動應用程序->生成和模擬->Android或iOS。
注意：如果你想不經過模擬來直接生成應用程序，你也可以只選擇站點->移動應用程序->生成->Android或iOS。
適當的模擬機開始運行并向你顯示在現實設備中應用程序的樣子。你可以在模擬機中與應用程序交互。
注意：Android模擬機加載需要一個非常長的時間，所以需要耐心等待。在應用程序已生成完成或安裝到模擬器時你會收到一條成功消息。如果生成或模擬機進程失敗，Dreamweaver在應用程序目標文件夾添加生成日志。(目標文件夾是你在本機應用程序設置對話框的目標路徑文本框中指定的文件夾)。生成日志會提供關于為什么生成失敗的信息。
下一步是什么?
不久，我們將發布教你如何創建剛才打包的應用程序教程的鏈接，以及教你如何部署應用程序到不同的移動設備的教程鏈接。
與此同時，你可以查詢以下資源來獲取更多信息：
如果你發現其他有用的鏈接，請在本教程評論部分回復他們。
要求
必備知識：沒有，但是基礎的Dreamweaver站點建立、HTML、CSS、以及移動應用程序如何在智能手機和平板電腦上工作是有好處的。
必需產品：Dreamweaver (試用下載)
范例文件：meridien_mobile.zip meridien_mobile.zip (720.02 KB)
用戶級別：全部
作者：
Jon Michael Varese
原文地址：
http://www.adobe.com/cn/devnet/dreamweaver/articles/packaging-web-applications-as-mobile-apps.html
