使用PhoneGap和Dreamweaver打包Web應(yīng)用為移動(dòng)程序

作者：Pilihou 2012-03-09 16:25:09

當(dāng)前Dreamwearver CS 5.5整合了PhoneGap，一個(gè)開源的構(gòu)建移動(dòng)應(yīng)用程序的開發(fā)框架。兩者之間的集成是無縫的，而且使用它的功能你并不需要知道PhoneGap的任何細(xì)節(jié)。

Dreamweaver / PhoneGap的集成讓你就像部署基于Android和iOS移動(dòng)設(shè)備的原生應(yīng)用程序一樣快速部署你的web應(yīng)用程序。(原生應(yīng)用程序是一種編寫來運(yùn)行在特定操作系統(tǒng)或設(shè)備上的應(yīng)用程序)。PhoneGap框架的作用像web應(yīng)用程序和移動(dòng)設(shè)備之間的橋梁。即便你不熟悉像Objective-C或 Cocoa之類的編碼語言。它也可以幫助你將web應(yīng)用程序打包進(jìn)移動(dòng)應(yīng)用程序。

本教程將向你展示如何打包現(xiàn)在有的在Dreamweaver中建立的移動(dòng)應(yīng)用程序。它不會(huì)向你展示如何從頭構(gòu)建該應(yīng)用程序。也不會(huì)告訴如何在移動(dòng)設(shè)備中部署打包好的應(yīng)用程序。這些議題將在稍后公布其他教程中進(jìn)行講解。

注意：你用 Dreamweaver打包的這個(gè)移動(dòng)應(yīng)用程序僅以調(diào)試為目的。該應(yīng)用程序?qū)⒃贏ndroid和iOS模擬機(jī)上運(yùn)行，以及遷移到你個(gè)人的移動(dòng)設(shè)備上運(yùn)行。但是你不能上傳調(diào)試版移動(dòng)應(yīng)用程序到蘋果或Android商店。為了上傳iOS或Android應(yīng)用程序，你必須采用Dreamweaver之外的額外步驟來為他們簽名。關(guān)于上傳應(yīng)用程序到蘋果或Android商店的更多信息，請(qǐng)查看Android文檔，或在蘋果iOS置備門戶網(wǎng)站的程序用戶指南。(在你能訪問蘋果iOS置備門戶網(wǎng)站之前你必須注冊(cè)蘋果開發(fā)者計(jì)劃[免費(fèi)] ，并參加iPhone開發(fā)者計(jì)劃[年費(fèi)])。

系統(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)用程序站點(diǎn)

本教程使用示例應(yīng)用程序來演示原生應(yīng)用程序打包。應(yīng)用程序是為了Meridien 24/7，這是一個(gè)讓你在移動(dòng)設(shè)備上找到當(dāng)?shù)夭宛^的虛擬的原生應(yīng)用程序。

在你開始學(xué)習(xí)如何打包應(yīng)用程序之前。你必須安裝示例文件和建立Dreamweaver站點(diǎn)。

1. 下載示例壓縮包meridien_mobile.zip，解壓縮文件并在電腦上保存它。我喜歡把我所有的Dreamweaver站點(diǎn)保存在一個(gè)叫做Sites的主要文件夾，它位于我Windows的C盤上。

2. 運(yùn)行Dreamweaver，并選擇站點(diǎn)->新建站點(diǎn)…

3. 在站點(diǎn)設(shè)置對(duì)話框的站點(diǎn)名稱文本框中，輸入新站點(diǎn)名稱為：Meridien。

4. 在本地站點(diǎn)文件夾文本框中，輸入你在步驟1中保存在你電腦上的meridien_mobile文件夾的路徑。你可以點(diǎn)擊文本框右側(cè)的文件夾圖標(biāo)來瀏覽到meridien_mobile文件夾。

5. 完成時(shí)，單擊保存來關(guān)閉站點(diǎn)設(shè)置對(duì)話框。

新站點(diǎn)的文件填充了Dreamweaver文件面板(如圖1)。

(圖1.帶有新的Meridien 24/7站點(diǎn)文件的Dreamweaver文件面板)

meridien_mobile文件夾包含web應(yīng)用程序的所有文件，包括必須的JavaScript，CSS，以及圖片文件。

6. 在文件面板中雙擊index.html來在文檔窗口中打開它。實(shí)際上打包你的應(yīng)用程序不需要打開index文件;我們只是打開文件以便你能看到應(yīng)用程序的樣子，以及它是如何工作的。

7. 在文檔窗口中你不會(huì)看到更多東西，因?yàn)镈reamweaver默認(rèn)情況下不會(huì)呈現(xiàn)實(shí)時(shí)應(yīng)用程序。點(diǎn)擊文檔工具欄的實(shí)時(shí)視圖按鈕來查看應(yīng)用程序在設(shè)備或?yàn)g覽中的樣子。

8. (可選)通過選擇狀態(tài)欄(文檔窗口的右下角)中窗口尺寸菜單的不同選項(xiàng)你可以試試不同的應(yīng)用程序窗口尺寸。窗口尺寸菜單讓你查看當(dāng)前頁面在不同設(shè)備中的樣子(如智能手機(jī)和平板電腦)。

(圖2.窗口尺寸菜單)

再次說明，打包你的應(yīng)用程序你不需要做任何事。這一步只是讓你看看在不同設(shè)備中應(yīng)用程序看起來如何。

配置應(yīng)用程序框架

在Dreamweaver中打包web應(yīng)用程序要求iOS SDK(對(duì)于iOS設(shè)備)和Android SDK(對(duì)于Android設(shè)備)。除其它事項(xiàng)外，iOS和Android SDK讓你運(yùn)行設(shè)備模擬機(jī)。設(shè)備模擬機(jī)讓你看看在移動(dòng)設(shè)備上你的應(yīng)用程序看起來像什么，而無需在實(shí)際設(shè)備上測(cè)試應(yīng)用程序。

只是要清楚，你不需要兩個(gè)SDK都打包web應(yīng)用程序。如果你想創(chuàng)建iOS設(shè)備的應(yīng)用程序你只需要用iOS SDK來打包，或者你想創(chuàng)建Android設(shè)備的應(yīng)用程序你只需要用Android SDK來打包。

Android

1. 選擇站點(diǎn)->移動(dòng)應(yīng)用程序->配置應(yīng)用程序框架。

2. 點(diǎn)擊簡(jiǎn)易安裝。然后選擇一個(gè)Android SDK安裝位置。位置可以是你電腦上的任意位置(盡管Adobe建議不要安裝SDK到你的站點(diǎn)目錄)。

注意：如果簡(jiǎn)易安裝失敗，請(qǐng)查看技術(shù)說明90408。

注意：安裝需要一點(diǎn)時(shí)間，所以需要耐心等待。

(圖3.展示了Android SDK路徑的配置應(yīng)用程序框架對(duì)話框(Windows下))

3.安裝完成之后，點(diǎn)擊保存來關(guān)閉配置應(yīng)用程序框架對(duì)話框。

iOS

iOS SDK安裝比Android SDK安裝有點(diǎn)更復(fù)雜。首先你需要從蘋果iOS開發(fā)中心手動(dòng)下載和安裝SDK。然后你需要從Dreamweaver內(nèi)部指向SDK。再次說明，此功能僅在Mac OS X 10.6.x和以上版本支持。

1. 選擇站點(diǎn)->移動(dòng)應(yīng)用程序->配置應(yīng)用程序框架。

2. 在配置應(yīng)用程序框架對(duì)話框中點(diǎn)擊蘋果iOS開發(fā)中心鏈接。

3. 在蘋果網(wǎng)站上，點(diǎn)擊登錄按鈕并使用你的蘋果帳戶來登錄蘋果iOS開發(fā)中心。如果你還不是注冊(cè)用戶，你可以免費(fèi)創(chuàng)建一個(gè)帳戶。

注意：在本文發(fā)表時(shí)，所有步驟的***描述鏈接路徑都在蘋果網(wǎng)站上。但是，Adobe不能控制整個(gè)蘋果網(wǎng)站，所以如果蘋果做了修改，這些說明可能會(huì)稍有不正確。

4. 一旦你登錄后，點(diǎn)擊下載。下載鏈接將把你帶到頁面底部。

5. 點(diǎn)擊下載Xcode 4按鈕來獲取Xcode 4或iOS SDK 4.3下載。

6. ***，下載***版的Xcode和iOS SDK。再次說明，Adobe不能控制整個(gè)蘋果網(wǎng)站或它的軟件更新。你只需要確保下載***版Xcode和iOS SDK。

7. 一旦下載完成，在電腦上雙擊安裝程序。Adobe建議你安裝SDK到默認(rèn)位置：OS X 10.6.x->Developer。

8. 安裝完成后，回到Dreamweaver。配置應(yīng)用程序框架對(duì)話框應(yīng)該依然是打開的。

9. 點(diǎn)擊iOS開發(fā)者工具路徑文本框邊上的文件圖標(biāo)。瀏覽到OS X 10.6.x->Developer文件夾。

(圖4.在蘋果個(gè)人電腦上的顯示了Android和iOS SDK路徑的配置應(yīng)用程序?qū)υ捒?

10.一旦鍵入了iOS SDK路徑，點(diǎn)擊保存來關(guān)閉配置應(yīng)用程序框架對(duì)話框。

指定本機(jī)應(yīng)用程序設(shè)置

接下來你將為你的移動(dòng)應(yīng)用程序指定設(shè)置。這是打包和測(cè)試之前的***一步。

注意：此功能不支持高ASCII或雙字節(jié)字符。

1. 確保Meridien站點(diǎn)在文件面板中仍然是打開的。為了讓你打包它，站點(diǎn)必須是打開的。

注意：被打包的站點(diǎn)可以僅包含HTML5、CSS、JavaScript，以及圖片文件。你不能打包基于動(dòng)態(tài)服務(wù)器的頁面。如PHP頁面。

2. 選擇站點(diǎn)->移動(dòng)應(yīng)用程序->應(yīng)用程序設(shè)置。

3. 在本機(jī)應(yīng)用程序設(shè)置對(duì)話框的綁定ID文本框中，請(qǐng)定應(yīng)用程序的綁定ID。綁定ID被app store內(nèi)部用來識(shí)別你的應(yīng)用程序，采用com.company.appname格式。

用你自己的公司代替company，用你自己的應(yīng)用程序名代替appname，小心不要?jiǎng)h除任何句點(diǎn)。Dreamweaver用你的站點(diǎn)名稱自動(dòng)填充appname，但如果你想的話，你可以修改這個(gè)值。

綁定ID對(duì)應(yīng)用程序的公共用戶是不可見的。

4. 接下來，輸入應(yīng)用程序名稱(再次說明，Dreamweaver用站點(diǎn)名稱為你自動(dòng)填充它)。應(yīng)用程序作者姓名，以及應(yīng)用程序的版本號(hào)。

5. 點(diǎn)擊應(yīng)用程序圖標(biāo)PNG文本框旁邊的文件夾圖標(biāo)并瀏覽到meridien_mobile站點(diǎn)文件夾的img文件夾。

6. 選擇icon.png文件并點(diǎn)擊OK。該圖片是應(yīng)用程序?qū)⑹褂玫淖鳛樵谝苿?dòng)設(shè)備上的應(yīng)用程序圖標(biāo)。

注意：在站點(diǎn)層次包含源圖標(biāo)圖片文件并不是絕對(duì)必須的;實(shí)際上你可以選擇系統(tǒng)中的任意PNG圖片。Dreamweaver將進(jìn)行適當(dāng)?shù)膱D片縮放、命名，和復(fù)制文件。

7. 如果你在運(yùn)行10.6.x或以上的蘋果個(gè)人電腦上，你也有指定啟動(dòng)界面圖片的選項(xiàng)。點(diǎn)擊啟動(dòng)屏幕PNG文本框旁邊的文件夾圖標(biāo)。瀏覽到meridien_mobile站點(diǎn)文件夾的img文件夾，選擇splash.png文件，并點(diǎn)擊OK。

注意：在站點(diǎn)層次包含源啟動(dòng)屏幕圖片文件并不是絕對(duì)必須的;實(shí)際上你可以選擇系統(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)版本。對(duì)于本教程，你可以只接受默認(rèn)設(shè)置。

注意：這些菜單將根據(jù)你之前安裝的SDK內(nèi)容預(yù)先填入。

(圖5.完成的本機(jī)應(yīng)用程序配置對(duì)話框(Windows下))

(圖6.完成的本機(jī)應(yīng)用程序配置對(duì)話框(Mac OS下))

10. 點(diǎn)擊保存來保存你的設(shè)置。

注意：點(diǎn)擊保存時(shí)，Dreamweaver會(huì)添加phonegap.js文件到你的站點(diǎn)，該文件是移動(dòng)應(yīng)用程序的必需部分，并可以使用PhoneGap APIs的代碼提示功能。(你可能需要點(diǎn)擊文件面板的刷新按鈕來查看該新文件)。

生成和模擬移動(dòng)應(yīng)用程序

現(xiàn)在你已經(jīng)準(zhǔn)備好生成和模擬應(yīng)用程序了。Android和iOS的SDK都提供了設(shè)備模擬機(jī)，因此你可以正確地在自己的電腦上測(cè)試移動(dòng)應(yīng)用程序。

1. 選擇站點(diǎn)->移動(dòng)應(yīng)用程序->生成和模擬->Android或iOS。

注意：如果你想不經(jīng)過模擬來直接生成應(yīng)用程序，你也可以只選擇站點(diǎn)->移動(dòng)應(yīng)用程序->生成->Android或iOS。

適當(dāng)?shù)哪M機(jī)開始運(yùn)行并向你顯示在現(xiàn)實(shí)設(shè)備中應(yīng)用程序的樣子。你可以在模擬機(jī)中與應(yīng)用程序交互。

注意：Android模擬機(jī)加載需要一個(gè)非常長的時(shí)間，所以需要耐心等待。在應(yīng)用程序已生成完成或安裝到模擬器時(shí)你會(huì)收到一條成功消息。如果生成或模擬機(jī)進(jìn)程失敗，Dreamweaver在應(yīng)用程序目標(biāo)文件夾添加生成日志。(目標(biāo)文件夾是你在本機(jī)應(yīng)用程序設(shè)置對(duì)話框的目標(biāo)路徑文本框中指定的文件夾)。生成日志會(huì)提供關(guān)于為什么生成失敗的信息。

下一步是什么?

不久，我們將發(fā)布教你如何創(chuàng)建剛才打包的應(yīng)用程序教程的鏈接，以及教你如何部署應(yīng)用程序到不同的移動(dòng)設(shè)備的教程鏈接。

與此同時(shí)，你可以查詢以下資源來獲取更多信息：