介绍
@jingsam/whoots-js 是一个能够快速实现 WebView 与原生端通讯的 JavaScript 库。它基于原生与 WebView 能够相互调用函数的特性，封装了一些常用的通讯方法，可以帮助开发者快速实现 WebView 与原生端的双向通讯。
安装
首先，需要安装 npm 包：
npm install @jingsam/whoots-js --save
快速开始
在 HTML 页面中，引入 @jingsam/whoots-js 库：
<script src="node_modules/@jingsam/whoots-js/dist/whoots.bundle.js"></script>
在 JavaScript 代码中，初始化 Whoots 对象：
const whoots = new Whoots();
向原生端发送消息：
whoots.postMessage({ cmd: 'get_token', data: { user_id: 12345, }, }, (res) => { console.log(res); });
在原生端，通过注册 WebViewJavascriptBridge 对象来监听来自 WebView 的消息：
[bridge registerHandler:@"whoots.postMessage" handler:^(id data, WVJBResponseCallback responseCallback) { // 处理来自 WebView 的消息 }];
API 文档
Whoots 对象包含以下方法：
postMessage
向原生端发送消息。
whoots.postMessage(message[, callback]);
参数
message：要发送的消息，必填。消息应该是一个对象，包含以下字段：cmd：命令，字符串类型，必填。data：消息数据，对象类型，可选。
callback：回调函数，可选。当原生端返回数据时，会调用此回调函数，并且传递原生端返回的数据作为参数。
registerHandler
注册消息处理函数，用于接收原生端发送的消息。
whoots.registerHandler(command, handler);
参数
command：命令，字符串类型，必填。要监听的命令。handler：回调函数，必填。原生端发送消息时，会根据命令找到对应的handler函数，并且将消息数据作为参数传递给handler函数。
callHandler
调用原生端的函数。
whoots.callHandler(method[, data[, callback]]);
参数
method：要调用的原生端函数名，字符串类型，必填。data：要传递给原生端函数的参数，对象类型，可选。如果原生端函数不需要参数，可以省略此参数。callback：回调函数，可选。当原生端函数返回数据时，会调用此回调函数，并且传递原生端返回的数据作为参数。
示例代码
在上面提到的快速开始中，我们已经给出了示例代码。下面，我们来看一些更具体的例子。
HTML
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- ---------------- ------------------------- ------------ ------- --------------------------------------------------------------------- -------- ----- ------ - --- --------- -- ---------- ------------------------------------ ------ --------- -- - -------------------- --- -- -------- -------------------- ---- ---------------- ----- - -------- ------ -- -- ----- -- - ----------------- --- --------- ------- ------ ---------------------- --------- ------- -------展开代码
原生端（iOS）
-- -------------------- ---- ------- - ----------------- - ------ ------------- -- --- ----------------------- -- ----------- - ------------------------ ------------------------------- -- -- -------------------- ------ ------------ ------------------------------------- ------------ ----- -------------------- ----------------- - -- --- ------- ----- --- -- -- ------- -- -------------------- -- ------------ -------- - -- ------- -------------- -------- -- ----------- --------- - -- ------------ --------------------------------- ------------ ---------------------- -展开代码
原生端（Android）
-- -------------------- ---- ------- --------- --------- ---- --------------- ------------------- - ----------------------------------- -- --- ------------- -- ------------ - --- -------------------- -- -- -------------------- ------ -------------------------------------------------- --- --------------- - --------- ------ ---- -------------- ----- ---------------- ----------------- - -- --- ------- ----- - --- -- -- ------- -- -------------------- -- ---------- ------- - --- ------------- --- - ------------------ -------------- ---------- ---- - --- ------------- ------------------- ---------- ------------------- ------ - ----- -------------- -- - -------------------- - ---------------------------------------------- ------------------- ------ ---------------------------------- -展开代码
总结
@jingsam/whoots-js 是一款非常实用的 JavaScript 库，可以帮助开发者快速实现 WebView 和原生端通讯的功能。通过本文的介绍和示例代码，相信大家已经对 @jingsam/whoots-js 库有了更加深入的了解，希望大家能够在实际项目中使用它，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/107440
