简介
wm-na-bridge是一个针对Web和Native混合APP开发的npm包,它的作用是提供JS调用Native的方法,最大程度的解决开发中的跨端痛点。毫无疑问这个包已经很成熟了,也被很多APP的开发人员使用到,今天我们来详细了解一下这个包的使用方法。
安装
要安装这个包,您首先需要安装npm,即Node.js,然后在命令行中运行以下命令:
npm install wm-na-bridge --save
使用方法
1.在 HTML head 中引入 JS 文件。
<head> <script src="./wm-na-bridge.js"></script> </head>
2.NATIVE 定义好需要调用的方法,当然定义方法可以任意更改,本DEMO只是作为一个参考。
if (window.wmJavaScriptHandler != undefined) { window.wmJavaScriptHandler.jsCallNativeMethod = function (methodName, methodData) { if (methodName == "test") { alert("test"); } } }
3.js 端调用方法,此处以 test 为例。
WMJavaScriptHandler.jsCallNativeMethod('test', null);
由以上的文档我们可详细了解到如何使用这个包。当然需要注意的是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