開發(fā)環(huán)境的搭建

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

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

本文首先介紹開發(fā)環(huán)境的搭建和程序的調(diào)試。

Dreamweaver 5.5 下載地址：

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

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

1.集成JQuery 和 PhoneGap開發(fā)環(huán)境：

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

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

2.多屏幕預覽面板

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

3.可自動聯(lián)網(wǎng)下載Android和iOs 的SDK,并幫你完成配置工作。

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

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

點擊“簡易安裝”按鈕就可以自動聯(lián)網(wǎng)并下載Android SDK了。

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

順便說一下，如果你自己下載SDK，以Android系統(tǒng)為例，你需要下載如下內(nèi)容：

1.Java JDK

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

2.Android SDK工具

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

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

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

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

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

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

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

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

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

文檔類型選擇“HTML5”

點擊“創(chuàng)建”，Dreamweaver自動幫你創(chuàng)建了一個應用開發(fā)的模版。

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

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

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

調(diào)試應用程序變得非常的容易：

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

可以選擇在Device Central 內(nèi)預覽;

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

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

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

最后提示生成成功：

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

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

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

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

注：手工安裝apk到模擬器的方法：

把生成的apk拷貝到 C:Program FilesAndroidandroid-sdkplatform-tools 目錄下。

點擊開始/運行，輸入CMD進入DOS，一路CD到C:Program FilesAndroidandroid-sdkplatform-tools

輸入Adb install 你的應用名稱.apk，如下圖所示：