0.1.0-rc.1 • Published 1 year ago

@polyv/web-view-bridge v0.1.0-rc.1

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

保利威前端 WebView 桥接器

在保利威原生端打开网页时,如果要在网页端与原生端通信,就要用到本桥接器。本桥接器支持以下原生端:

  • 使用保利威 iOS SDK WebView 打开网页的移动端 app。
  • 使用保利威 Android SDK WebView 打开网页的移动端 app。

功能介绍

环境检测

import { isWebView, webViewVersion } from '@polyv/web-view-bridge';
console.log(isWebView());
console.log(webViewVersion()); // 不在 webview 环境时返回 null

如果仅需要检测环境,不需要与原生端通信,也可以导入仅包含环境检测逻辑的 js(体积更小):

import { isWebView, webViewVersion } from '@polyv/web-view-bridge/is-webview';
console.log(isWebView());
console.log(webViewVersion());

初始化桥接器

创建桥接器对象:

import { WebViewBridge } from '@polyv/web-view-bridge';

const bridge = new WebViewBridge();

完成实例化之后,连接桥接器:

(async () => {
  await bridge.connectWebViewBridge();
})();

监听原生端事件

bridge.on('event-name', (params) => {
  console.log('收到来自移动端的事件', params);
});

注意:监听事件要在 connectWebViewBridge 执行完毕之后才能调用。

取消监听事件

const handler = () => {};
bridge.on('event-name', handler);
bridge.off('event-name', handler);

发送数据到原生端

bridge.sendData('data-name', {
  content: '这是内容'
});

获取 WebView 地址上的所有参数

// 类型:getQueryParams(): Record<string, unknow>;

const queryParams = bridge.getQueryParams();
console.log(queryParams);