在移动端前端开发中，我们常常需要在 webview 内嵌入 H5 页面，并且需要实现原生和 H5 页面间的交互。此时，我们可以使用 wvbridge 这个 npm 包。
wvbridge 是一款用于解决 H5 与原生应用之间互调的桥梁，它的主要作用是将 H5 中的数据传递给原生应用，并监听原生应用发来的指令。相较于其他解决方案，它的优势在于使用简单，代码量少，易于维护。
安装
使用 npm 进行安装：
npm i wvbridge使用方法
1. 原生应用的实现
在原生应用中，需要将 wvbridge 注入到 webview 中，使其能够在 H5 页面中调用。
private BridgeWebView mWebView; // webview 实例 // 注入 wvbridge 到 webview 中 BridgeWebView.init(mWebView);
当 H5 页面从原生应用中打开时，需要将数据传递到 H5 页面。可以使用 wvbridge 的 send 方法实现。
String data = "Hello world!"; BridgeWebView.send(data);
同样地，当 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
