WebView之app与h5间的交互

有时候,h5需要调用app的方法,并且回调调用结果给h5,这就是app与h5之间的交互了。

1、javascript方式

h5调用app方法:
在app端定义要执行的方法,h5在需要的地方调用该方法。
app端:
第一步:初始化设置

WebSettings mSettings = this.getSettings();
mSettings.setJavaScriptEnabled(true);   //开启javascript

第二步:添加js接口

//第二个字段是WebViewJsInterface接口的对象名,在h5调用时需要用到
mWebView.addJavascriptInterface(new WebViewJsInterface(), "android");

第三步:定义接口方法,给h5调用

public class WebViewJsInterface {
	@JavascriptInterface
	public void actionShare(String json) {
   	 //TODO
	}
}

第四步:在h5页面加载完后注入js代码(让h5能够识别当前是android调用还是ios调用):

mWebView.setWebViewCallback(new ProgressWebView.WebViewCallback() {
    @Override
    public void onPageFinished(WebView view, String url) {
        //加载一个js,返回当前的平台信息:android
        view.loadUrl("javascript:function qlClient(){return \"android\";}");
        //TODO
    }

    @Override
    public void onShouldOverrideUrlLoading(WebView view, String url) {
    }
});

h5端:
判断当前调用对象(android/ios/h5),然后执行相应的方法:

function onClick(){
	switch(qlClient()){
    	case "android":
        	//TODO
        	window.android.actionShare(json)
        	break;
    	case "ios":
        	//TODO
        	break;
    	case "h5":
        	//TODO
        	break;
	}
}

//注意:window.android.actionShare(json);分析
window:固定写法
android:是mWebView.addJavascriptInterface(new WebViewJsInterface(), "android");的第二个参数
actionShare(json):是js接口定义的回调用方法

2、下发参数的形式

待完善!!!

猜你喜欢

转载自blog.csdn.net/u012587024/article/details/82970536