Dreamweaver 5.5、jQuery和PhoneGap開發移動應用

作者：藍山咖啡 2012-03-07 14:29:01

在當前技術形勢之下學什么技術的“性價比”最高? 很多人一致認同的答案是：JavaScript。性=用途廣泛性(跨前后端與各種平臺)，價=學習的代價(耗費時間與難易程度)。所以是很值得投資時間學習的。尤其是有志于投身IT行業的在校學生，學習Javascript及其相關框架是很好的選擇。

開發環境的搭建

我們知道一般情況下使用Objective-C開發iPhone平臺的應用,用Java開發Android平臺的應用，用Silverlight開發Windows Phone平臺的應用，但如果你想開發一個在以上的平臺都可以運行的應用，你是不是得學三種語言?那樣生活豈不是很慘?

還好，我們有HTML5+jQuery+PhoneGap框架，可以讓我們只學一種技術來開發一個在所有手機平臺、平板電腦、包括各種PC平臺都可以運行的軟件!

本文首先介紹開發環境的搭建和程序的調試。

Dreamweaver 5.5 下載地址：

http://www.oyksoft.com/soft/13591.html

Adobe 在2011年底推出的Dreamweaver 5.5 可以用兩個字來總結：給力。安裝后，里面的功能確實令人眼前一亮!我們來看看其中幾個很猛的功能：

1.集成JQuery 和 PhoneGap開發環境：

安裝后，Dreamweaver就自帶了JQuery和PhoneGap,這樣就省去你很多時間分別去下載和繁瑣配置。

你可以在在“插入”菜單里找到很多的JQuery 控件庫，可以很方便的插入到代碼或設計視圖里。

2.多屏幕預覽面板

可以如上圖所示實時更改設計視圖的尺寸和方向，以便檢查開發的應用在各種尺寸下的顯示效果。

3.可自動聯網下載Android和iOs 的SDK,并幫你完成配置工作。

也就是說，只要安裝了Dreamweaver,這些SDK都可以順便幫你下載并配置安裝好。因為iOs SDK不支持在Windows運行，所以你可以在Windows系統里使用Android模擬器實時模擬你寫的應用，而在Mac機器上，你可以同時使用Android和iPhone的模擬器來調試你的應用!

我使用的是Windows, 打開“站點/移動應用程序/配置應用程序框架”，可看到如下界面，

點擊“簡易安裝”按鈕就可以自動聯網并下載Android SDK了。

如果你已經安裝好Android的SDK，那么，只需告訴Dreamweaver SDK的路徑在哪就可以了。

順便說一下，如果你自己下載SDK，以Android系統為例，你需要下載如下內容：

1.Java JDK

下載地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html

2.Android SDK工具

下載地址：http://developer.Android.com/sdk/

安裝后，點擊Dreamweaver內的“站點/移動應用程序/生成和模擬”就可以啟動模擬器來調試你開發的應用，如下圖所示：

OK, 開發環境搭建完成了，基本沒有很多的配置內容，安裝完Dreamweaver就搞定一切!我們來動手檢驗下所取得的成果吧。

我們按以下步驟，幾分鐘內就可以測試一個很簡單的應用：

一. 首先我們新建一個站點

點擊菜單中的“站點/新建站點”

輸入站點名稱，選擇一個文件夾作為站點存放的路徑。

二.新建一個JQuery+PhoneGap的應用。方法如下圖所示:

點擊“文件/新建”，選擇“示例中的頁/Mobile起始頁”，選擇”JQuery Mobile(PhoneGap)”

文檔類型選擇“HTML5”

點擊“創建”，Dreamweaver自動幫你創建了一個應用開發的模版。

把這個模版保存在剛才創建的站點中，并命名為index.html

不可思議的事情發生了，Dreamweaver自動把JQuery和PhoneGap框架所需要的所有Javascript文件全部拷貝到了該站點中!

下面我們就可以開始看看這個index.html在手機模擬器中是什么樣子了。

調試應用程序變得非常的容易：

可以在已安裝的瀏覽器中預覽;

可以選擇在Device Central 內預覽;

如下圖所示：一個簡單的html頁面在模擬器中搖身一變，成了很專業的手機應用程序。這些都得益與JQuery Mobile框架內置的控件。

讓我們看看在Android模擬器中是什么樣子的吧：

點擊Dreamweaver內的“站點/移動應用程序/生成和模擬”就可以啟動模擬器來加載這個應用程序：

最后提示生成成功：

更不可思議的事情發生了!Dreamweaver自動把你的應用打包成可以在真實手機上安裝的安裝包,并保存在桌面上!你可以在相關文件夾內的Bin文件夾中找到 “應用程序名稱-debug.apk”文件，這個就是安裝包了。你可以把你安卓平臺的手機連接電腦的USB口(充電器去掉充電器的頭就是數據線了)，把這個文件拷貝到你手機的SD卡里，就可以點擊安裝。

這里需要說明一下：這個文件是debug模式的文件，只能通過SD卡安裝在自己手機上自娛自樂，如果需要上傳到應用商店，你還需要給這個文件簽名。

非常的遺憾，目前Dreamweaver還無法實現自動簽名，Dreamweaver似乎也意識到這一點，生成的安裝包是支持Eclipse導入的。你可以用Eclipse把安裝包導入，重新導出一個簽名的安裝包即可。

這時候，你可以在模擬器找到你預先定義的圖標，用鼠標點擊模擬器進入你的應用了。