1. <legend id="z1ta0"></legend>

          <label id="z1ta0"></label>

          <label id="z1ta0"></label>

            <big id="z1ta0"></big>

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

            小編:管理員 343閱讀 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這個目錄里。`
            復制

            示意圖如下:

            運行在瀏覽器

            運行在安卓模擬器

            關聯標簽: