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