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

標籤：接受   五步   phonegap   不可點擊   oid   blog   效果   產生   hone   

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的檔案夾，直接點擊儲存就能夠了。最讓人無法接受的是你點擊儲存時沒有不論什麼提示的，事實上這個時候已經儲存成功了，第一次樓主表示中槍倒地。

            

         ③ 建立網站裡的project，事實上也不是叫做project了。只是是我的一個習慣罷了。

              檔案-->建立-->所看到的：

                  

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

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

                       

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

                                                              

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

                                       

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

            

                     點擊裡面的藍色字型。進入還有一個網頁會出現下列注冊圖樣：

                                              

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

 

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

                                    

                    別激動，距離成功的步伐已經非常近了。這裡出現這個介面表示載入並沒有完成，只是你也不要等了，CS6.0不會幫你載入，這個時候呢。就須要手工來操作了，直接點擊底部的：又一次產生應用程式也就是重新整理的那個button，只是讓人想不通的是，它會從底部網上傳入。我一直都特鬱悶這是為什麼！

這個能夠是第十萬還有一個為什麼嗎？。只是總算在最後曲曲折折的一路走了過來。

讓我們來看看載入完的樣式是什麼樣的：

                                    

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

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

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

             點擊第一個箭頭button即可了。其它的後期調試再用。

載入完之後會是顯示範範例如以下介面：

                                    

              由於在Eclipse裡面已經建立了AVD模擬器，所以在這裡它會自己主動尋找到，只是也能夠在以下的AVD管理器裡面建立。這裡就不在介紹了。以下我們啟動模擬器，樓主沒有測試模擬器啟動的時候。CS6是不是會直接安裝APK執行，這個各位能夠去嘗試下。 畢竟非常多調試須要在真機上面做的。

 

         ⑧ 假設啟動完之後沒有在AVD模擬器裡面產生中的軟體的話。這個時候中的啟動button時不可點擊的，就須要關閉掉模擬器。在又一次啟動。普通情況下第二次啟動AVD模擬器就會有以下這個軟體：

                                                                                 

                     執行圖：

                                                                                

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

這裡就能夠改動程式的版本號碼。表徵圖，包名之類的資訊，只是看起來真是不爽。也能夠在網站的根資料夾下去用其它工具去改動。

 

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

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