MAC-react项目cordova工程环境搭建及报错解决办法

本文主要目录结构：

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,你不选,他默认是系统根目录 / ,这个目录它是没有权限写入的.. 你最好选择一个其他目录下的目录来保存