cordova快速上手_博汇网

	目录
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

设置环境变量
1. 设置环境变量JAVA_HOME，指向JDK安装目录；
2. 设置环境变量ANDROID_HOME，指向Android SDK安装目录；
3. 推荐将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.

解决方法：网上说了四种可能的解决方案，我使用了第一个方案就解决了，四个方案如下：
1. 杀了并重启adb服务，命令如下：
```
  adb kill-server
  adb forward --remove-all
  adb start-server
```
2. 删除并重建AVD；
3. 删除Android平台并重建及编译
4. 在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文件中按需配置图标，问题解决。图标配置，参考如下：

&lt;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