MAC-react項目cordova工程環境搭建及報錯解決辦法詳情 - 前端,cordova y_lucky 博客

本文主要目錄結構：

1. -前言
2. -什麼是Cordova
3. -**Cordova前期準備**
4. -真機設備調試：IOS調試+Android設備
5. -**安裝過程中的9個錯誤及解決方案**

一.前言

因為工作需要，第一次搭建Cordova項目環境，打包的過程中遇到了很多的問題，特記錄下來，希望可以幫助到有同樣困惑的小夥伴。也十分感謝同事的熱心指導，❤️❤️手動比心❤️❤️

二.什麼是Cordova
官方文檔説：

Apache Cordova是一個開源的移動開發框架。允許你用標準的web技術-HTML5,CSS3和JavaScript做跨平台開發。 應用在每個平台的具體執行被封裝了起來，並依靠符合標準的API綁定去訪問每個設備的功能，比如説：傳感器、數據、網絡狀態等。
使用Apache Cordova的人羣:
- 移動應用開發者，想擴展一個應用的使用平台，而不通過每個平台的語言和工具集重新實現。
- web開發者，想包裝部署自己的web App將其分發到各個應用商店門户。
- 移動應用開發者，有興趣混合原生應用組建和一個WebView(一個特別的瀏覽器窗口) 可以接觸設備A級PI，或者你想開發一個原生和WebView組件之間的插件接口。

*簡單的説：Cordova就是一箇中間件，讓我們把WebAPP打包成我們想要的app，一套代碼，多個應用。並且它提供了非常多的插件，方便我們使用原生APP的功能。

注意：本文我們在Mac中搭建 Cordova 開發環境

三.Cordova前期準備
3.1 下載和安裝Node.js
直接去官網下載並按默認路徑安裝就可以了。查看是否安裝成功：npm -v。安裝完成後你可以在命令行中使用node 和 npm

3.2 安裝Cordova
推薦打開cordova中文網，首先閲讀一下在跟着做！！！
-安裝指定版本sudo npm install -g cordova
-安裝指定版本 sudo npm install -g cordova@7.1.0
-檢測你是否滿足構建平台的要求:cordova requirements
-切換到項目目錄查看當前平台設置狀況: cordova platform ls

3.3 創建App或者是打開已有的react項目，執行下面命令進行打包

一、可以使用create-react-app搭建
1.安裝依賴 yarn instal
2.運行 npm start
3.項目構建 npm run build
二、將打包好的build文件夾的所有內容拷貝到cordova項目的www目錄中

3.4 添加平台
3.4.1 IOS平台
1.檢查是否安裝xcode：xcode-select --version

如沒有安裝，擇下載對應安裝包安裝
xcode下載路徑：https://developer.apple.com/d...

注意：根據電腦版本下載合適的xcode  否則安裝的時候可能會報錯

2.安裝deployment tools brew install ios-deploy
3.安裝開發、生產證書及描述文件
4.添加ios項目 cordova platform add ios

5.移除ios項目 cordova platform rm ios

注意：為了確保ios環境正確，建議先統一移除iOS平台再重新添加ios平台。確保當前路徑是在cordova項目目錄下執行以下命令。
方法一：命令移除，如果太久沒有反應可以同時按command+c手動終止也就移除了
方法二：直接刪除，找到文件夾下platforms,手動刪除 ios 文件夾即可

6.打包ios cordova build ios
7.打包並安裝iOS包到手機上 cordova run ios --device

3.4.2 android平台
1.安裝jdk並配置環境變量JAVA_HOME

**1.1安裝jdk**
安裝地址：https://www.oracle.com/java/technologies/javase-downloads.html
    1.打開主界面，點擊其他
    2.選擇終端選項
    3.輸入java -version命令查看是否安裝jdk  
     ![image.png](/img/bVcROSN)
    4.回車以後輸出版本信息就代表安裝了
    5.輸入whereis java命令
    6.可以看到jdk的安裝目錄
    7.查看jdk地址，配置jdk環境變量
    
查看jdk地址命令：`/usr/libexec/java_home -V`

![image.png](/img/bVcROSS)

**1.2配置環境變量**
    1.`cd ~ `進入到主目錄 
    2.`ls -a `顯示隱藏文件 
    3.`open .zshrc`編輯文件
    4.粘貼查看jdk地址命令【`/usr/libexec/java_home -V`】中的地址，配置到文件中
    5.`source .zshrc`保存生效配置文件
        注意：有一些文檔配置的時候讓保存到bash_profile文件下，
        touch .bash_profile  //創建
        open .bash_profile。//打開
        source .bash_profile //保存
        這樣會導致只有一次生效問題，打包會報錯。
        查看官方的一個提問：mac設置全局環境變量
        https://discussionschinese.apple.com/thread/251633370
        因此，不要在該文件裏面配置JAVA_HOME以及後面的android_home的環境變量

2.安裝gradle
下載：brew install gradle
升級：brew upgrade gradle
【brew安裝教程】(https://www.jianshu.com/p/06a...

3.安裝android studio
【下載地址】https://developer.android.goo...
【安裝教程】https://www.jianshu.com/p/2d1...

4.安裝android sdk平台【platform】和工具【tools】

5.安裝adb
Mac安裝adb，最簡單的辦法是用homebrew，homebrew是macOS的一個包管理工具。

1、確保安裝homebrew  
2、安裝adb    
```
brew cask install android-platform-tools
```
![image.png](/img/bVcRYSs)

6.添加Android項目 `cordova platform add Android `
  移除Android項目 `cordova platform rm Android `
7.打包Android `cordova build Android `
8.連接設備 `adb devices`
9.重連設備 `adb reconnect `
10. 運行設備到真機  
```
adb install -r 【方括號這裏替換成打包後的apk所在地址.apk，不要帶上方括號】
```

四.調試
4.1 ios調試
1.ios調試需要打開safari瀏覽器
2.找到開發菜單欄
3.如果沒有開發菜單欄可以按照下圖打開：safari瀏覽器 —》偏愛設置》高級-》打開開發菜單。就能看到了

4.如果設備不可用，需要在手機上打開下圖配置

5.開始調試

4.2 Android調試
1.Android調試需要打開Google瀏覽器
2.在網址中輸入如下命令：chrome://inspect/#devices

點擊inspect就可以調試了。    

五.安裝過程中遇到的錯誤及解決辦法

5.1 執行此命令報錯：cordova platform add ios

解決辦法：重新執行一次就好了

5.2 執行此命令報錯：cordova platform add ios

Reading build config file:
Error: Cannot read property 'toLowerCase' of undefined
Error: Cannot read property 'name' of undefined

解決辦法：出現該錯誤是因為xcode的版本高於10導致的語法問題，找到該路徑

platform/ios/cordova/lib/list-emulator-build-targets

的第53行，替換以下代碼即可，重新添加平台需要再次更替這部分代碼！
舊的：

if (device.name === deviceType.name.replace(/\-inch/g, ' inch') && 
   device.availability.toLowerCase().indexOf('unavailable') < 0) {
   availAcc.push(device);
}

替換:

  if (device.name === deviceType.name.replace(/\-inch/g, ' inch')) {
                        if ((device.availability && device.availability.toLowerCase().indexOf('unavailable') < 0)
                        || device.isAvailable) {
                            availAcc.push(device);
                        }
                    }

參考網址：https://stackoverflow.com/que...

5.3 執行此命令報錯：cordova platform add ios

解決辦法：移除並重新添加平台

cordova platform remove ios
cordova platform add ios

如果用的xcode10以上版本，需要改變xcode以下系統設置
File -> WorkSpace Settings -> Build System: Legacy Build System

5.4執行此命令報錯：cordova build android

解決辦法：需要確保配置正確環境變量！可以查看上面的部分，通過cordova platforms 查看是否環境正確就能知道是否安裝正確！

5.5執行此命令報錯：cordova requirements

解決辦法：
https://segmentfault.com/q/10...
可能是因為sdk目錄安裝位置沒有權限，選中一個別的地方安裝下載。
https://segmentfault.com/q/10...
你先在 Android SDK Location 這個地方,選擇 edit 然後選擇一個目錄來安裝 SDK,你不選,他默認是系統根目錄 / ,這個目錄它是沒有權限寫入的.. 你最好選擇一個其他目錄下的目錄來保存