ionic app 創建和運行調試


1.創建App

前提:已安裝ionic和cordova環境,具體可看教程:http://www.runoob.com/ionic/ionic-tutorial.html
當ionic所需環境安裝好之后,可以在cmd命令行中生成ionic項目,如下:

$ ionic start myApp tabs

執行遇到如下兩個選項,分別輸入y和n,如下:

生成之后的項目文件在C盤個人文件夾里面。

注:這個過程需要一定時間,不過有時進度會卡住或者失敗,這時可以刪除文件,重新執行!

 

2.添加平台

后續命令需要在項目目錄下或其子目錄下運行(建議:可以直接用VS code打開項目,然后Ctrl+` 打開終端,在終端上執行命令

$ cd myApp

給你的App添加目標平台。我們將會添加'ios'和'android'平台,並確保他們保存在了config.xml

$ ionic cordova platform add ios --save
$ ionic cordova platform add android --save

注:如果要指定平台版本,就ionic cordova platfrom add android@5.1.1,當然最好是不指定cordova-android的版本,它會默認添加最新版本,高版本是向下兼容的。那這邊指定的cordova-android的版本又有什么用呢?請看另一篇博文:http://www.cnblogs.com/Caiyilong/p/8568747.html

檢查你當前平台設置狀況:

$ ionic cordova platform ls

add平台的命令將在 platforms目錄下生成對應的android或ios文件夾,當然,如果要刪除就將add改成remove

更詳細教程請參考cordova中文網:http://cordova.axuer.com/docs/zh-cn/latest/

 

3.運行項目

運行項目分3種類型:瀏覽器模擬器真機

ios項目需要運行在mac系統上,所以這里只討論android項目。

3.1瀏覽器

在項目目錄下執行如下命令:

$ ionic cordova run browser

瀏覽器會彈出如下結果:

 

 

3.2模擬器

3.2.1下載安裝Android SDK

 請看另一篇博文:http://www.cnblogs.com/Caiyilong/p/8559394.html

3.2.2設置sdk環境變量

  為了使功能正常使用Cordova的CLI工具需要設置一些環境變量

JAVA_HOME:F:\java\jdk1.7.0_51;

ANDROID_HOME:D:\AndroidSDK\android-sdk-windows; path:D:\AndroidSDK\android-sdk-windows\tools; path:D:\AndroidSDK\android-sdk-windows\platform-tools; path:D:\AndroidSDK\android-sdk-windows\build-tools\23.0.3 發布的時候會用到該目錄下的zipalign.exe對安卓包(apk)進行優化;

3.2.3配置Genymotion模擬器

  請看另一篇博文:http://www.cnblogs.com/Caiyilong/p/8554169.html

3.2.4運行

  在CMD命令窗口,切到APP目錄中,使用命令ionic cordova run android運行安卓版本。如果沒有add過Android 平台(ionic cordova platform add android --save),Ionic會自動下載。

$ ionic cordova run android

  執行該語句,可能會遇到如下問題:

  

  解決方法,將環境變量JAVA_HOME配置為jdk1.8版本,然后配置grandle環境變量如下:

GRANDLE_HOME:F:\java\grandle\gradle-4.6;

path:%GRANDLE_HOME%;

  然后重啟終端,重新執行命令,會先下載一些grandle需要的東西,下載完出現運行成功提示:

  

  如果過程沒出錯,項目就已經運行在模擬器上了,如圖:

  

3.3真機(待驗證)

 前兩步同上,同樣需要下載SDK和配置SDK相關環境變量,然后手機usb連接電腦,打開開發者模式,

執行命令

$ ionic cordova run android

 

4.調試項目

正常情況下我們開發調試,只用瀏覽器運行調試就可以了,但是可能會遇到,比如要測試樣式在android或ios下是否會有錯誤,或者測試cordova下載的插件(插件就是設備原生API,比如camera相機操作的api),這時候就會用到模擬器或者真機。如果有真機盡量用真機調試。

模擬器和真機分別都有兩種調試方式,1.Chrome瀏覽器+android模擬器/真機;(android)

                    2.mac上safari瀏覽器+ios模擬器/真機;(ios)

                 2.Android Studio打開/platform目錄下的android+模擬器/真機;(android)

                 3.mac系統下xcode打開/platform目錄下的ios+模擬器/真機;(ios)

 

4.1Chrome瀏覽器+android模擬器/真機

調試分模擬器真機兩部分。詳說模擬器,真機與模擬器差不多,唯一的不同就是真機要打開開發者模式並啟用USB調試

1.首先運行Genymotion模擬器,然后執行命令ionic cordova run android,沒出錯的話,項目就在模擬器上運行了。(詳細參考上述3.2)

2.打開谷歌瀏覽器訪問:chrome://inspect/#devices,瀏覽器會檢查出設備的信息,點擊inspect啟動調試界面

  

3.點擊inspect可能會出現空白頁面,原因是無法訪問外網,這時候就需要翻牆了

  

4.2Android Studio+模擬器/真機

真機與模擬器差不多,只不過真機不需要配置模擬器,需要插入usb,打開開發者模式, 這里只講模擬器

1.android studio 點擊Import Project導入項目目錄下的/platform/andorid

  

  如果出現以下錯誤,說明是項目的grandle版本跟android studio的grandle版本不一致,直接進行第二步就能解決:

  

2.配置構建工具grandle,導入本地的grandle包,grandle包可以到http://services.gradle.org/distributions/下載,

  下載最新的grandle包就行,下載選擇-all.zpi。然后配置如下:

  

  

  注:有可能會遇到,項目需要的grandle包與當前導入的grandle包版本不匹配。這時重新下載對應版本的grandle包,重新導入就行。

  

  報錯問題解決之后,正確的項目結構如下:

  

3.導入成功后,就可以關聯Genymotion模擬器了。

  首先安裝Genymotion插件,因為外網無法訪問所有直接下載會失敗,我們先到網上單獨下載插件安裝包到本地,然后再導入本地插件,

  

  安裝完成后,工具欄會多出Genymotion Device Maneger按鈕,

   

  這里的Genymotion Device Manager跟Genymotion桌面應用功能一樣,可以新建和啟動模擬器,我們選擇一個已經創建的模擬器啟動,

  

  模擬器啟動后,我們點擊run運行項目,idea會檢查當前運行的模擬器,指定模擬器,ok運行

  

  一切順利的話,項目就運行在模擬器上了,如下:

  

 

 

 

 

 

主要參考

ionic菜鳥教程:http://www.runoob.com/ionic/ionic-tutorial.html

cordova中文文檔:http://cordova.axuer.com/docs/zh-cn/latest/

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM