前言
随着移动无线时代的来临，用户对移动端的使用量逐渐超过PC，而各种设备不同导致的多平台适配问题也越来越突出。随着HTML5的崛起，未来H5统一PC，移动web，Android，IOS的开发已经成为未来的趋势，这就是传说中的大前端时代~
这是一个前端可以得到不同以往的大发展的时代，同时对开发者的素质也有更高要求。传统的web前端开发者，以及移动端的Android和IOS开发者将会相互跨界，不仅要了解HTML，JS，CSS前端技术，同时要了解到Android和IOS平台的原生开发，对后端服务也要有所了解。
Cordova是一个将webapp发布成各种不同平台（browser，android，ios等）的移动框架。一个Cordova应用由WebApp，WebView，Cordova Plugins三个部分组成。
Cordova应用架构
- WebApp
这个实际上就是我们的应用主要部分，由HTML，CSS，JS以及其他的图片，媒体文件等资源组成，我们的应用在WebView中运行。 - WebView
Cordova负责启用各个不同平台的WebView作为应用的容器。WebView也可以和原生组件混合使用，构建大型的Hybrid App - Cordova Plugins
插件是Cordova生态系统的重要组成部分。插件是Cordova和原生组件相互通信的接口，并绑定到了标准的设备API上。这使你能够通过JavaScript调用原生代码。
Apache Cordova项目组维护着一组插件叫做核心插件。这些核心插件可以让你的应用程序访问各个设备提供的具体功能，例如访问电源，相机，手机联系人等。
注意:当你创建一个Cordova项目它不存在任何插件。任何你需要的组件，哪怕是核心组件，也需要开发者自己手动添加。Cordova不提供任何UI部件和MV*框架。Cordova只提供运行环境。
安装与使用
-
安装NodeJS
这个不多讲了，本人使用的是NodeJS V4.7.3
安装了之后在命令行输入node -v以及npm -v可以查看node和npm的版本号 -
安装Cordova
使用npm i -g cordova命令全局安装Cordova -
创建Cordova项目
执行命令cordova create hello com.example.hello HelloWorld
将会在当前目录下创建一个hello目录作为这个Cordova工程的目录
com.example.hello是项目的name和id,HelloWorld是项目的displayName - 添加开发平台
- 将当前工作目录移动到Cordova项目目录
cd hello - 添加浏览器平台
cordova platform add browser - 添加Android平台
cordova platform add android - 添加IOS平台
cordova platform add ios - 如果想指定版本可以
cordova platform add android@6.1.0 - 列出已添加的平台
cordova platform ls
Note: Cordova项目实际上还是使用NPM进行包管理。添加平台命令会将相应的cordova包添加到NPM依赖项中，并自动下载。例如添加了
browser和android平台后，config.xml与package.json都会记录相应的信息，如``package.json`自动添加了
"dependencies": {
"cordova-android": "^6.2.3",
"cordova-browser": "^4.1.0"
}
同时node_modules中也已经安装了相应的依赖包
-
添加插件
cordova plugin add cordova-plugin-statusbar --save
罗列出已安装的插件
cordova plugin ls -
调试
启用Android模拟器
cordova emulate android
也可以使用Android手机进入开发者模式进行调试
cordova run android -
打包Cordova应用
cordova build android
OK了，如果命令行无错误信息的话就会在/platforms/android/build/outputs/apk目录下会生成一个.apk文件。
TIPS：
如果有错误信息，以下是一些通用的解决方法(不一定管用) -
其他的一些命令
清理项目
cordova clean
移除平台
cordova platform remove android
Android平台依赖项安装
- 安装
JDK - 配置
JAVA_HOME和PATH环境变量 - 安装
Android SDK，直接安装Android Studio会打包安装Android SDK以及其他工具。 - 配置
ANDROID_HOME环境变量 - 推荐将
Android SDK的tools, tools/bin, platform-tools也配置到PATH环境变量 - 配置
AVD（Android Virtual Device）
目录结构
Cordova CLI（Command Line Interface）按以下的文档结构工作
myapp/
|-- config.xml
|-- hooks/
|-- merges/
| | |-- android/
| | |-- windows/
| | |-- ios/
|-- www/
|-- platforms/
| |-- android/
| |-- windows/
| |-- ios/
|-- plugins/
|--cordova-plugin-camera/
-
config.xml
对应用进行配置，为项目做一些定制化的设置 -
www/
应用的所有web资源存放与此（html，js，css等）。在cordova prepare时Cordova会把www/中的内容拷贝到各自平台的子目录中，例如platforms/ios/www或者platforms/android/assets/www。CLI每次都会将web资源从www/拷贝到各个平台的文件夹，因此不要在platforms中进行修改是无效的。 -
platforms/
包括项目需要的相关平台的所有的源代码和构建脚本 -
plugins/
项目添加的所有插件会放到此目录 -
hooks/
存放对cordova-cli命令进行定制的脚本。这些脚本可以通过钩子控制何时执行。可用来建立自己的构建系统或与版本空着系统融合。 -
merges/
用来存放特定平台的web资源。在merges/目录中对应的文件将会在prepare时覆盖www/目录中的文件。
merges/
|-- ios/
| -- app.js
|-- android/
| -- android.js
www/
-- app.js
例如merges/ios/app.js在构建IOS平台代码时，会覆盖www/app.js
遇到的问题
- 打包Android的时候提示找不到gradle
解决方法： 在path环境变量添加gradle工具的目录，Android Studio已经集成了gradle，在path环境变量中添加C:\Android\Android Studio\gradle\gradle-*.*.*\bin - 打包Android，遇到gradle下载失败的解决办法
- 使用翻墙软件
- 手动下载，直接打开链接下载，解压缩到
C:\Users\renwc\.gradle\wrapper\dists
网友评论