H5(vue)与iOS通信

UIWebView与H5交互（JavaScriptCore）

1. iOS调用H5的两种方法
   (1) WebView直接调用

    NSString * jsStr = @"getData";
    [self.webView stringByEvaluatingJavaScriptFromString:jsStr];

(2) JSContext调用
引入#import <JavaScriptCore/JavaScriptCore.h>框架
定义 JSContext 属性，在UIWebViewDelegate的代理方法里实现一下代码

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    //首先创建JSContext对象，通过当前的webViewV的键获取到JSContext
    self.context = [webView valueForKey:@"documentView.webView.mainFrame.javaScriptContext"];
    NSString * jsStr = @"getData";
    [self.context evaluateScript:jsStr];
    NSLog(@"%s",__func__);
}

⚠️ 如果Vue的方法给原生调用，则需要把方法挂在window下面

created (){
    windows.getData = this.getData
},

2. H5调用iOS方法
   在WebView的webViewDidFinishLoad代理方法利用JSContext给H5注入对象

 self.context[@"share"] = ^(){
        NSArray * args = [JSContext currentArguments];
        for (JSValue * value in args) {
            NSLog(@"%@",value.toString);
        }
    };

在vue中直接用windows.<方法名>调用iOS的方法。

WKWebView与H5交互 （messageHandlers）

• iOS调用vue方法
  （1）如果Vue的方法给原生调用，则需要把方法挂在window下面

created (){
    windows.getData = this.getData
},

（2）在iOS中调用vue的方法，如下

    NSString * jsStr = @"getData";
    [self.wkWebView evaluateJavaScript:jsStr completionHandler:^(id _Nullable data, NSError * _Nullable error) {
        NSLog(@"返回数据%@----错误%@",data,error);
    }];

• vue调用iOS方法
  （1）在iOS中遵守WKScriptMessageHandler,定义WKWebViewConfiguration并设置userContentController

@interface WKWebViewViewController ()<WKNavigationDelegate,WKUIDelegate,WKScriptMessageHandler>
@end

  WKWebViewConfiguration * Configuration = [[WKWebViewConfiguration alloc]init];
// 添加消息处理，注意：self指代的对象需要遵守WKScriptMessageHandler协议，结束时需要移除
 [UserContentController addScriptMessageHandler:self name:@"download"];

(2) 在WKScriptMessageHandler协议的代理方法里面根据message.name来判断js是否调用并作出相关的处理，message.body即为js传过来的参数

#pragma mark  WKScriptMessageHandler
// 从web界面中接收到一个脚本时调用
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
   if ([message.name isEqualToString:@"download"]) {
       NSLog(@"%@",message.body);
   }
}

vue中调用iOS方法

windows.webkit.messageHandlers.download.postMessage(
  {
    title:'分享标题'
    content：'分享内容'
    url：'http://www.baidu.com'
  }
)

使用第三方WebViewJavascriptBridge

• iOS设置
  WebViewJavascriptBridge下载链接

1. iOS项目中引入#import "WebViewJavascriptBridge.h"，并声明

@property WebViewJavascriptBridge * bridge;

把以下代码加入到创建WebView后，加载URL之前

if (_bridge) { return; }
[WebViewJavascriptBridge enableLogging];
_bridge = [WebViewJavascriptBridge bridgeForWebView:self.wkWebView];
[_bridge setWebViewDelegate:self];

__weak typeof(self) weakSelf = self;
//  js调用iOS方法
[self.bridge registerHandler:@"iosDownload" handler:^(id data, WVJBResponseCallback responseCallback) {
          NSLog(@"----下载成功", data);
}];
// iOS调用js的方法
[_bridge callHandler:@"iosDownloadComplete" data:@"pdf路径" responseCallback:^(id responseData) {
       NSLog(@"调用完js后的回调  %@",responseData);
}];

⚠️ 执行完上面代码在加载H5的URL，不然对象注入不会成功

• vue操作
  在Vue中引入WebViewJavascriptBridge：

1. 创建 src/config/bridge.js 文件，用于封装 WebViewJavascriptBridge，将以下代码拷贝到 bridge.js 文件中,以下代码是固定的

function setupWebViewJavascriptBridge (callback) {
  if (window.WebViewJavascriptBridge) {
    return callback(window.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)
}

export default {
  callhandler (name, data, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.callHandler(name, data, callback)
    })
  },
  registerhandler (name, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.registerHandler(name, function (data, responseCallback) {
        callback(data, responseCallback)
      })
    })
  }
}

2. 在 main.js 中引入该文件

import Bridge from './config/bridge.js'
Vue.prototype.$bridge = Bridge

在需要调用客户端方法的组件中（事先需要与同事约定好方法名）

this.$bridge.callhandler('iosDownload', params, (data) => {
 // 处理返回数据
})

iOS需要调用 js 函数（事先注册约定好的函数即可）

this.$bridge.registerhandler('iosDownloadComplete', (data, responseCallback) => {
  alert('JS Echo called with:', data)
  responseCallback(data)
})