Cordova搭建項目

環境:windows + android

1.安裝Cordova CLI

 安裝cordova命令行工具,通過下面這些步驟:

  1. 下載和安裝Node.js。安裝完成後你可以在命令行中使用node 和 npm 。
  2. (可選)下載和安裝git client, 如果你沒有。安裝成功後,你可以在命令行中使用git。 這個命令行使用下載git倉庫中的資源。
  3. 安裝cordova 模塊使用Nodejs的npm工具。cordova模塊會被npm工具自動下載。
  4. 在Windows上(-g代表全局安裝):  npm install -g cordova

2.創建App

跳轉到你想要創建源代碼的目錄中,並創建你的cordova項目: 

cordova create hello com.example.hello HelloWorld 

3.添加平臺

所有後續命令都需要在項目目錄或者項目目錄的任何子目錄運行:

 cd hello

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

cordova platform add android --save

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

 cordova platform ls

注意:在你使用CLI創建應用的時候, 不要 修改/platforms/目錄中的任何文件。當準備構建應用或者重新安裝插件時這個目錄通常會被重寫。

4.安裝構建先決條件

要構建和運行App,你需要安裝每個你需要平臺的SDK。另外,當你使用瀏覽器開發你可以添加 browser平臺,它不需要任何平臺SDK。

檢測你是否滿足構建平臺的要求:

cordova requirements

Requirements check results for android:

Java JDK: installed 1.8.0

Android SDK: installed true

Android target: installed android-28

Gradle: installed C:\Program Files\Android\Android Studio\gradle\gradle-5.1.1\bin\gradle

Android平臺的要求:http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html

4.1安裝Android Studio

Cordova支持Android需要Android SDK,因此我們需要先安裝JDK;

當在Windows上安裝的時候需要根據JDK路徑設置JAVA_HOME環境變量;

首先下載和安裝 Android Studio,國內用戶可能無法打開官方鏈接,請自行使用搜索引擎搜索可用的下載鏈接。安裝界面中選擇"Custom"選項,確保選中了以下幾項:

 

Android SDK

Android SDK Platform

Performance (Intel ® HAXM) (AMD 處理器在後續需要開啓虛擬化)

Android Virtual Device

然後點擊"Next"來安裝選中的組件。

4.2安裝Android SDK

安裝完成後,看到歡迎界面時,就可以安裝Android SDK了。

  1. 你可以在 Android Studio 的歡迎界面中找到 SDK Manager。點擊"Configure",然後就能看到"SDK Manager"。
  2. 在 SDK Manager 中選擇"SDK Platforms"選項卡,然後在右下角勾選"Show Package Details"。展開Android 9 (Pie)選項,確保勾選了下面這些組件:

         Android SDK Platform 28

        Intel x86 Atom_64 System Image(官方模擬器鏡像文件,使用非官方模擬器不需要安裝此組件)

      3.然後點擊"SDK Tools"選項卡,同樣勾中右下角的"Show Package Details"。展開"Android SDK Build-Tools"選項,確保選中了 28.0.3版本。你可以同時安裝多個版本。

     4.最後點擊"Apply"來下載和安裝這些組件。

4.3配置 ANDROID_HOME 環境變量

打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量 -> 新建,創建一個名爲ANDROID_HOME的環境變量(系統或用戶變量均可),指向你的 Android SDK 所在的目錄(具體的路徑可能和下圖不一致,請自行確認):

C:\user\xxxx\AppData\Local\Android\Sdk

你可以在 Android Studio 的"Preferences"菜單中查看 SDK 的真實路徑,具體是Appearance & Behavior → System Settings → Android SDK。

你需要關閉現有的命令符提示窗口然後重新打開,這樣新的環境變量才能生效。

4.4把 platform-tools 目錄添加到環境變量 Path 中

打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量,選中Path變量,然後點擊編輯。點擊新建然後把 platform-tools 目錄路徑添加進去。

此目錄的默認路徑爲:

c:\Users\你的用戶名\AppData\Local\Android\Sdk\platform-tools

5.構建App

默認情況下, cordova create生產基於web應用程序的骨架,項目開始頁面位於www/index.html 文件。任何初始化任務應該在www/js/index.js文件中的deviceready事件的事件處理函數中。

運行下面命令爲所有添加的平臺構建:

$ cordova build

至此,Cordova項目的環境搭建就結束了,構建出的apk就是我們的app。

6.調測運行app

移動平臺的SDK通常會綁定模擬器,它是一個可執行的設備鏡像,這樣你就可以在主屏幕啓動你的App,看看它在多個平臺是如何交互的。 在命令行運行下面的命令,會重新構建App並可以在特定平臺的模擬器上查看:

$ cordova emulate android

或者,你可以將你的手機插入電腦,在手機上直接測試App:

$ cordova run android

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章