bridge

Category

Bridge

Last Changed

1 minute ago

Alias

bridge

本实例对象用于在 webview 和 native 之间建立通信，可引入await bridge.request实例对象进行通信，也可直接使用request和register方法进行通信。

Usage

基本使用

import { bridge } from 'utils-core'

const responseData = await bridge.request('xxxJS', { action: 'xxxAction' })

请求Native

TypeScript

import { request } from 'utils-core'
const data: RequestBridge<'getHeadInfoHandler'> = {
  action: 'getHeadInfoHandler',
}
const responseData = await request('getHeadInfoHandler', data)

import { request } from 'utils-core'
const data = {
  action: 'getHeadInfoHandler',
}
const responseData = await request('getHeadInfoHandler', data)

注册Native -> JS 的事件

TypeScript

import { register } from 'utils-core'
const { getInfoFromNative, namespace, namespaceName } =
  register<'getInfoFromNative'>(
    'getInfoFromNative',
    (data: any) => {
      // some code
      // 如建立订阅-发布
      ee.emit('getInfo', data)
    },
    {
      // some options
      namespace: 'bridge',
      window,
    },
  )

import { register } from 'utils-core'
const { getInfoFromNative, namespace, namespaceName } = register(
  'getInfoFromNative',
  (data) => {
    // some code
    // 如建立订阅-发布
    ee.emit('getInfo', data)
  },
  {
    // some options
    namespace: 'bridge',
    window,
  },
)

Type Declarations

Show Type Declarations

declare global {
  interface Window extends BridgeNamespace, IOSBridge, AndroidBridge {
    WebViewJavascriptBridge?: {
      init?: (...args: any[]) => any
      callHandler(type: string): void
      callHandler(type: string, params: string): void
      callHandler(
        type: string,
        params: string,
        fn?: (json: string) => void,
      ): void
    }
  }
}
export type BridgeType = "Bridge" | string
export type BridgeHandler = string
export interface IOSBridge {
  WVJBCallbacks: ((...args: any[]) => void)[]
}
export interface AndroidBridge {
  WebViewJavascriptBridge: {
    init: (...args: any[]) => any
  }
}
export interface BridgeNamespace {
  [key: string]: Record<string, (...args: any[]) => any>
}
export interface RequestBridge<T = string, D = any> {
  action: T
  body?: D
}
export interface ResponseBridge<T = any> {
  code?: number
  data: T
  msg?: string
}
export interface RegisterConfig {
  namespace?: string
  window?: Window
}
export type RegisterResponse<N extends string = string> = {
  [x in N]: (...args: any[]) => any
} & {
  namespace: any
  namespaceName: N
}
export interface BridgeInterface {
  request<
    T extends string = BridgeType,
    R extends RequestBridge = RequestBridge<BridgeHandler>,
    D extends ResponseBridge = ResponseBridge,
  >(
    type: T,
    data?: R,
  ): Promise<D>
  register<T extends string = string>(
    methodName: T,
    method: (...args: any[]) => any,
    config?: RegisterConfig,
  ): RegisterResponse<T>
}
export declare class Bridge implements BridgeInterface {
  private isInit
  bridge: typeof window.WebViewJavascriptBridge | null
  constructor()
  private setupWebViewJavascriptBridge
  private initJsBridgeSync
  initJsBridgeAsync(): Promise<
    | {
        init?: ((...args: any[]) => any) | undefined
        callHandler(type: string): void
        callHandler(type: string, params: string): void
        callHandler(
          type: string,
          params: string,
          fn?: ((json: string) => void) | undefined,
        ): void
      }
    | null
    | undefined
  >
  /**
   * @param {string} type 方法名称: 'Bridge'
   * @param {any} data 数据
   * @description 发送消息给Native
   * @returns Promise<ResponseBridge> 返回一个Promise
   */
  request<
    T extends string = BridgeType,
    R extends RequestBridge = RequestBridge,
    D extends ResponseBridge = ResponseBridge,
  >(type: T, data?: R): Promise<D>
  /**
   * @param {string} method 方法名称
   * @param {RegisterConfig} config 配置
   * @description 注册方法, 返回一个Proxy 代理对象,并将这个Proxy 对象挂在到window上，将方法名称作为window对象的属性，调用方法（window上的Proxy对象）时，会自动调用实际对应的方法
   * @returns Proxy
   */
  register<T extends string = string>(
    methodName: T,
    method: (...args: any[]) => any,
    config?: RegisterConfig,
  ): RegisterResponse<T>
}
export declare const bridge: Bridge
export declare const request: <
  T extends string = string,
  R extends RequestBridge<string, any> = RequestBridge<string, any>,
  D extends ResponseBridge<any> = ResponseBridge<any>,
>(
  type: T,
  data?: R,
) => Promise<D>
export declare const register: <T extends string = string>(
  methodName: T,
  method: (...args: any[]) => any,
  config?: RegisterConfig,
) => RegisterResponse<T>

Source

Source • Docs