WKWebView与H5交互的两种方式

交互方式一:原生交互(以WKWebView为栗子)

1.原生调用H5方法
[wkWebView evaluateJavaScript:@"js方法名" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
    if (!error) { // 成功
       NSLog(@"%@",response);
    } else { // 失败
        NSLog(@"%@",error.localizedDescription);
    }
}];
H5调用原生方法
1> App端:
  // 1. WKWebView注入ScriptMessageHandler
 [wkWebView.configuration.userContentController addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:@"xxx"];
  // 2. 提供setWebViewAppearance方法,这样就能反射出H5即将传来的字符串@"setWebViewAppearance"
  - (void)setWebViewAppearance {
  
  }
  
2> H5端:
  // 1. 获取handler
  var handler = { 
    callHander: function (json) {
    if (iOS端) {
        window.webkit.messageHandlers.xxx.postMessage(JSON.stringify(json))
    }
    if (安卓端) {
        window.xxx.postMessage(JSON.stringify(json));
    }
  }
  // 2. 设置调用App方法所需要的传出的参数(这里是json格式)
  function setAppAppearance(){
    handler.callHander({
        'body':"setWebViewAppearance",
        'buttons': [
            {
                "text":"分享",
                "action":""
            }
        ],
        'title':"这是webView的标题"
    });
  } 
  // 3. H5调用自己的设置方法,继而调用了原生客户端的方法
  setAppAppearance()

注意:出现的xxx的位置要保持一致,这个字符串是客户端与H5约定好的,可以是任意字符串,但最好易懂为宜。

交互方式二:借助第三方库WebViewJavascriptBridge交互

WebViewJavascriptBridge地址:
https://github.com/marcuswestin/WebViewJavascriptBridge

1.原生调用H5方法
1> App端:
// 1. 初始化
WKWebViewJavascriptBridge *bridge =  [WKWebViewJavascriptBridge bridgeForWebView:self.webView webViewDelegate:self handler:^(id data,   WVJBResponseCallback responseCallback) {
    
}];
// 2. App callHandler是调用H5提供方法,方法名为:getShareInfo
[bridge callHandler:@"getShareInfo" handler:^(id data, WVJBResponseCallback responseCallback) {
    
}];

2> H5端:
// 1. 初始化
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 = 'https://__bridge_loaded__';
  document.documentElement.appendChild(WVJBIframe);
  setTimeout(function() {     document.documentElement.removeChild(WVJBIframe) }, 0)
}
// 2. H5 registerHandler是给App提供方法,方法名为:getShareInfo
[bridge registerHandler:@"getShareInfo" handler:^(id data, WVJBResponseCallback responseCallback) {
}];
2.H5调用原生方法
1> App端:
// 1. 初始化
WKWebViewJavascriptBridge *bridge =  [WKWebViewJavascriptBridge bridgeForWebView:self.webView webViewDelegate:self handler:^(id data,   WVJBResponseCallback responseCallback) {
    
}];
// 2. App registerHandler是给H5提供方法,方法名为:showShare
[bridge registerHandler:@"showShare" handler:^(id   data, WVJBResponseCallback responseCallback) {
  
}];

2> H5端:
// 1. 初始化
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 = 'https://__bridge_loaded__';
  document.documentElement.appendChild(WVJBIframe);
  setTimeout(function() {     document.documentElement.removeChild(WVJBIframe) }, 0)
}
// 2. H5 callHandler是调用App提供方法,方法名为:showShare
[bridge callHandler:@"showShare" handler:^(id data, WVJBResponseCallback responseCallback) {
    
}];

另附上WKWebView详解的两篇文章,写的还是相当详细的。

第二种交互方法的详尽文章
传送门:https://www.cnblogs.com/chaoyuehedy/p/8583272.html


转自:https://www.jianshu.com/p/cb25d94d814b

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序与H5实时交互是指小程序与H5页面之间能够实现数据通信和交互的功能。小程序是一种在App内嵌的轻量级应用,而H5页面是在浏览器中运行的网页。他们之间的实时交互可以为用户提供更加强大和丰富的功能和用户体验。 小程序与H5实时交互的实现方式主要有两种:跳转和通信。 首先,跳转是指小程序内的某个功能或页面需要调用H5页面来完成,或者H5页面中的某个功能需要跳转到小程序来实现。这主要通过使用小程序提供的跳转接口和自定义链接来实现。通过在小程序中调用打开H5页面的接口,传递相应的参数,即可将用户带到指定的H5页面。同样地,在H5页面中通过使用小程序提供的自定义链接,用户点击后即可跳转到指定小程序的对应页面。 其次,通信是指小程序与H5页面之间能够实现数据的传递和交互。这主要通过使用小程序提供的Webview组件和JavaScript Bridge技术来实现。小程序内的Webview组件可以加载H5页面,通过JavaScript Bridge可以实现小程序与H5页面之间的相互调用和数据传递。通过在小程序中调用JavaScript Bridge提供的API,可以将小程序内的数据传递给H5页面,在H5页面中可以获取到相关数据进行处理,然后再将处理结果返回给小程序。 综上所述,小程序与H5实时交互能够为用户提供更加强大和丰富的功能和用户体验,通过跳转和通信的方式可以实现小程序和H5页面之间的数据传递和交互。这为开发者提供了更多的选择和灵活性,能够根据具体需求选择合适的方式来实现小程序与H5页面的实时交互

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值