如何在iOS和Android上实现JavaScript和原生(Native端)之间双向通信

dsbridge是一个用于在iOS和Android上实现JavaScript和Native代码之间双向通信的开源框架。它提供了一种简单而灵活的方式,让Web页面中的JavaScript代码可以调用Native代码提供的功能,同时也允许Native代码调用Web页面中的JavaScript函数。

dsbridge主要有以下特点:

1. 简单易用: 只需要在Web页面中引入dsbridge.js文件,在Native代码中导入相应的库文件,就可以实现JavaScript和Native的双向通信。
2. 高度兼容: 支持iOS和Android平台,并且在不同版本的系统中都能很好地工作。
3. 安全性高: 通过白名单的方式来限制可以被调用的Native方法,提高了安全性。
4. 性能优良: 采用异步通信机制,避免了阻塞主线程的问题。
5. 功能丰富: 除了基本的方法调用,还支持Promise方式的调用、callback回调、同步调用等多种通信模式

示例

import dsBridge from 'dsbridge';

// 同步调用
export function callNative(funcName, funcParam = null) {
  if (dsBridge.hasNativeMethod(funcName)) {
    return dsBridge.call(funcName, funcParam);
  } else {
    console.warn(`原生端未提供 '${funcName}' 方法`);
  }

  return undefined;
}

// 异步调用，有回调的
export function callNativeWithCallBack(
  funcName,
  funcParam = null,
  callback = null
) {
  if (dsBridge.hasNativeMethod(funcName)) {
    dsBridge.call(funcName, funcParam, callback);
  } else {
    console.warn(`原生端未提供 '${funcName}' 方法`);
  }
}

//注册可被native调用的方法
export function register(funcName, func = null) {
  dsBridge.register(funcName, func || {});
}

callNative()方法

callNative()方法的基本语法如下:

dsBridge.callNative(methodName, [args], [callback])

• methodName: 要调用的Native方法的名称。
• args: 要传递给Native方法的参数,可以是一个数组。
• callback: 用于接收Native方法的返回值的回调函数。

例如,假设我有一个Native方法叫做showToast(message, duration)，用于在Native端显示一个Toast消息。我可以在JavaScript中这样调用它:

dsBridge.callNative('showToast', ['Hello, world!', 3000], function(result) {
  console.log('Toast displayed successfully');
});

这样就会在Native端显示一个持续3秒的Toast消息,并在Toast消息显示成功后执行回调函数。

需要注意的是,callNative()方法会自动将JavaScript对象转换成Native可以识别的数据类型,比如将JavaScript的数组转换成Native的数组。同时,Native方法的返回值也会自动转换成JavaScript可以识别的数据类型。

另外,dsbridge还支持Promise风格的调用方式,可以使用callHandler()方法,像这样:

dsBridge.callHandler('showToast', ['Hello, world!', 3000])
  .then(function(result) {
    console.log('Toast displayed successfully');
  })
  .catch(function(error) {
    console.error('Failed to display Toast:', error);
  });

register方法

register()方法的基本语法如下:

dsBridge.register(methodName, handler)

• methodName: 要注册的Native方法的名称。
• handler: 一个函数,用于处理JavaScript调用该方法时的逻辑。该函数可以有以下形式:
  • function(data, responseCallback)
    • data: JavaScript传递的参数。
    • responseCallback: 一个函数,用于将Native方法的返回值传递回JavaScript。
  • function(data)
    • data: JavaScript传递的参数。

例如,假设我们在Native端有一个方法叫做showMessage(message, duration)，用于显示一个消息框。我们可以在JavaScript中这样注册它:
 

dsBridge.register('showMessage', function(data, responseCallback) {
  // data是一个JavaScript对象,包含message和duration两个属性
  showMessage(data.message, data.duration);
  responseCallback('Message displayed successfully');
});

这样,当JavaScript调用dsBridge.callNative('showMessage', { message: 'Hello', duration: 3000 })时,Native端的showMessage()方法就会被执行,并且Native方法的返回值也会通过responseCallback传递回JavaScript。

需要注意的是,register()方法注册的Native方法必须是线程安全的,因为它们可能会被多个JavaScript线程同时调用。同时,Native方法也要注意处理异常情况,并将错误信息返回给JavaScript。