Android-Cordova
Cordova环境搭建
混合开发环境，Cordova提供了js和原生API的调用接口，通过插件，我们可以实现例如拍照，扫码等操作； 并且提供了静态文件转换成APP的功能。
步骤：
安装nodejs
安装cordova执行
npm install -g cordova在工作空间目录执行
cordova create MyApp创建一个Cordova项目切换进入刚刚创建的项目跟目录
cd MyAppcordova platform查看该项目可用的平台和已安装的平台1
2
3
4
5
6
7
8Installed platforms:
android 7.0.0
Available platforms:
browser ~5.0.1
ios ~4.5.4
osx ~4.0.1
windows ~5.0.0
www ^3.12.0如果没有安装，添加一个平台
cordova platform add android添加Android sdk系统环境变量三个
1
2
3JAVA_HOME:C:\Program Files\Java\jdk1.8.0_131
ANDROID_HOME:F:\xuan\sdk
PATH:%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;然后执行
cordova requirements检查相关环境，如果失败，环境变量配置有问题，这里需要注意，环境变量配置了要重启终端，才会生效1
2
3
4
5
6
7Android Studio project detected
Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-27,android-26,android-25,android-24,android-23,android-22
Gradle: installed C:\Program Files\Android\Android Studio\gradle\gradle-4.1\bin\gradle然后执行
cordova build android编译项目然后执行
cordova run android运行项目，需要连接Android设备，如果是模拟器执行cordova emulate androidchrome浏览器调试chrome://inspect/#devices
Cordova 实例
调用相机demo
顺序执行下面的命令
1
2
3
4cordova create cameraDemo #创建cameraDemo相机demo
cd cameraDemo #进入工程目录
cordova platform add android #添加android
cordova plugin add cordova-plugin-camera #添加相机组件在上面步骤生成应用的目录，修改
www目录下的index.html1
2
3
4<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<button id = "camera">调用相机</button>
<button id = "wxlogin">微信</button>修改
www\js目录下的index.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
document.getElementById("camera").addEventListener("click", this.wxloginEvent);
},
wxloginEvent: function(){
// alert('触发了');
navigator.camera.getPicture(onSuccess,onFail,{
quality: 50,
destinationType: Camera.DestinationType.DATA_URL
});
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('Failed because: ' + message);
}
},
onDeviceReady: function() {
this.receivedEvent('deviceready');
},
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
window.onload=function(){ //注意添加此方法包裹，不然会还没加载就调用方法而报错
app.initialize();
}执行
cordova run android运行项目，需要连接Android设备
Cordova 加载远程HTML(修改了html，一定要清除app的缓存)
上面已经成功创建了一个相机demo，但是他是读取的本地网页，下面记录访问远程html
先分析下生成的目录结构
1 | |cordovaDemo //跟目录 |
在上面相机demo运行完项目后，用as打开生成的Android的项目(
.\platforms\android)复制
.\platforms\android\assets目录下的源码到服务器上运行，注意idea复制包名有可能丢失修改Android项目下的
res\xml\config.xml配置文件1
2<!--<content src="index.html" />-->
<content src="http://112." /> //服务器地址如果要制作个android外壳，还需要解决webview跳出到浏览器的问题，修改
CordovaLib\java\...\engine\SystemWebViewClient下的1
2
3
4
5
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// return parentEngine.client.onNavigationAttempt(url); //注释这句
return false; //添加这句，具体可以详查webview的使用
}直接在as里面运行Android项目，如果用
run android运行会覆盖修改掉的东西
config.xml文件详解
在新建的cordova项目跟目录下的config.xml将被复制到各个平台配置文件下，不会被更改，Android的是app/platforms/android/res/xml/config.xml
下面个详细介绍下里面的配置
1 |
|
app签名
在项目跟目录新建一个
build.json1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18{
"android": {
"debug": {
"keystore": "./android.keystore",
"storePassword": "android",
"alias": "mykey1",
"password" : "password",
"keystoreType": ""
},
"release": {
"keystore": "./android.keystore",
"storePassword": "",
"alias": "mykey2",
"password" : "password",
"keystoreType": ""
}
}
}复制
android.keystore到项目跟目录执行
cordova build --release android然后生成platforms\android\app\build\outputs\apk\release\app-release.apk
文档资源
常见问题
浏览器打开提示
www/cordova.js net::ERR_FILE_NOT_FOUND此错误，但是打包Android不会出现安装插件：
1
2
3Plugin doesn't support this project's cordova-android version. cordova-android: 7.0.0, failed version requirement:
<6.3.0
Skipping 'cordova-plugin-compat' for android解决执行
cordova platform rm android和cordova platform remove android然后安装cordova platform add android@6.2.0
