简介
wm-na-bridge是一个针对Web和Native混合APP开发的npm包，它的作用是提供JS调用Native的方法，最大程度的解决开发中的跨端痛点。毫无疑问这个包已经很成熟了，也被很多APP的开发人员使用到，今天我们来详细了解一下这个包的使用方法。
安装
要安装这个包，您首先需要安装npm，即Node.js，然后在命令行中运行以下命令：
--- ------- ------------ ------
使用方法
1.在 HTML head 中引入 JS 文件。
------ ------- --------------------------------- -------
2.NATIVE 定义好需要调用的方法，当然定义方法可以任意更改，本DEMO只是作为一个参考。
-- --------------------------- -- ---------- -
--------------------------------------------- - -------- ------------ ----------- -
-- ----------- -- ------- -
--------------
-
-
-3.js 端调用方法，此处以 test 为例。
---------------------------------------------- ------
由以上的文档我们可详细了解到如何使用这个包。当然需要注意的是Native实现也是非常重要的，需要针对自己的APP进行一定的封装。
示例代码
下面通过一个简单实例来进一步讲解如何使用 npm 包 wm-na-bridge。
Web 实现
在 HTML 头中引入 JS 文件./wm-na-bridge.js。
--------- -----
------
------
----- ----------------
------------------- ------------
------- ---------------------------------
-------
------
------- ----------------------- ----------------
-------
------- -----------------------
-------- ------ -
---------------------------------------------- ------
-
---------
-------iOS 实现
在工程中引入 npm 包 wm-na-bridge。然后在 app.js 中如下定义 invoke，“jsCallNativeMethod”是自己定义的，具体可以参见上面的文档。wmInvoke即为需要被调用的方法。
------------- ----------- ---------- --------- ----------- -------- ------------ ------------ ------------ ---------------- -------- --- -- -- -
---
--- ------ - --------------
------------- - -------- -------- ------- --------- -
-- ------- -- --------------------- -
--- ---------- - ----------
--- ---------- - ----------
-------------------- ------------
- ---- -
-------------- ------- ----------
-
--
---
--------------- - -------------------- ----------- -
-- ----------- -- ------- -
--------------
-
--
---Android 实现
在工程中引入 npm 包 wm-na-bridge。然后仿照 iOS 在 App.java 中定义 invoke。在 AppNative.java 中实现 defineNativeInterfaces，如下：
------ ---- ------------------------ -
------------------------------- --------------- -----------------------
-
-------------------
----- ------------ -
--------------------
------ ---- ------------------------ ------ ----------- ----- ------ ----------- -
----- ---------- ---------- - -----------------------------
---------------------- ---------- -
---------
------ ---- ----- -
-- --------------------------- -
--------------------------------------- ------- --------------------------
-
-
---
-
-总结
通过本篇文章，我们详细了解了 npm 包 wm-na-bridge 的使用方法和示例代码。在 hybird 开发中，我们可以使用这个 npm 包，让我们的 Web 和 Native 更好地协作。当然只适用于特定开发场景。希望能对 Web 和 Native 开发中的工程痛点带来一些帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006710f8dd3466f61ffe272