cordova

最近做项目，顺便学学cordova打包APK,踩过很多坑，最后总结出一份完整的cordova环境配置笔记和APP打包笔记：

###简介：
**Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。**
**Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。**


检测是否满足构建平台的要求：
> cordova requirements

打包常用命令：
> cordova create first com.example.first firstApp
cd first
cordova platform add android --save
cordova platform ls
cordova build android
cordova plugin add cordova-plugin-camera
cordova plugin ls


## 项目中配置cordova
`npm install -g cordova`

##  cordova-plugin-themeablebrowser插件使用整理
`http://blog.youkuaiyun.com/u011127019/article/details/55259565`
```javascript
cordova.ThemeableBrowser.open(url,config.browser_target, config.browser_options).addEventListener('loadstart', function(e) {
    $toast.hide();
}).addEventListener(cordova.ThemeableBrowser.EVT_ERR, function(e) {
    $toast.show(e.message);
});
```
    
+ 1.此插件可以实现独立窗口打开页面，但是全屏设置好像没有起作用
+ 2.此插件可以配置标题栏、关闭按钮、分享按钮，菜单按钮等
+ 3.此插件依赖InAppBrowser


##  APP 兼容性测试
+ 腾讯 Wetest     
    + `http://wetest.qq.com/cloud/report/result?testid=e4e38b6e48e5c18382e274c29a694e7b`
+ TestBird
    + `https://www.testbird.com/`



##  报错
+ 把android SDK 27 卸载掉

+ android SDK 没下载全，需要检查更新


`注意：
打包文件中不能出现中文命名的文件、文件夹
打包路径上，不能有非iscii值，中文路径。`
`
注意更新cordova和android SDK
`

###  设置 应用图标（android）
在应用目录下找到  
`platforms\android\res`目录  
在res目录下找到所有有icon.png文件的  
然后把icon.png文件覆盖成你的。  
命令窗口下执行cordova build android即可生成带有自己图标应用的android程序。  
  
  
【环境搭建：】  
1、安装node.js  
下载安装node.js,https://nodejs.org/en/，安装cordova时需要使用。安装完成之后在终端（win+r,cmd）执行node -v，  
如果看到如下所示的版本号表示安装成功。  
  
D:\file\0000 wingconnFile\UI>`node -v`  
v6.11.2  
  
> node -v   
  
  
  
2.安装java jdk  
  
下载http://www.oracle.com/technetwork/java/javase/downloads/index.html，  
【下载】java: jdk-8u151-windows-x64.exe  
  
【安装】到C盘， C:\Program Files\Java      下有两个文件夹：   jdk1.8.0_151    jre1.8.0_151  
  
【配置环境变量】：  
JAVA_HOME :  C:\Program Files\Java\jdk1.8.0_151  
path :  %JAVA_HOME%\bin  
CLASSPATH : %JAVA_HOME%\bin  
  
【检查】安装是否OK      
我用的是：  
D:\file\001 ownnote_ktv\cordova\first>`java -version`  
java version "1.8.0_151"  
Java(TM) SE Runtime Environment (build 1.8.0_151-b12)  
Java HotSpot(TM) 64-Bit Server VM (build 25.151-b12, mixed mode)  
  
> java -version  
> javac  
  
  
  
  
  
3.安装ant  
下载连接:http://ant.apache.org/bindownload.cgi，下载完成之后解压到你想安装的目录，比如D:\ant。然后将目录添加到系统变量里，  
步骤如下：右击我的电脑，点击属性，左侧菜单点击高级系统设置，在弹窗中点击环境变量，  
然后在用户变量中添加变量ANT_HOME,值为D:\ant，添加变量path，值为D:\ant\bin，添加变量classpath，值为D:\ant\lib。  
配置好之后在终端输入ant -v，如果出现如下图所示则表示成功。  
  
D:\file\0000 wingconnFile\UI>`ant -v`  
```  
Unable to locate tools.jar. Expected to find it in D:\software\JDK2\lib\tools.jar  
Apache Ant(TM) version 1.9.9 compiled on February 2 2017  
Trying the default build file: build.xml  
Buildfile: build.xml does not exist!  
Build failed  
  
> ant -v  
```  
  
  
  
  
  
4.安装 Android SDK  
`http://tools.android-studio.org/index.php/sdk/`  
下载  android-sdk-windows 解压配环境变量  
 输入命令： 检测是否安装成功，如果有一堆内容，就配置完成了  
   
 > android -h  
 > android adb  
 > android list target  
   
   
   
5.安装cordova. 在终端执行下面命令  
>  npm install -g cordova  
>  cordova -v  
  
测试安装是否成功，终端输入cordova -v，如果出现如下所示提示表示安装成功  
  
D:\file\0000 wingconnFile\UI>`cordova -v`  
6.0.0  
  
  
  
6. 检测是否满足构建平台的要求: 【编译app前进行检测】  
  
>  cordova requirements  
  
Requirements check results for android:  
Java JDK: installed .  
Android SDK: installed  
Android target: installed android-23,android-27  
Gradle: installed  
如果以上都已经完成了，那恭喜你环境配置成功了！  
  
  
  
提过遇到    
Android target: installed failed  
Gradle: installed failed  
把  android  
  
  
  
7.查看项目安装的插件  
> cordova plugin list  
> cordova plugin ls  
  
  
参考：【cordova官网】  http://cordova.axuer.com/docs/zh-cn/latest/guide/cli/index.html  
  
参考： http://www.cnblogs.com/xiyangbaixue/archive/2016/04/11/5374728.html  
  
  
  
  
  
【【【【创建第一个应用：】】】】  
   
1.在终端进入你想要创建的目录，执行下面的命令：  
>   cordova create first com.example.first firstApp  
   
CordovaDemo:项目文件夹名  
com.first.first:项目包名,first为目录  
firstApp:项目,app名称  
  
  
  
2.添加平台  
>  cd first  
>  cordova platform add android --save  
>  cordova platform ls  
  
添加android平台，下载可能会比较慢.  
到这里我们的cordova项目就创建好了。  
  
6.【可检测是否满足构建平台】  
   
  
3.编译app  
`cordova build android`  
编译android系统，最后如果看到build successful,就可以了  
如果报错：      是关于android-sdk的错。接下来就是苦逼的安装各种sdk了。我也不知道咋装，反正我现在还在装...  
  
  
>   cordova build android  
   
  
4.运行app  
  
模拟器上运行  
> cordova emulate android  
  
浏览器上运行  
浏览器访问http://localhost:8000即可  
> cordova serve android  
  
  
真机上运行  
> cordova run android  
  
恭喜你第一个应用程序完成了！  
  
  
5、添加插件  
cordova plugin add cordova-plugin-camera  
  
  
6、查看插件  
cordova plugin ls  
  
`D:\file\0000 wingconnFile\cordova\eservice>cordova plugin ls  
cordova-plugin-barcodescanner 0.7.3 "BarcodeScanner"    // 二维码扫描插件  
cordova-plugin-compat 1.2.0 "Compat"    // 为了与以前版本的cordova保持向后兼容  
cordova-plugin-device 1.1.7 "Device"    // 获取设备基本信息  
cordova-plugin-dialogs 1.2.1 "Notificati    // 使用本地对话框UI元素  
cordova-plugin-geolocation 2.1.0 "Geolocatio    // 地理定位插件  
cordova-plugin-network-information 1.2.1 "Network Informatio    // 获取有关无线连接的信息  
cordova-plugin-splashscreen 3.1.0 "Splashscreen"    // 启动页面  
cordova-plugin-statusbar 2.1.3 "StatusBa    // 状态栏设置  
cordova-plugin-themeablebrowser 0.2.17 "ThemeableBrowser    //  
cordova-plugin-whitelist 1.3.3 "Whitelis    //  
cordova-plugin-x-toast 2.6.0 "Toast"    //   
cordova-plugin-x5-webview 3.1.0 "X5 WebView Engi    //  
`  
  
   
  
  
  
常用命令：  
1、创建应用  
  
cordova create first com.example.first firstApp  
   
  
  
2、添加平台  
  
cordova platform add android  
cordova platform add ios  
cordova platform add amazon-fireos  
cordova platform add blackberry10  
cordova platform add firefoxos  
   
  
  
3、查看平台  
  
cordova platforms ls  
  
  
   
  
4、删除平台  
  
cordova platform remove android  
或者  
cordova platform rm android  
   
  
  
  
  
5、添加插件  
cordova plugin add cordova-plugin-camera  
  
  
  
  
  
6、查看插件  
cordova plugin ls  
  
  
  
  
7、打包app  
  
cordova build android  
   
   
   
  
8、运行app  
  
cordova emulate android  
cordova serve android  
cordova run android  
   
  
  
  
总结：  
hybrid app相对native app来说开发起来速度快，相对容易，但是没有native那么流畅，性能和体验稍微差些。  
并且文件大小相差也很大，同样一个应用native只要几k，二hybrid却要几兆。  
  
下面是我自己分别使用cordova和phonegap开发的新闻应用，欢迎大家安装使用。  
https://github.com/baixuexiyang/hybrid