WebView之app与h5间的交互

本文详细介绍了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接口定义的回调用方法

2、下发参数的形式

待完善!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值