ionic和cordova初探--從安裝到運行首個app

                    小編:管理員 444閱讀 2022.09.13

                    好多人說ionic好用,一直要推薦我用,我就不信了,來安裝玩一下試試效果。實踐出真知!安裝過程各種坑,工具太多了,太麻煩了,差點放棄(還好堅持下來呢)。

                    1.安裝node

                    許多前端工具的安裝都依賴于node的包管理器npm,Node官網: https://nodejs.org/ 安裝完成后在cmd中輸入npm -v回車。 查看版本號如圖:

                    查看版本號

                    2.安卓環境

                    • JDK下載地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
                    • JDK需要配置兩個環境變量:(如果已配置就無需再配置)
                    PATH:%JAVA_HOME%\bin
                    CLASSPATH:.;%JAVA_HOME%\lib\tools.jar (一定不要忘了前面的點)
                    復制

                    配置完成后,cmd中輸入java -version 查看版本號。

                    3.安裝安卓的SDK

                    • 打開Android Studio,File --> Settings --> 搜索sdk,找到對應的sdk進行安裝即可。
                    • 需要在Path環境變量中添加兩個值。分別是 Android SDK中tools目錄的路徑和platform-tools的路徑。 例如:
                    D:\android-sdk\tools;
                    D:\android-sdk\platform-tools;
                    復制

                    4. 安裝ionic和cordova

                    • 安裝命令
                    命令行輸入 `npm install -g cordova ionic`
                    復制

                    安裝示意圖:

                    安裝示意圖

                    如果安裝不了,可以試試國內鏡像安裝,首先安裝cnpm,執行npm install -g cnpm --registry=https://registry.npm.taobao.org命令安裝。然后執行命令cnpm install -g cordova ionic安裝ionic和cordova

                    • 查看是否安裝成功:
                    查看ionic版本 `ionic -v`
                    查看cordova版本 `cordova -v`
                    復制

                    查看ionic版本

                    查看cordova版本

                    • ionic 和 cordova默認安裝在C:\Users\hello(此目錄為本機名)\AppData\Roaming\npm\目錄。 注意AppData是隱藏文件,需要在文件夾選項里面把隱藏文件顯示才可以看到(具體的怎么顯示隱藏文件夾百度)。

                    本地安裝路徑如圖所示:

                    ionic 和 cordova默認安裝路徑

                    • 修改PATH環境變量,在末尾加上C:\Users\hello(此目錄為本機名)\AppData\Roaming\npm\;

                    5. 使用ionic命令行創建新項目

                    • 打開cmd執行'ionic start'
                    • 然后輸入一個項目名,回車
                    • 然后按下tab鍵選擇一個默認的模板,按回車。比如我這里選擇的是blank模板。
                    • 然后看到有一行提示? Integrate your new app with Cordova to target native iOS and Android? (y/N)意思是是否要把 iOS 和Android集成到剛剛用Cordova 創建的app中 ,我這里選擇y 表示確定。然后就會自動安裝缺失的或者更新某些工具版本。
                    • 然后就會看到一個提示? Install the free Ionic Pro SDK and connect your app?我這里選擇的y,表示確認。
                    • 然后需要輸入郵箱登陸。

                    然后是輸入密碼

                    后面還有步驟,太麻煩了,我這里就不列舉了,我已經放棄使用ionic創建安卓項目了,可以直接看下文。

                    6. 使用cordova創建安卓項目(建議直接跳過第5步,使用第6步)

                    (1)打開一個存放項目的目錄,打開命令行,輸入cordova create 目錄 報名 App名稱,然后回車。例如cordova create first_sample com.lzw.sample SampleApp(2)打開剛創建的first_sample目錄,打開命令行,輸入命令cordova platforms add android,表示添加安卓支持。

                    如果是要支持ios平臺,可以輸入cordova platforms add ios。

                    如果是要支持web網頁,可以輸入cordova platforms add browser。

                    如果不知道有哪些平臺可以選擇,可以使用命令cordova platforms list查看已經安裝的平臺和可以支持的平臺。

                    (3)在特定平臺執行程序
                    • 1.在瀏覽器打開,進入工程根目錄,輸入cordova run browser,然后瀏覽器自動訪問http://localhost:8000/
                    • 2.在安卓上編譯Cordova APP
                    1.輸入`cordova requirements`命令檢查是否滿足構建平臺的要求。如有報錯請按錯誤提示去安裝相應的工具。
                    2.執行`cordova build android`命令, 編譯安卓項目
                    3.執行`cordova run android`命令,就會自動打開模擬器,在模擬器運行安卓項目了,如果執行`cordova run`,默認是在瀏覽器運行。
                    默認是debug版本,打包出來的apk在 你創建的項目根目錄\platforms\android\app\build\outputs\apk\debug目錄下。
                    默認啟動頁是`www/index.html`這個頁面。邏輯編寫在`www/js這個目錄里。`
                    復制

                    示意圖如下:

                    運行在瀏覽器

                    運行在安卓模擬器

                    關聯標簽:
                    无码精品人妻一区二区三区软件