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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JetpropelledSnake

Django学习笔记之Django Form表单详解

这是一个非常简单的表单。实际应用中,一个表单可能包含几十上百个字段,其中大部分需要预填充,而且我们预料到用户将来回编辑-提交几次才能完成操作。

10210
来自专栏赵俊的Java专栏

无限级菜单/权限树该如何设计

常用的树形显示插件有: JsTree, zTree, Layui Tree, Bootstrap Tree View 等。

81730
来自专栏python3

beautiful soup爬虫初识

官方推荐使用lxml作为解析器,因为效率更高. 在Python2.7.3之前的版本和Python3中3.2.2之前的版本,必须安装lxml或html5lib, ...

14640
来自专栏IMWeb前端团队

通过ffi在node.js中调用动态链接库(.so/.dll文件)

? 概述 为什么要在node.js中调用动态链接库 由于腾讯体系下的许多公共的后台服务(L5, CKV, msgQ等)已经有了非常成熟的C/C++编写的API...

62970
来自专栏向前进

【笔记】HybridApp中使用Promise化的JS-Bridge

背景: HybridApp,前端采用JS-bridge的方式调用Native的接口,如获取设备信息、拍照、人脸识别等 前端封装了调用库,每次调用Native接口...

35740
来自专栏大内老A

依赖注入[4]: 创建一个简易版的DI框架[上篇]

本系列文章旨在剖析.NET Core的依赖注入框架的实现原理,到目前为止我们通过三篇文章(《控制反转》、《基于IoC的设计模式》和《 依赖注入模式》)从纯理论的...

14230
来自专栏mathor

request.getPramamter()的用法

 action:目标地址,把请求交给谁处理;action可以不设置,也可以是空字符串(提交给自己处理)

31610
来自专栏分布式系统进阶

Cluster版本中的Meta

12140
来自专栏Java3y

【不用框架】文件上传和下载

什么是文件上传? 文件上传就是把用户的信息保存起来。 为什么需要文件上传? 在用户注册的时候,可能需要用户提交照片。那么这张照片就应该要进行保存。 上传组件(工...

64840
来自专栏ccylovehs

JavaScript异步编程

平时开发经常会用到js异步编程,由于前端展示页面都是基于网络机顶盒(IPTV的一般性能不太好,OTT较好),目前公司主要采取的异步编程的方式有setTimeou...

15620

扫码关注云+社区

领取腾讯云代金券