search

tiantingrui / daily-harvest

记录每日收获
MIT License
2 stars 0 forks source link

请描述 js-bridge的实现原理 #45

Open tiantingrui opened 2 years ago

tiantingrui commented 2 years ago

什么是 js-bridge?

  1. JS 无法直接调用 native API
  2. 需要通过一些特点的 “格式”来调用
  3. 这些“格式”就被统称为 js-bridge，例如微信 JSSDK
JS  ----    JSBridge   ----  Native

JS Bridge的常见实现方式

封装 JS-bridge

// url scheme
const sdk = {
  invoke(url , data={} , onSuccess, onError) {
    const iframe = document.createElement('iframe')
    iframe.style.visibility = 'hidden'
    document.body.appendChild(iframe)
    iframe.onload = () => {
      const content = iframe.contentWindow.document.body.innerHtml
      onSuccess(JSON.parse(content))
      iframe.remove()
    }
    iframe.onerror = () => {
      onError()
      iframe.remove()
    }
    iframe.src = `my-app-name://${url}?data=${JSON.stringify(data)}`
  },
  fn1(data, onSuccess, onError) {
    this.invoke('api/fn1', data, onSuccess, onError)
    }
}

sdk.fn1()