一、android端配置：

1、首先进行webView的配置

Webview webView=findViewById(rId);

WebSettings settings = webView.getSettings();

// 设置WebView支持JavaScript 必须设置

settings.setJavaScriptEnabled(true);

2、定义web端要调用的类，同时提供给web端

/**

* js调用android

*/

public class WebFunction {

//这个是js调用android，给我传递参数。参数是相互定义好的

@JavascriptInterface

public void goToDetails(int id) {

//方法体

}

}

//将该方法提供给web端

//第一个参数是上面创建的类对象，

//第二个参数是android和web交互的唯一标识符，web端使用该标识符调用类对象的方法

webView.addJavascriptInterface(new WebFunction(), "WebFunction");

二、Ios端设置(使用的是WKWebView)

// 进行配置控制器

WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];

// 实例化对象

configuration.userContentController = wkUController;

[configuration.userContentController addScriptMessageHandler:self name:@"goToDetails"];

注：本人是android开发，ios代码只是复制的，goToDetails是一个方法，提供给web端调用，与下面web调用的方法名一致

三、web端设置

//判断是否为ios端访问

function _IsIOS() {

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {

return true;

} else {

return false;

}

}

//判断是否为android端访问

function _IsAndroid() {

if (/(Android|Adr)/i.test(navigator.userAgent)) {

return true;

} else {

return false;

}

}

//下面是web端在点击事件中调用移动端方法

//点击调用移动端方法

function onItemClick(audioId) {

if (_IsAndroid()) {

//WebFunction是android和web定义的标识类对象的唯一标识符，和android里传递的标识符是一 一对应的，goToDetails是类对象的方法名。

WebFunction.goToDetails(audioId);

} else if (_IsIOS()) {

try {

//调用格式： window.webkit.messageHandlers.方法名(与Ios定义的方法名一样).postMessage(参数);

window.webkit.messageHandlers.goToDetails.postMessage(id);

} catch (error) {

console.log(error)

}

}

}

web代码复制的，仅供参考

H5补充使用vue框架的写法：

vue框架的写法.png