javascript-jsbridge-sdk

介绍

一个轻量级的 jsbridge，用于在 WebView 中的 javascript 和 flutter 之间发送消息。

功能

• 支持渠道设置，兼容 flutter、reactnative、iframe 等渠道，默认 flutter
• 支持查看消息日志（debug 模式）
• 支持注册方法
• 支持取消注册方法
• 支持 Flutter 和 Javascript 之间方法互相调用，传递参数、接收返回结果

开始

• 在html文件中引用script标签

<script src="https://unpkg.com/javascript-jsbridge-sdk@latest/dist/jsbridge.umd.js"></script>

• 在使用 window.WebViewJSBridge 之前，调用 setupWebViewJSBridge 方法确保 window.WebViewJSBridge 存在

var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
var isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
function setupWebViewJSBridge (callback) {
 // Android使用
 if (isAndroid) {
   if (window.WebViewJSBridge) {
     callback(WebViewJSBridge)
   } else {
     document.addEventListener(
       'WebViewJSBridgeReady',
       function () {
         callback(WebViewJSBridge)
       },
       false
     )
   }
 }

 // iOS使用
 if (isiOS) {
   if (window.WebViewJSBridge) {
     return callback(WebViewJSBridge)
   }
   if (window.WVJBCallbacks) {
     return window.WVJBCallbacks.push(callback)
   }
   window.WVJBCallbacks = [callback]
   var WVJBIframe = document.createElement('iframe')
   WVJBIframe.style.display = 'none'
   WVJBIframe.src = 'wvjbscheme://__bridge_loaded__'
   document.documentElement.appendChild(WVJBIframe)
   setTimeout(function () {
     document.documentElement.removeChild(WVJBIframe)
   }, 0)
 }
}

用法

初始化配置

  window.WebViewJSBridge.init({debug: true, channel: ['flutter']});

参数	说明	默认值和类型	必传
debug	调试模式	false(Boolean)	否
channel	渠道，支持 android、ios、reactnative、flutter	['flutter'] (Array)	否

注册方法

callback 模式

  window.WebViewJSBridge.registerHandler('JSEcho', function (data, success, fail) {
    success('success response from javascript');
    // fail('fail response from javascript');
  });

参数	说明	默认值和类型	必传
handlerName	注册的方法名称	(String)	是
handler	注册的方法实现，没有返回值 data:发送过来的数据 success:js 端业务处理成功时通知 native 端 fail:js 端业务处理失败时通知 native 端	(Function)	是

promise 模式

  window.WebViewJSBridge.registerHandler('JSEcho', async function (data) {
    // return Promise.resolve('success response from javascript');
    return 'success response from javascript';
    // return Promise.reject('fail response from javascript');
    // throw Error('fail response from javascript');
  });

参数	说明	默认值和类型	必传
handlerName	注册的方法名称	(String)	是
handler	注册的方法实现，返回 Promise data:发送过来的数据 Promise.resolve:js 端业务处理成功时通知 native 端 Promise.reject:js 端业务处理失败时通知 native 端	(Function)	是

取消注册方法

  window.WebViewJSBridge.unregisterHandler('JSEcho');

参数	说明	默认值和类型	必传
handlerName	注册的方法名称	(Boolean)	是

调用方法

callback 模式

  window.WebViewJSBridge.callHandler('FlutterEcho', {
    data: 'request from javascript',
    success: function (data) {
      print('[call handler] success response: ' + data);
    },
    fail: function (err) {
      print('[call handler] fail response: ' + err);
    },
  });

参数	说明	默认值和类型	必传
handlerName	调用的方法名称	(String)	是
payload	参数对象 data:发送过来的数据 success:native 端业务处理成功时的回调 fail:native 端业务处理失败时的回调	(Object)	否

promise 模式

  try {
    var data = await window.WebViewJSBridge.callHandler('FlutterEcho', {
      data: 'request from javascript',
    });
    print('[call handler] success response: ' + data);
  } catch (err) {
    print('[call handler] fail response: ' + err);
  }

参数	说明	默认值和类型	必传
handlerName	调用的方法名称	(String)	是
payload	参数对象 data:发送过来的数据	(Object)	是
return	返回 Promise resolve:native 端业务处理成功时的回调 reject:native 端业务处理失败时的回调	(Promise)	否