目 录 | |
---|---|
1 | 快速开始 |
2 | 问题与解决 |
3 | 参考文献 |
近来太忙,事情多且杂。原本在本机上已经搭建了cordova环境,现在想要再使用一下,却好像失忆似完全记不起来,不知道都有哪些步骤了。这再次说明了写博文的重要性。
没办法只能再重新学习,不过这次一定要把学习所得记录下来,利人利己!
下文记录Cordova的简易使用。
一、快速开始
1.1 安装 Cordova 命令行工具
Cordova命令行工具运行在Node.js
环境下。
先下载Node.js
,安装后就可以在命令行执行node
与npm
命令了。使用npm
就可以下载安装cordova
模块了。
-
在OS X或者Linux环境下可以执行以下命令,安装
cordova
:$ sudo npm i -g cordova
-
在Windows环境下安装:
C:\>npm install -g cordova
1.2 创建一个项目
可以使用命令行工具创建一个空项目。进入你想创建项目的目录下,输入一下命令:
cordova create <PATH> [ID [NAME [CONFIG]]] [options]
(你可以通过 cordova help create
来了解这个命令)
这个命令会根据模板创建cordova应用所需的目录。默认情况下,项目中www/index.html
文件是这个WebApp的Home页面。
举例:
cordova create hello com.example.hello HelloWorld
创建出来的目录结构如下:
hello/
|-- config.xml
|-- package.json
|-- hooks/
|-- res/
| |-- icon/
| |-- screen/
|-- www/
| |-- index.html
| |-- css/
| |-- img/
| |-- js/
|-- platforms/
|-- plugins/
当然了,你也可以通过特定的模板创建项目,特定的模板可以是NPM包、Git仓库或者本地目录,相关命令如下:
cordova create hello com.example.hello HelloWorld --template <npm-package-name>
cordova create hello com.example.hello HelloWorld --template <git-remote-url>
cordova create hello com.example.hello HelloWorld --template <path-to-template>
你可以尝试在www.npmjs.com上,通过关键字cordova:template
来搜索npmjs仓库已有的模板。
如果想在本地创建一个模板,可以参考这里
1.3 添加平台
现在App还无法运行在手机上,你需要给你的App添加将要支持的平台。
Cordova支持的平台有很多:
- android
- blackberry10 ~3.8.0 (deprecated)
- browser
- ios
- osx
- ubuntu ~4.3.4 (deprecated)
- webos
- windows
- www
可以使用如下命令:
cordova {platform | platforms} [
add <platform-spec> [...] {--save | link=<path> | --fetch } |
{remove | rm} platform [...] {--save | --fetch}|
{list | ls} |
check |
save |
update ]
这个命令需要在项目目录下执行,举例:
- 进入项目目录
cd hello
- 添加平台
cordova platform add android ios
- 删除平台
cordova platform remove ios
你可以通过命令查看,目前可以支持及已经支持哪些手机平台
cordova platform ls
1.4 编译前准备
为了能编译运行程序,你需要安装各个平台所必须的SDK。
可以通过命令查看,是否具备这些环境:
cordova requirements
下面依次介绍 Android 、 iOS 、 Windows 平台的所需环境.
1.4.1 Android平台所需环境
-
JDK
需要安装JDK8或更新版。
-
Android SDK
需要安装Android Studio.
-
Android SDK 包
安装完Android Studio后,还需要安装SDK包,推荐安装最高版本。Cordova最新Android包最高只能支持到Android API Level 25,目前不支持更高级别的API了。具体支持详情见下表:
cordova-android版本 所支持的Android API-Levels 对应的 Android 版本 6.X.X 16 - 25 4.1 - 7.1.1 5.X.X 14 - 23 4.0 - 6.0.1 4.1.X 14 - 22 4.0 - 5.1 4.0.X 10 - 22 2.3.3 - 5.1 3.7.X 10 - 21 2.3.3 - 5.0.2 -
设置环境变量
- 设置环境变量
JAVA_HOME
,指向JDK安装目录; - 设置环境变量
ANDROID_HOME
,指向Android SDK安装目录; - 推荐将Android SDK安装目录下的
tools
、tools/bin
和platform-tools
目录添加到环境变量PATH
中。
举例:
-
在OS X(或者 Linux)下
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_25.jdk/Contents/Home export ANDROID_HOME=/Users/yourname/Library/Android/sdk export PATH=${PATH}:${ANDROID_HOME}/platform-tools:${ANDROID_HOME}/tools:${ANDROID_HOME}/tools/bin
- 设置环境变量
1.4.2 iOS平台所需环境
编译iOS程序的环境必须是:
- 使用 Intel芯片的电脑
- OS X操作系统,且版本 >= 10.10.4
- Xcode版本 >= 7.0
- iOS 9 SDK
- Xcode
两种下载Xcode的方式:一、从App Store下载安装;二、从Apple 开发者下载页面下载(需要注册成为Apple开发者)。
从App Store下载的是最新版Xcode,其对操作系统的版本是有要求的。如果操作系统的版本比较低,可以从Apple开发者下载页面,找到低版本的Xcode安装。我本机操作系统很久没升级了(版本:10.11.6
),选择安装了Xcode的8.2
版本。
Xcode下载安装后,还需要安装Xcode的命令行工具。也可以通过下述命令安装:
xcode-select --install
- 部署工具
ios-deploy
工具可以通过命令行在iOS设备上启动app。通过以下命令安装:
npm install -g ios-deploy
1.5 编译
编译所有平台:
cordova build
编译某个特定平台,比如Android:
cordova build android
我第一次编译时报错,见下文“问题与解决”章节。
1.6 测试App
下面依次介绍 Android 、 iOS 、 Windows 平台的所需环境.
1.6.1 Android平台的测试
-
创建及管理Android虚拟设备(AVD)
Android Studio提供一个AVD管理界面,可以进行AVD的创建与管理。可以通过工具栏上对应的按钮打开这个界面,也可以通过菜单(
Tools
>Android
>AVD Manager
)打开。界面操作简单,不再赘述。 -
在模拟器上测试
配置好AVD后,可通过以下命令发布Cordova程序至模拟器运行:
cordova run android --emulator
我在这里遇到问题,解决经过见下文“问题与解决”章节
-
在手机上测试
手机连上电脑,可以通过以下命令发布cordova程序至手机运行:
cordova run android --device
我在这里遇到问题,解决经过见下文“问题与解决”章节
1.6.2 iOS平台的测试
- 在模拟器上测试
安装好Xcode,可通过以下命令发布Cordova程序至模拟器运行:
cordova run ios --emulator
也可以使用Xcode,发布到模拟器上调试:
- 使用Xcode打开工程文件(
platforms/ios/HelloWorld.xcworkspace
),也可以使用下面命令打开
open ./platforms/ios/HelloWorld.xcworkspace/
- 按下图示①②步骤确认,然后点击③运行。程序就在模拟器中启动了。
- 在手机上测试
手机连上电脑,可以通过以下命令发布cordova程序至手机运行:
cordova run ios --device
需要确保手机版本能被Xcode版本所支持。
二、问题与解决
不同环境不同版本会遇到不同的情况,下面仅记录我所遇到的若干问题:
2.1 编译报错与解决过程
执行cordova build android
报错如下:
$ cordova build
ANDROID_HOME=/Users/yourname/Library/Android/sdk
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_25.jdk/Contents/Home
Error: spawn EACCES
打开日志选型,重新编译:
$ cordova build android -verbose
...
...
Running command: "/Applications/Android Studio.app/Contents/gradle/gradle-4.1/bin/gradle" -p /Users/tangzhi/webroot/running-man/dist/android/hello/platforms/android wrapper -b /Users/tangzhi/webroot/running-man/dist/android/hello/platforms/android/wrapper.gradle
Error: spawn EACCES
通过编译日志,发现是”/Applications/Android Studio.app/Contents/gradle/gradle-4.1/bin/gradle”没有权限。那就好办了,赋个执行权限就ok了。
赋权命令:
chmod +x /Applications/Android\ Studio.app/Contents/gradle/gradle-4.1/bin/gradle
2.2 在模拟器上测试出错与解决A
-
执行以下命令出错:
cordova run android --emulator
-
出错提示:
Error: Failed to execute shell command "getprop,dev.bootcomplete"" on device: Error: adb: Command failed with exit code 1 Error output: error: device unauthorized. This adb server's $ADB_VENDOR_KEYS is not set Try 'adb kill-server' if that seems wrong. Otherwise check for a confirmation dialog on your device.
-
解决方法:网上说了四种可能的解决方案,我使用了第一个方案就解决了,四个方案如下:
-
杀了并重启adb服务,命令如下:
adb kill-server adb forward --remove-all adb start-server
- 删除并重建AVD;
- 删除Android平台并重建及编译
- 在
config.xml
文件中Android平台下添加一条配置:<preference name="loadUrlTimeoutValue" value="700000" />
1.
-
2.3 在iOS模拟器上测试出错与解决B
-
在xcode里编译报错:
The app icon set named "AppIcon" did not have any applicable content.
-
解决方法:iOS严格检查图标的尺寸。在
config.xml
文件中按需配置图标,问题解决。图标配置,参考如下:<platform name="ios"> <!-- iOS 8.0+ --> <!-- iPhone 6 Plus --> <icon src="res/ios/icon-60@3x.png" width="180" height="180" /> <!-- iOS 7.0+ --> <!-- iPhone / iPod Touch --> <icon src="res/ios/icon-60.png" width="60" height="60" /> <icon src="res/ios/icon-60@2x.png" width="120" height="120" /> <!-- iPad --> <icon src="res/ios/icon-76.png" width="76" height="76" /> <icon src="res/ios/icon-76@2x.png" width="152" height="152" /> <!-- Spotlight Icon --> <icon src="res/ios/icon-40.png" width="40" height="40" /> <icon src="res/ios/icon-40@2x.png" width="80" height="80" /> <!-- iOS 6.1 --> <!-- iPhone / iPod Touch --> <icon src="res/ios/icon.png" width="57" height="57" /> <icon src="res/ios/icon@2x.png" width="114" height="114" /> <!-- iPad --> <icon src="res/ios/icon-72.png" width="72" height="72" /> <icon src="res/ios/icon-72@2x.png" width="144" height="144" /> <!-- iPad Pro --> <icon src="res/ios/icon-167.png" width="167" height="167" /> <!-- iPhone Spotlight and Settings Icon --> <icon src="res/ios/icon-small.png" width="29" height="29" /> <icon src="res/ios/icon-small@2x.png" width="58" height="58" /> <!-- iPad Spotlight and Settings Icon --> <icon src="res/ios/icon-50.png" width="50" height="50" /> <icon src="res/ios/icon-50@2x.png" width="100" height="100" /> <!-- iPad Pro --> <icon src="res/ios/icon-83.5@2x.png" width="167" height="167" /> </platform>
2.4 在手机上测试出错与解决A
-
执行以下命令出错:
cordova run android --device
-
出错提示:
Error: Failed to execute shell command "input,keyevent,82"" on device: Error: adb: Command failed with exit code 137
-
解决方法:在手机的开发者选项中打开“USB调试(安全设置)”选项。
2.5 在手机上测试出错与解决B
-
执行以下命令出错:
cordova run android --device
-
出错提示:
Error: Failed to deploy to device, no devices found.
-
解决方法:执行以下命令后,电脑重连手机。
adb kill-server adb start-server
三、参考文献
- http://cordova.apache.org
- https://github.com/carynbear/cordova-template
- https://stackoverflow.com/questions/tagged/cordova