在前端开发中，我们经常会遇到需要在客户端和Web端之间进行JS交互的情况，比如在 WebView 中调用 native 方法或在 native 中调用 WebView 中的 JS 方法。而 ls-jsbridge 就是一个用于解决这个问题的npm包，它提供了一套方便的API接口，而且使用非常简单。
npm 安装
你可以使用 npm 单独安装 ls-jsbridge 。
npm install ls-jsbridge --save
安装完成后你就可以在你的客户端和WebView中使用它了。
实例化 jsbridge
接下来，你需要在客户端和WebView中分别实例化jsbridge。在客户端中，你可以使用如下代码来实例化 jsbridge：
-- -------------------- ---- -------
----- -------- - --- ----------
-- ------- ------
-- - ------- ----------------------------------
-- ------- ------------------------------
-- ----------------------------- -------
------------------ -------------
-- ---------------------------------
---------- -----------
---在 WebView 中则需要在 document.ready 后实例化 jsbridge，并且要保证与客户端中的注入对象名称一致，示例如下：
<script src="ls-jsbridge.min.js"></script>
<script>
// 注意，此处的 objectName 必须和上一步中指定的名称一致
const jsbridge = new JsBridge('objectName');
// 完成初始化以后，即可在 WebView 中使用 jsbridge 进行与客户端的通信
</script>基本 API
下面我们来看一下 jsbridge 的基本 API。最常用的 API 是调用原生方法，这里我们以 Android 为例，其它平台使用方法也类似。
调用原生方法
// 调用原生方法
// 1. 方法名
// 2. 支持字符串、数字、字典对象传参
// 3. 回调函数
jsbridge.callNative('callNativeMethod', {key1: 'value1', key2: 'value2'}, (result) => {
console.log(`result: ${JSON.stringify(result)}`);
});注册方法供原生调用
// 注册方法供原生调用
// 1. 方法名
// 2. 支持多种类型的参数传递。参数列表中最后一个参数是回调函数，JS 端通过它可以接收原生端传回来的相关信息
jsbridge.registerHandler('jsBridgeHandler', (data, responseCallback) => {
console.log(`data: ${JSON.stringify(data)}`);
// 原生端需要回调数据时，请在异步过程中 responseCallback 传入数据
responseCallback({key1: 'value1', key2: 'value2'});
});调用已注册到 jsbridge 中的方法
// 调用已注册到 jsbridge 中的方法
// 1. 方法名
// 2. 参数，支持字符串、数字、字典对象传参
// 3. 回调函数
// 注意，不仅仅可以在客户端中调用注册过的接口，同时在Web端中也同样支持
jsbridge.call('jsBridgeHandler', {key1: 'value1', key2: 'value2'}, (responseData) => {
console.log(`responseData: ${JSON.stringify(responseData)}`);
});取消注册方法
// 取消注册方法
jsbridge.unregisterHandler('jsBridgeHandler', (result) => {
console.log(`unregisterHandler result: ${JSON.stringify(result)}`);
});分发事件
// 分发事件
// 1. 事件名称
// 2. 支持字符串、数字、字典对象传参
jsbridge.fire('event:paySuccess', {result: '1', amount: '1000'}));总结
至此，我们已经学习了如何使用 npm 包 ls-jsbridge，并掌握了它的基本 API。通过简单的配置，就能够在客户端和WebView之间轻松地实现JS交互。希望本文能对初学者有所帮助，同时也希望大家能够掌握更多的前端知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f87238a385564ab6d18