H5与原生互相调用,WebViewJavaScriptBridge使用

苏君昊
2023-12-01

为了提高开发效率,开发人员往往会使用原生app里面嵌套前端h5页面的快速开发方式,这就要涉及到h5和原生的相互调用,互相传递数据,接下来就实践项目中的交互方式做一个简单的记录分享,废话不多说,直接上正文:

先贴上判断访问终端的代码,直接拿去使用

//判断访问终端
function browserVersion(){
    var u = navigator.userAgent;
    return {
        trident: u.indexOf('Trident') > -1, //IE内核
        presto: u.indexOf('Presto') > -1, //opera内核
        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
        iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
        iPad: u.indexOf('iPad') > -1, //是否iPad
        webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
        weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
        qq: u.match(/\sQQ/i) == " qq" //是否QQ
    };
}

一.与原生安卓的交互:

1.安卓调用js传递数据,js接收数据:最原始的安卓调用方式,js全局写一个方法,供安卓原生调用,接收数据,js处理数据,页面渲染,例如:

function testMessage(data){
    console.log(data);
    //业务逻辑。。。
}
//接受到的data即为原生安卓调用js的方法,传递过来的数据,js拿到数据,处理业务逻辑

2.js调用原生的方法,执行原生的业务逻辑,例如:执行原生的方法,跳转到原生的页面

$(document).on("click",".testButten",function(){
        console.log("跳转原生页面")
        window.Android.goTestPage();
        //安卓直接调用,用来处理简单的逻辑
})

如果业务逻辑比较复杂,建议使用WebViewJavaScriptBridge交互封装,统一管理,方便维护。

二.使用WebViewJavaScriptBridge完成H5和原生的交互(ios)

// IOS
// 互相调用都要加这个方法
function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
setupWebViewJavascriptBridge(function(bridge) {

    //注册一个方法(方法名是“registerJSmethod”),客户端进行调用(方法名也是“registerJSmethod”),responseCallback是回调函数
    bridge.registerHandler('registerJSmethod', function(data, responseCallback) {
        console.log(data)
        responseCallback(data)
    })

    //客户端已经注册好一个名为“registerOCmethod”的方法,H5直接进行调用(方法名也为“registerOCmethod”)就行,调用的时候可以传客户端需要的参数
    bridge.callHandler('registerOCmethod', {'key':'value'}, function responseCallback(responseData) {
        console.log("registerOCmethod:", responseData)
    })
})

三.使用WebViewJavaScriptBridge完成H5和原生的交互(andriod)安卓提供两种方法,第一使用原始的调用方法,第二使用WebViewJavaScriptBridge方法,各取所需:

1.根据设备类型判断设备是android还是ios,执行相应的操作:

function toPageJS(paramData){
            if(browserVersion().ios){
                //ios执行ios的方法,调用原生
                WebViewJavascriptBridge.callHandler('jumpPage',url, function(response){})
            }else if(browserVersion().android){
                //安卓,执行android方法,调用原生
                window.Android.toPage(url);
            }
        }
    }
}

2.WebViewJavaScriptBridge方法,和ios的方式一样:复制下面代码到你的js中

function connectWebViewJavascriptBridge (callback) { 
     if (window.WebViewJavascriptBridge) {
           callback(WebViewJavascriptBridge)
     } else {
           document.addEventListener(
               'WebViewJavascriptBridgeReady'
                , function() {
                     callback(WebViewJavascriptBridge)
                },
                false
           );
     }
}

执行相互调用:

connectWebViewJavascriptBridge (function(bridge) {

    //注册一个方法(方法名是“registerJSmethod”),客户端进行调用(方法名也是“registerJSmethod”),responseCallback是回调函数
    bridge.registerHandler('registerJSmethod', function(data, responseCallback) {
        console.log("registerJSmethod:", data)
        responseCallback(data)
    })

    //客户端已经注册好一个名为“registerOCmethod”的方法,H5直接进行调用(方法名也为“registerOCmethod”)就行,调用的时候可以传客户端需要的参数
    bridge.callHandler('registerOCmethod', {'key':'value'}, function responseCallback(responseData) {
        console.log("registerOCmethod:", responseData)
    })
})

完活!有错误欢迎指正。

 类似资料: