什么是 x-bridge？
x-bridge 是一个可以在 Web 页面和移动端 WebView 中进行通信的 npm 包。它提供了一个简单方便的 API，使得在两个端口的 JavaScript 中进行数据交互变得非常容易。
x-bridge 将会在两个端口之间创建一座桥梁，允许你在移动端应用内使用 Web 技术，或者在 Web 页面上调用移动端原生 API。
安装 x-bridge
要使用 x-bridge，开始前要确保你已安装 Node.js。
npm install x-bridge
在 Web 页面上使用 x-bridge
为了在 Web 页面上使用 x-bridge，首先你需要在你的 HTML 引入下列代码：
<script src="node_modules/x-bridge/src/x-bridge.js"></script>
之后，你可以通过如下方式与移动端通信：
-- -------------------- ---- -------
--- ------- - --- --------
-- --------------
-
-- -- ----------------------- --
---- ---
-- ---------------- --------
-------- -----
-- -- --------------------
-- ------------------------- ------ --
----------- -----
-
--
-- ------------------
------------------------------- ---------------- --------- -------------------
---------------------- -- -- ----------- --------
---定义一个自己的 onProgress 函数可以使你了解数据传输的进度，可以在某些场景下得到实际的帮助。
在移动端使用 x-bridge
在移动端上使用 x-bridge 需要进行更多的配置。以下是一个在 Android 中使用 x-bridge 的示例代码：
-- -------------------- ---- -------
------ ----- ------------ ------- -------- -
------- ------------- --------
------- ------------ ---------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
------- - --- --------------------
------------------------
-- -- ------- ---- --------
-------- - --- ---------------
----------------------------- --- -----------
-- ---- ------- ---- -- --
------------------------------------- --- ----------------------------- -
---------
------ ---- ------------------ ----- --------------------- --------- -
------ ------- - --------------------------
--------------------------------- -------- --------------------------
---------------------------- ----------
-
---
-
---------
--------- ---- ----------- -
------------------
-------------------
-
-须注意，在移动端使用 x-bridge 时与 Web 端略有区别。需要使用 SafeJSBridge 对象，并在 bindWebView() 函数中传入 WebView 和 Handler。在初始化后，我们为 Android 方法“showToast”注册一个处理器，该处理器在接收到调用时，将 message 等参数解析出来，并将提示框显示出来，之后再通过回调返回一个包含“success”的字符串。
结束语
x-bridge 是一个非常优秀的 npm 包，非常方便地实现了 Web 页面和移动端 WebView 的通信。在 Web 端，我们只需要通过 XBride 调用的方法快速与移动端交互；而在移动端，只需要将 SafeJSBridge 绑定到一个 WebView 上并注册处理器，就能实现接收 JavaScript 端的请求。
希望这篇文章能够对有需求的同学们带来实际的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671198dd3466f61ffe7e2