phonegap java调用js_Android 混合开发phonegap(Cordova)下，实现web开发中的Js和Java互相调用的功能...

1: 本机混合开发Phonegap的配置，如下：

phonegap 版本: 6.4.6

Cordova 版本: 6.5.0

图片.png

2: 创建项目

命令:

$ cordova create hello com.example.hello HelloWorld (后两个分拨是项目名称和包名)

$ cd hello

$ cordova platform add android --save

图片.png

生成的android 项目目录：

图片.png

然后导入Platforms文件夹里面的android项目，结构如下：

Paste_Image.png

下面开始实现H5和android的数据传递:

一：以H5的js为起点，实现js调用android，android返回数据js

1: index.html

加入内容：

H5demo

结果:

在这里会收到结果...

点击获取数据

device-2017-03-28-135937.png

2: index.css

加入内容：

.title{

font-size:20px;

background-color:#3F51B5;

color:white;

padding:15px 10px 15px 10px;//上，右，下，左

}

.btn{

width:120px;

height:40px;

font-size:16px;

}

.content{

font-size:20px;

}

.tip{

font-size:20px;

}

.lastparent{

margin: auto;

text-align: center;

}

device-2017-03-28-135609.png

3.index.js

加入内容:

//给H5页面中的扫描按钮调用

function addToCal() {

var title = "PhoneGap Day";

//js回调

var success = function(message) {

//alert("Success");

//改变内容

var result = document.getElementById("result");

result.innerHTML = message;

};

var error = function(message) {

alert("Oopsie! " + message);

};

calendarPlugin.createEvent(title, success, error);

}

//java直接加载js方法的调用

function javaCalljs(lastmessage){

//alert("java调用js"+lastmessage);

var result = document.getElementById("result");

result.innerHTML = lastmessage;

}

var calendarPlugin = {

createEvent: function(title, successCallback, errorCallback) {

cordova.exec(

successCallback, // success callback function

errorCallback, // error callback function

'MyPlugin', // mapped to our native Java class called "CalendarPlugin"

'addAnroidEntry', // with this action name

[{ // and this array of custom arguments to create our entry

"title": title

}]

);

}

说明：点击按钮addToCAL , 调用插件calendarPlugin的方法createEvent, 然后触发 cordova.exec, 然后调用插件Myplugin的方法exec, 这样就实现了js调用android，android返回数据js。

4: 插件Myplugin

该类是自定义的插件，来实现js调用android的功能，最终调用exec()方法

@Override

public boolean execute(String action, JSONArray args, CallbackContext callbackContext)

throws JSONException {

try {

if (ACTION_ADD_ANDROID_ENTRY.equals(action)) {

//调用android的dialog

startDialog(callbackContext);

return true;

}

callbackContext.error("Invalid action");

return false;

} catch(Exception e) {

System.err.println("Exception: " + e.getMessage());

callbackContext.error(e.getMessage());

return false;

}

}

/**

* 通过js调用java，实现js触发android功能

* @param callbackContext

*/

private void startDialog(final CallbackContext callbackContext) {

new AlertDialog.Builder(mActivity)

.setTitle("提示")

.setMessage("接收到js的触发")

.setPositiveButton("确定", new Dialog.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

callbackToJs(callbackContext);

}

})

.setNegativeButton("取消", new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

loadJsFunction();

dialog.dismiss();

}

})

.setCancelable(false)

.show();

}

点击确定按钮：由js触发插件的方法execute，然后由callbackContext回调函数，给数据js

/**

* 由js触发插件的方法execute，然后由callbackContext回调函数，给数据js

*

* @param callbackContext

*/

private void callbackToJs(final CallbackContext callbackContext){

callbackContext.success("确定按钮回复: 收到了，谢谢!");

}

二：以android的java为起点，实现java代码调用js

上面dialog，点击了取消按钮 : webview.loadurl方法可以直接调用js的功能

/**

* 不通过方法execute, java自己调用js的方法

*

* webview.loadurl需要工作的在UI主线程

*/

private void loadJsFunction(){

mActivity.runOnUiThread(new Runnable() {

@Override

public void run() {

if(mWebView != null){

mWebView.loadUrl("javascript:"+ "javaCalljs(\'"+ "取消按钮回复: java自己调用js方法" +"\')");

}else{

Log.d(TAG, "webViewCallJavascript: mwebview is null !");

}

}

});

}

device-2017-03-28-141311.png

到这里基于phonegap(cordova)的混合开发demo，实现js和andorid之间的触发数据传递就完成了！

坑1：webview，退出时，报错了E/webview: java.lang.Throwable: Error: WebView.destroy() called while still attached!

解决:

@Override

public void onDestroy() {

//解除webview绑定在父布局的情况，不用时，需要释放

ViewGroup viewGroup = (ViewGroup)mActivity.findViewById(android.R.id.content);

SystemWebView webView = (SystemWebView) viewGroup.getChildAt(0);

viewGroup.removeView(webView);

webView.removeAllViews();

mWebView = null;

super.onDestroy();

}

坑2：SystemWebChromeClient: file:///android_asset/www/index.html: Line 54 : Refused to execute inline event handler because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Either the 'unsafe-inli.........

解决: index.html中, 以