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

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

還好，我們有HTML5+jQuery+PhoneGap框架，可以讓我們只學(xué)一種技術(shù)來開發(fā)一個(gè)在所有手機(jī)平臺(tái)、平板電腦、包括各種PC平臺(tái)都可以運(yùn)行的軟件!

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

Dreamweaver 5.5 下載地址：

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

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

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

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

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

2.多屏幕預(yù)覽面板

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

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

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

我使用的是Windows, 打開“站點(diǎn)/移動(dòng)應(yīng)用程序/配置應(yīng)用程序框架”，可看到如下界面，

點(diǎn)擊“簡易安裝”按鈕就可以自動(dòng)聯(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/

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

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

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

一. 首先我們新建一個(gè)站點(diǎn)

點(diǎn)擊菜單中的“站點(diǎn)/新建站點(diǎn)”

輸入站點(diǎn)名稱，選擇一個(gè)文件夾作為站點(diǎn)存放的路徑。

二.新建一個(gè)JQuery+PhoneGap的應(yīng)用。方法如下圖所示:

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

文檔類型選擇“HTML5”

點(diǎn)擊“創(chuàng)建”，Dreamweaver自動(dòng)幫你創(chuàng)建了一個(gè)應(yīng)用開發(fā)的模版。

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

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

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

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

可以在已安裝的瀏覽器中預(yù)覽;

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

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

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

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

最后提示生成成功：

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

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

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

這時(shí)候，你可以在模擬器找到你預(yù)先定義的圖標(biāo)，用鼠標(biāo)點(diǎn)擊模擬器進(jìn)入你的應(yīng)用了。

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

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

點(diǎn)擊開始/運(yùn)行，輸入CMD進(jìn)入DOS，一路CD到C:Program FilesAndroidandroid-sdkplatform-tools

輸入Adb install 你的應(yīng)用名稱.apk，如下圖所示：