前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >MessageHandler 高级用法二:原生调用JS 实现回调

MessageHandler 高级用法二:原生调用JS 实现回调

作者头像
onety码生
发布2018-11-21 10:55:33
4.1K0
发布2018-11-21 10:55:33
举报
文章被收录于专栏:码生

在 上一篇中 我们实现了原生和JS 的方法调用,这篇解决一下在 APP 中调用JS方法时怎么含有 JS 的回调

首先我们的期望是在JS中采用如下写法回调:

代码语言:javascript
复制
            function testCallBack(data, callBack) {

                var add = document.getElementById('add');

                var newTestNode = document.createElement('p');

                newTestNode.innerHTML = data;

                add.appendChild(newTestNode);

                callBack('已经添加' + data);
            };

这样在 JS 中直接使用 callBack 便可以回调APP,并可以传输参数 我的思路就是: 我们在调用 JS 代码的时候 testCallBack 第二个参数我们穿进去一个已经实现过的 function 这个function 内部在通过 window.webkit.messageHandlers.<appMethod>.postMessage(<body>)会调用一个原生的方法,这样在JS中通过 callBack 调用时候,就回调了APP

至于 appMethod 我们可以通过 regist(name: handler) 来实现,我这里是随机生成一个字符串作为 name(随机 name 保证方法注册不会重复),从而实现回调

代码语言:javascript
复制
            var uuid = UUID.init().uuidString
            
            uuid = uuid.replacingOccurrences(of: "-", with: "")
            
            // js func 不允许数字开头
            uuid = "kk" + uuid
            
            self.regist(name: uuid, handler: { [weak self] (data) in
                
                self?.remove(name: uuid)
                
                cb(data)
                
            })
            
            funcjs = "function(data) {window.webkit.messageHandlers.\(uuid).postMessage(data)}"

上面代码中的 funcjs 会最为 调用js代码中方法中的第二个参数 callBack 这样就已经实现了调用JS时,JS能够回调

上面的源码可以在 https://github.com/TieShanWang/WKJSHandler 上面找到 当然也可以直接使用 cocoapod 使用 pod 'WKJSHandler' 安装

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.07.31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档