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..postMessage()会调用一个原生的方法,这样在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' 安装

你可能感兴趣的:(MessageHandler 高级用法二:原生调用JS 实现回调)