本文主要目录结构:
1. -前言
2. -什么是Cordova
3. -**Cordova前期准备**
4. -真机设备调试:IOS调试+Android设备
5. -**安装过程中的9个错误及解决方案**
一.前言
二.什么是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 [email protected]
-检测你是否满足构建平台的要求: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
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,你不选,他默认是系统根目录 / ,这个目录它是没有权限写入的.. 你最好选择一个其他目录下的目录来保存
5.6执行此命令报错:cordova run --list
https://stackoverflow.com/que...
5.7执行此命令:echo $JAVA_HOME空白
在.zshrc此文档设置环境变量
5.8执行此命令:adb devices
安卓设备未授权
解决办法:在提示上,勾选“一律允许”,并点击确定
5.9执行此命令:adb install -r xxx
https://jingyan.baidu.com/art...
解决办法:重连一下就好了
参考官方文档:
1.cordova中文网:
http://cordova.axuer.com/docs...
2.安装ios高xcode版本报错参考的博客:
https://blog.csdn.net/qq_3505...