最近做项目,顺便学学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.csdn.net/u011127019/article/details/55259565
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™ SE Runtime Environment (build 1.8.0_151-b12)
Java HotSpot™ 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
- 检测是否满足构建平台的要求: 【编译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