關於DreamWeaver CS6.0 + PhoneGap 之移動開發環境搭建

標籤：android   style   blog   http   ar   strong   sp   檔案   on   

Html5已經逆襲了移動開發，近期有幸布置PhoneGap的環境搭載，其實本人並不會Html以及JS或者JQuery，為了順應Html5的風暴，還是稍稍的玩轉了一下。CS5.5搭建相對CS6.0來說比較人性化，後者基於新的模式，剛開始上手的確有點困頓，不過呢，今天我們就來瞭解下如何在CS6.0上順利的玩轉PhoneGap。

 

 

             關於Android的SDK的開發環境就不在這裡介紹了，各位百度搭建吧。配置好了SDK之後還是建議在Eclipse中建立AVD模擬器，並首次運行下。DreamWeaver畢竟不是專業做這個的，先期肯定會有一點不如意的東西。但是對於強大的Html5的效果來說，這點小Bug都不是問題。

 

       准工作要做好，不過這裡基本上不用什麼：

       1> DreamWeaver CS6.0

       

        ①建立一個網站

                     

           ②講設計器模式換成行動裝置 App程式模式

                     ------->

                 在CS6.0的左邊會出現一個欄目框：

                         

                   上面的Android哪裡選擇你的Android SDK的目錄，直接點擊儲存就可以了，最讓人無法接受的是你點擊儲存時沒有任何提示的，其實這個時候已經儲存成功了，第一次樓主表示中槍倒地。

            

         ③ 建立網站裡的工程，其實也不是叫做工程了，不過是我的一個習慣罷了。

              檔案-->建立-->：

                  

                                 點擊建立，會到儲存的介面，把中間欄目裡的檔案名稱改成index.html，這個看個人喜好吧。

        ④ 下面選擇  網站-->PhoneGap Build服務-->PhoneGap Build 服務，左邊的欄目回進入如下框體中：

                       

                   這裡輸入，你註冊DreamWeaver CS6.0的時候所用的賬戶名跟密碼，登陸成功的直接跳過第五步，出現如下介面的則說明你沒有PhoneGap Build憑據，需要去註冊：

                                                              

        ⑤ 下面就是來註冊PhoneGap Build憑據的步驟，在上述登陸框體中的，右上方有一個Menu小表徵圖，點擊它，然後選擇裡面的協助，程式會開啟一個網址，在這個網址中：    

                                       

                    選擇裡面的：建立PhoneGap Build服務賬戶

            

                     點擊裡面的藍色字型，進入另一個網頁會出現下列註冊圖樣：

                                              

                     點擊第一個with Adobe ID，直接登入你註冊DreamWeaver CS6.0的這個賬戶名跟密碼就OK了，登入完之後PhoneGap Build憑證就註冊成功，返回繼續搭建環境。

 

        ⑥ 登入進去之後會是這個介面樣式：

                                    

                    別激動，距離成功的步伐已經很近了，這裡出現這個介面表示載入並沒有完畢，不過你也不要等了，CS6.0不會幫你載入，這個時候呢，就需要手工來操作了，直接點擊底部的：重建應用程式也就是重新整理的那個按鈕，不過讓人想不通的是，它會從底部網上載入，我一直都特鬱悶這是為什麼！這個可以是第十萬另一個為什麼嗎？，不過總算在最後曲曲折折的一路走了過來。讓我們來看看載入完的樣式是什麼樣的：

                                    

        ⑦ 1、第一個指向右方的箭頭，是在程式裡啟動AVD模擬器。

             2、掃描二維碼，幹什麼用呢？你猜。

             3、第三個指向下方的箭頭，是外部載入儲存的APK檔案。

             點擊第一個箭頭按鈕就行了，其他的後期調試再用。載入完之後會是顯示如下介面：

                                    

              因為在Eclipse裡面已經建立了AVD模擬器，所以在這裡它會自動尋找到，不過也可以在下面的AVD管理器裡面建立，這裡就不在介紹了。下面我們啟動模擬器，樓主沒有測試模擬器啟動的時候，CS6是不是會直接安裝APK運行，這個各位可以去嘗試下， 畢竟很多調試需要在真機上面做的。

 

         ⑧ 如果啟動完之後沒有在AVD模擬器裡面產生中的軟體的話，這個時候中的啟動按鈕時不可點擊的，就需要關閉掉模擬器，在重新啟動，一般情況下第二次啟動AVD模擬器就會有下面這個軟體：

                                                                                 

                     運行圖：

                                                                                

        ⑨ 運行成功之後，會在網站裡面產生一個 ProjectSettings 檔案，在DreamWeaver中開啟它如下：

這裡就可以修改程式的版本，表徵圖，包名之類的資訊，不過看起來真是不爽，也可以在網站的根目錄下去用其他工具去修改。

 

       搭建過程順利完工了，預祝各位開發順利！

關於DreamWeaver CS6.0 + PhoneGap 之移動開發環境搭建