OC与JS(Vue)交互用WKWebView

最新推荐文章于 2021-12-07 14:47:44 发布

懒懒树hi

最新推荐文章于 2021-12-07 14:47:44 发布

阅读量1w

点赞数

分类专栏： ios

本文链接：https://blog.csdn.net/weixin_42045633/article/details/90261623

版权

ios 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.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)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    //        NSLog(@"*************%@",message);
    //        NSLog(@"*************%@",message.body);
    NSLog(@"*************%@",message.name);
    if ([message.name isEqualToString:@"btnClick"]) {
       //做OC原生操作,例如[WXAUTH sendWXAuthReq]等等
 
    }  
}

//3.移除
- (void) dealloc {
    [self.config.userContentController removeScriptMessageHandlerForName:@"btnClick"];
}

二.OC调用JS(未实践）

转https://blog.csdn.net/vickylizy/article/details/85098857

2.1 JS(Vue)部分

created() {
    //Vue的方法给原生调用，则需要把方法挂在Window下面
    window.getmydate = this.getmydate;
},
methods: {
  getmydate(params) {
    //params: 原生调用Vue时传值（params）给Vue
    console.log("得到原生传值结果:" + params);
    var dic = {
        'name': "xxxx"
    };
    return dic; //回调给原生，可写可不写
  },

2.2 原生OC

NSString *toVueSting = @"vickylizy";
 
NSString *jsStr = [NSString stringWithFormat:@"getDataFromNative('%@')",toVueSting];
[self->_wkWebView evaluateJavaScript:jsStr completionHandler:^(id _Nullable d, NSError * _Nullable error) {
     NSLog(@"返回---%@",d);//回调值
}];

另外测试用：加载本地文件

oc代码

//测试加载本地文件
NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
if (path) { 
    NSURL *fileURL = [NSURL fileURLWithPath:path];
    [self.webView  loadRequest:[NSURLRequest requestWithURL:fileURL]];
}

本地index.html代码

//网上demo，测试可以成功
<html>
<header>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">

        function btnClick() {
          test({
            testString: "testString",
            result: function(data) {
              //理论上传过来的是转成JSON格式字符串的MAP,需要统一一下KEY值
            // 此处demo相当与document.getElementById("demo")
              demo.innerHTML = data["data"];
            }
          })
        }

        function test(testData) {
          var testStr = testData.testString
          var result = testData.result
          //此处不能直接将回调函数传给iOS需要将回调函数转成字符串,其他的保持不变即可
          testData.result = result.toString()
          window.webkit.messageHandlers.btnClick.postMessage(testData);
        }

    </script>
</header>
<body bgcolor="red">
    <h2> js回调Test </h2>
    <br/>
    <br/>
    <button type="button" onclick="btnClick()">test回调</button>
    <br/>
    <br/>
    <p id="demo">暂无回调</p>
</body>
</html>

懒懒树hi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
OC与JS(Vue)交互用WKWebView

一.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: ...
复制链接

扫一扫