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