WebView之app与h5间的交互

最新推荐文章于 2025-05-21 09:20:20 发布

原创最新推荐文章于 2025-05-21 09:20:20 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

android 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了H5与App通过JavaScript接口进行交互的过程。包括在App端设置WebSettings，添加JS接口，定义方法供H5调用，以及在H5端如何识别并调用这些方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候，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接口定义的回调用方法