npm包 wm-na-bridge使用教程

阅读时长 5 分钟读完

简介

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

纠错
反馈

纠错反馈