ELSE

Cordova: 仅使用HTML/JS即可制作一个Android

2017-09-07  本文已影响155人  _风清洋_
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上可类似完成。

搭建环境

如果模拟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

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 cordova-android@6.2.3
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

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添加一个:

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包安装到模拟器上结果又报错了！

20170907170538.png

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

20170907175129.png 20170907212728.jpg

至此，APP终于搞定了！

总结

上一篇 下一篇

猜你喜欢

热点阅读