在移动端前端开发中，我们常常需要在 webview 内嵌入 H5 页面，并且需要实现原生和 H5 页面间的交互。此时，我们可以使用 wvbridge 这个 npm 包。
wvbridge 是一款用于解决 H5 与原生应用之间互调的桥梁，它的主要作用是将 H5 中的数据传递给原生应用，并监听原生应用发来的指令。相较于其他解决方案，它的优势在于使用简单，代码量少，易于维护。
安装
使用 npm 进行安装：
--- - --------
使用方法
1. 原生应用的实现
在原生应用中，需要将 wvbridge 注入到 webview 中，使其能够在 H5 页面中调用。
------- ------------- --------- -- ------- -- -- -- -------- - ------- - -----------------------------
当 H5 页面从原生应用中打开时，需要将数据传递到 H5 页面。可以使用 wvbridge 的 send 方法实现。
------ ---- - ------ -------- -------------------------
同样地，当 H5 页面需要调用原生应用时，可以使用 wvbridge 的 registerHandler 方法实现。例如：
-------------------------------------------- --- --------------- -
---------
------ ---- -------------- ----- -------- --------- -
-- ------
-------- -------- - --------------
-- -------- -- --
------------------------------------
-
---2. H5 页面的实现
在 H5 页面中，我们需要引入 wvbridge.js，并在页面加载完成后初始化它。例如：
------
------
--------------- ------------
------- ---------------------------
-------
------
---- ------- ---
--------
-- --- --------
----------------
-- ---------
-------------------- ---------
-- --------
----------------------------------- --- -------------- -
--------------------- ----- - - ------
---
---------
-------
-------在 H5 页面中使用 wvbridge 的 send 方法可以向原生应用发送数据。使用 callHandler 方法可以调用原生应用的方法，并可以接收原生应用回传的数据。
示例代码
下面是一个完整的示例代码，演示了如何在原生应用和 H5 页面之间传递数据。
原生应用
------ ----- ------------ ------- ----------------- -
------- ------------- --------- -- ------- --
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
-- --- -------
-------- - ---------------------------
-----------------------------------------------------
-- -- -------- - ------- -
-----------------------------
-- -- ---------------
-------------------------------------------- --- --------------- -
---------
------ ---- -------------- ----- -------- --------- -
-- ------
-------- -------- - --------------
-- -------- -- --
------------------------------------
-
---
-- ----- -- --
------ ---- - ------ --------
-------------------------
-
------- -------- ------------- -
-- ------
------ --- --------------- ------ -------
-
-H5 页面
--------- -----
------
------
--------------- ------------
------- ---------------------------
-------
------
------------ ---------
-- ---------------------
------- --------------------------------
--------
-- --- --------
----------------
-- -----------
--------------------------------------- -------------- --------- -
----------------------------------------- -- -----
---
-- --------
---------------------------------------------- - ---------- -
----------------------------------- --- -------------- -
--------------------- ----- - - ------
---
--
---------
-------
-------总结
本教程简要介绍了 wvbridge 这个 npm 包的使用方法。wvbridge 使 H5 与原生应用之间的交互变得简单、方便。熟练掌握 wvbridge 使用方法，对前端开发人员们，不仅有提高工作效率、优化代码结构的帮助，更在实际应用中具有不可替代的指导意义。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005601c81e8991b448de478