OC与JS(Vue)交互用WKWebView

最新推荐文章于 2022-02-11 15:54:05 发布

原创

最新推荐文章于 2022-02-11 15:54:05 发布 · 1w 阅读

0 ·

CC 4.0 BY-SA版权

一.JS调用OC(实践ok)

应用场景举例：点击H5页面的分享按钮，调用起原生OC的微信分享功能

1.1 JS(Vue)部分

<div @click="btnClick">04/21-04/25<div>

//script方法实现处加上window.webkit.messageHandlers.xxx.postMessage(),xxx为方法名
methods: {
   btnClick() {
      window.webkit.messageHandlers.btnClick.postMessage({
          title: this.onCity, //vue给iOS传值
      });
   },

1.2 原生OC

<WKScriptMessageHandler>

//1.进行配置，在webView初始化的时候
  WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
  config.userContentController = [[WKUserContentController alloc] init];
  //意思是网页中需要传递的参数是通过这个JS中的showMessage方法来传递的
  [config.userContentController addScriptMessageHandler:self name:@"btnClick"];
    
  self.webView = [[WKWebView alloc]initWithFrame:self.view.frame configuration:config];

//2.实现
#pragma mark - WKScriptMessageHandler
- (void)use