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

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

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


            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 保证方法注册不会重复),从而实现回调

            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' 安装

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容