android h5和原生方法调用,移动端之H5与原生交互

为保证js加载初始化数据,并且保证交互时机,iOS端在页面加载完成时会对js注入

webviewDidFinishLoading 函数,用以通知页面交互通道已经创建完成,页面可以基于此时间点进行后续逻辑。

1、公共协议

APP与H5联调规范

1、与APP联调首先判断机型即:Android 和 iOS

调APP方法要传的参数格式:

var u =navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端'//交互规范

{'command': '要调用的APP方法名',(必填,格式为 string'parameter': '要传递给APP端的参数'(没有可以不传，格式为json格式)'callback': 'APP执行成功后回调JS的方法'(不是必填项，格式为string)}

2、调起APP端统一方法名为:NativeFunction() 给APP端传递参数的时候要转为json字符串 即:

JSON.stringify({'command': 'nativeFunction','parameter':parameterObj,'callback': 'callbackFn'})//以唤起APP端登录页面为例:App 方法名为:'loginsService'

if(isiOS) { //iOS设备

window.webkit.messageHandlers.NativeFunction.postMessage(JSON.stringify({'command': 'loginsService','parameter': loginObj,'callback': 'loginBack'}))

}else if(isAndroid){ //Android设备

window.jsobj.NativeFunction(JSON.stringify({'command': 'loginService','parameter': loginObj,'callback': 'loginBack'}))

}

2、业务模块交互协议

3、Android和H5 JS交互方式

js调用数据格式：

public class OpenProtocol implements Serializable {/**

* command : loginService

* parameter : {"name":"ly","age":18}

* callback : loginBack*/private String command;

private String parameter;

private String callback;

}

使用方式：

@android.webkit.JavascriptInterface public void NativeFunction(finalString jsonstring) {

openProtocol= new Gson().fromJson(jsonstring, OpenProtocol.class);if (openProtocol.getCommand().equals("loginService")) { //判断command

final ToJsResult < String > toJsResult = new ToJsResult < String > (); //自定义返回Json数据

toJsResult.setCode("0");

toJsResult.setData("success");

InvokeJsMethod(openProtocol.getCallback(),newGson().toJson(toJsResult).toString());

}else if (openProtocol.getCommand().equals("faceRecognitionService")) { //跳转人脸识别

MyRouter.create("host://FaceDetectActivityFace").withInt("FaceConfirm", PublicConstant.FACE_LOGIN).open(this, PublicConstant.FACE_LOGIN);final ToJsResult < String > toJsResult = new ToJsResult < String >();

toJsResult.setCode("0");

toJsResult.setData("success");

InvokeJsMethod(openProtocol.getCallback(),newGson().toJson(toJsResult).toString());

}/*** 调用JS方法以及需要传入js的参数

*@parammethod

*@paramparameter*/

public void InvokeJsMethod(final String method, finalString parameter) {

webView.loadUrl("javascript:" + method + "('" + parameter + "')");

}

4、项目使用

引入

WebViewJavascriptBridge_my.js

(functioninitJsBridge() {var u =navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

//注册jsbridge

functionconnectWebViewJavascriptBridge(callback) {if(isAndroid) {if(window.WebViewJavascriptBridge) {

callback(WebViewJavascriptBridge)

}else{

document.addEventListener('WebViewJavascriptBridgeReady',function() {

callback(WebViewJavascriptBridge)

},false);

}return;

}if(isiOS) {if(window.WebViewJavascriptBridge) {returncallback(WebViewJavascriptBridge);

}if(window.WVJBCallbacks) {returnwindow.WVJBCallbacks.push(callback);

}

window.WVJBCallbacks=[callback];var WVJBIframe = document.createElement('iframe');

WVJBIframe.style.display= 'none';

WVJBIframe.src= 'https://__bridge_loaded__';

document.documentElement.appendChild(WVJBIframe);

setTimeout(function() {

document.documentElement.removeChild(WVJBIframe)

},0)

}

}//调用注册方法

connectWebViewJavascriptBridge(function(bridge) {if(isAndroid) {

bridge.init(function(message, responseCallback) {//console.log('JS got a message', message);

responseCallback(data);

});

}//APP主动调用js方法，预留

bridge.registerHandler('appCallJs', function(data, responseCallback) {

sessionStorage.setItem("user", JSON.stringify(JSON.parse(data).data))//showResponse(data);//页面展示逻辑

//responseCallback('native 传过来的是：' + data);//js返回APP回调

});//readyCallback();

});

}())

call_app ：

/**

* 分享链接

* @param data：{

* contentURL：分享链接，

* contentTitle：分享标题，

* imageURL：分享图片

* contentDescription:成功回调方法，

* successFunc:成功回调方法

* }*/shareURL(data){if(window.WebViewJavascriptBridge){

window.WebViewJavascriptBridge.callHandler('jsCallApp', {"method":"share","contentURL":data.contentURL,"contentTitle":data.contentTitle,"imageURL":data.imageURL,"contentDescription":data.contentDescription

},function(response) {

data.successFunc(response);

});

}

}/*修改状态栏颜色*/changeAppColor(data){if( window.WebViewJavascriptBridge){

window.WebViewJavascriptBridge.callHandler('jsCallApp', {"method": "changeAppColor","color": data.color

},function(response) {

data.successFunc(response);

});

}

}

调用：

/**

* 分享

* contentURL：分享链接，

* contentTitle：分享标题，

* imageURL：分享图片

* contentDescription:成功回调方法，

* successFunc:成功回调方法

**/share() {

let _this= this;

call_app.shareURL({

contentURL: _this.agentinfor.card_tdc.card_tc,

contentTitle:

JSON.parse(sessionStorage.getItem("user")).agent_name + "的名片",

imageURL:"",

contentDescription:"",

successFunc:function(data) {}

});

},