Cordova: 仅使用HTML/JS即可制作一个Android或者iOS的App

cordova

Cordova是什么

关于这个问题，还是看看官网是怎么说的吧:

Cordova wraps your HTML/JavaScript app into a native container which can access the device functions of several platforms. These functions are exposed via a unified JavaScript API, allowing you to easily write one set of code to target nearly every phone or tablet on the market today and publish to their app stores.

翻译一下：

Cordova包装你的HTML/JavaScript app到原生app容器中，可以让你访问每个平台设备的功能。这些功能通过统一的JavaScript API提供，让你轻松的编写一组代码运行在几乎市面上的所有手机和平板上，并可以发布到相应的app商城中。

听上去蛮不错的，那么我们就开始用它来做一个app吧！

PS: 因为本人没有Mac设备，所以此次演示仅限在Windows上模拟Android应用，Mac上可类似完成。

搭建环境

安装 nodejs, https://nodejs.org/en/
安装 npm, 安装nodejs时会一并被装上
安装 cordova
安装 Android Studio, https://developer.android.com/studio/index.html

如果模拟iOS应用，那么请使用Mac并安装XCode, https://developer.apple.com/xcode/

npm install -g cordova

环境坑一

创建应用

cordova create MyApp

如果按照Cordova(http://cordova.apache.org/)官网所述，直接用npm全局安装cordova，并创建应用，你可能遇到以下错误：

Error: Uncaught, unspecified "error" event. (  Error from Cordova Fetch: Error:
cmd: Command failed with exit code 4294963238 Error output:
npm ERR! not a package C:\Users\Administrator\AppData\Roaming\npm\node_modules\c
ordova\node_modules\.3.12.0@cordova-app-hello-world\index.js
npm ERR! addLocal Could not install C:\Users\Administrator\AppData\Roaming\npm\n
ode_modules\cordova\node_modules\.3.12.0@cordova-app-hello-world\index.js
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\
node_modules\\npm\\bin\\npm-cli.js" "install" "C:\\Users\\Administrator\\AppData
\\Roaming\\npm\\node_modules\\cordova\\node_modules\\.3.12.0@cordova-app-hello-w
orld\\index.js"
npm ERR! node v6.10.1
npm ERR! npm  v3.10.10
...

此时不要紧张，卸载cordova，使用yarn重新安装一下，猜测可能和npm版本不兼容。

yarn是facebook出品，功能类似npm的包管理器，可完全替代npm

npm uninstall -g cordova 
npm install -g yarn
yarn config set registry https://registry.npm.taobao.org
yarn global add cordova

环境坑二

安装好yarn和cordova之后，使用cli命令cordova create MyApp创建project，此时你可能会遇到以下错误：

'cordova' 不是内部或外部命令，也不是可运行的程序或批处理文件。

这是什么原因呢？

原来我们没有将yarn的bin目录加入到环境变量path，作为一个Windows僵尸粉，判断出这点还是不难的。执行以下命令，找到yarn的bin目录所在：

> yarn global bin
d:\Users\gy.wang\AppData\Local\Yarn\bin

将d:\Users\gy.wang\AppData\Local\Yarn\bin此目录添加到windows环境变量path

Cordova: 仅使用HTML/JS即可制作一个Android或者iOS的App_第2张图片

20170907134114.png

配置好环境，重新打开CLI窗口，我们终于可以顺利地创建cordova应用，cordova使用默认模板创建好一个Project。

> cordova create MyApp
Creating a new cordova project.

> tree
├─hooks
├─platforms
├─plugins
├─res
│  ├─icon
│  │  ├─android
│  │  ├─bada
│  │  ├─bada-wac
│  │  ├─blackberry
│  │  ├─blackberry10
│  │  ├─ios
│  │  ├─tizen
│  │  ├─webos
│  │  └─windows-phone
│  └─screen
│      ├─android
│      ├─bada
│      ├─bada-wac
│      ├─blackberry
│      ├─blackberry10
│      ├─ios
│      ├─tizen
│      ├─webos
│      └─windows-phone
└─www
    ├─css
    ├─img
    └─js

在Mac和Linux系统下，环境变量的配置请自行google一下

环境坑三

添加Android平台

d:\cordova-app\MyApp>cordova platform add android
Using cordova-fetch for cordova-android@~6.2.2
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: io.cordova.hellocordova
        Name: HelloCordova
        Activity: MainActivity
        Android target: android-25
Subproject Path: CordovaLib
Android project created with [email protected]
Installing "cordova-plugin-whitelist" for android

               This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* ne
ed this plugin since the whitelist will be built in.

--save flag or autosave detected
Saving android@~6.2.3 into config.xml file ...

注意这里的 Android target: android-25

在项目根目录下，运行命令cordova build android来编译你的项目，你可能遇到以下错误：

Error: cmd: Command failed with exit code 1 Error output:
FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring root project 'android'.
> You have not accepted the license agreements of the following SDK components:
[Android SDK Platform 25].
Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Mana
ger.
Alternatively, to learn how to transfer the license agreements from one workstation to another, go to http://d.android.com/r/studio-ui/export-licenses.html

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

原因是啥呢？当前cordova要求的Android版本比较高，需要安装Android SDK Platform 25才能顺利编译，怎么办？装！

打开Android Studio, 安装SDK

Cordova: 仅使用HTML/JS即可制作一个Android或者iOS的App_第3张图片

20170907141602.png

安装成功之后，执行命令cordova build android，这次终于成功了！

......
BUILD SUCCESSFUL

Total time: 1 mins 28.925 secs
Built the following apk(s):
        D:/cordova-app/MyApp/platforms/android/build/outputs/apk/android-debug.apk

APK包成功打好，这次我们运行一下，执行命令：

cordova run android

这次我们会遇到环境坑四

环境坑四

....
No target specified and no devices found, deploying to emulator
Error: No emulator images (avds) found.
1. Download desired System Image by running: "d:\Users\gy.wang\AppData\Local\Android\sdk\tools\android.bat" sdk
2. Create an AVD by running: "d:\Users\gy.wang\AppData\Local\Android\sdk\tools\android.bat" avd
HINT: For a faster emulator, use an Intel System Image and install the HAXM device driver

不急，仔细看报错信息的意思是没有可用的设备或模拟器。这个简单，打开Android Studio添加一个:

Cordova: 仅使用HTML/JS即可制作一个Android或者iOS的App_第4张图片

20170907145702.png

再次运行cordova run android，哈！这次成功了！

Total time: 2.737 secs
Built the following apk(s):
        D:/cordova-app/MyApp/platforms/android/build/outputs/apk/android-debug.apk
ANDROID_HOME=d:\Users\gy.wang\AppData\Local\Android\sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0
No target specified and no devices found, deploying to emulator
Skipping build...
Built the following apk(s):
        D:/cordova-app/MyApp/platforms/android/build/outputs/apk/android-debug.apk
Using apk: D:/cordova-app/MyApp/platforms/android/build/outputs/apk/android-debug.apk
Package name: io.cordova.hellocordova
INSTALL SUCCESS
LAUNCH SUCCESS

环境坑五

什么！闪退！WTF!

运行命令cordova run android，将APK包安装到模拟器上结果又报错了！

Cordova: 仅使用HTML/JS即可制作一个Android或者iOS的App_第5张图片

20170907170538.png

离成功就差一步了，别泄气！我们慢慢查找原因~

step-1，查看cordova所使用的android版本
```
"android": "6.2.3"
```
对应 Android SDK Platform 25
step-2，查看模拟器使用的android版本
```
"android": "6.0"
```
对应 Android SDK Platform 23

Cordova: 仅使用HTML/JS即可制作一个Android或者iOS的App_第6张图片

20170907175129.png

step-3，分析：模拟器上的Android版本低于cordova打包时用的Android版本，相应的SDK版本也要低

此时怎么办呢？
- Plan A: 降版本！删除原有cordova默认下载的android版本，然后安装和模拟器上一样的android版本。
- Plan B: 升版本！通过Android Studio将模拟器升级到最新的版本
- Plan C: 用真机来调试！
step-4，我是通过 Plan C解决了上述问题

Cordova: 仅使用HTML/JS即可制作一个Android或者iOS的App_第7张图片

20170907212728.jpg

至此，APP终于搞定了！

总结

本篇仅仅展示了如何利用Cordova制作一个Android App, 其实我们还可以利用Cordova制作H5应用，chrome应用等等，它们更加简单，有兴趣的同学可以自己尝试。
Cordova是前端人员走近APP世界的一条捷径，相比React Native，它更容易上手，因为说到底，它还是运行在浏览器中的，我们不需要深入了解原生API，我们只需写好HTML/CSS/JS即可。
有人说它性能不好，我想说，这事得分场景看，除了游戏类的应用，绝大多数应用都不需要太高的性能，随着前端技术的发展，差距会越来越小，因此，我非常看好它的前景。
作为一个独立开发者或者一个创业团队使用Cordova去完成一个APP，无疑是一个非常好的选择。
Cordova: 跨平台，一次编写，多处运行。