web前端（html+css+jQuery）和移动端（Android和Ios）进行交互

一、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

推荐使用JsBridge