hybrid 开发

转自https://www.jianshu.com/p/f7e0ae5d4c3f

概念

hybrid： 就是前端和客户端的混合开发， 让App同时具备原生和Web 的技术优势。【需要前端开发人员和客户端开发人员配合完成】

特点

1、可以快速迭代更新【关键】，无需APP审核（hybrid技术可以一天上线多次）
2、体验流畅（和Native开发的体验基本类似）
3、减少开发和沟通成本，双端公用一套代码
4、相对于纯原生开发， 缺点： 性能问题， 兼容性问题 【Android 5.0+ 和 IOS 9.0+上缺点不再明显】

理解webview

是APP中的一个组件（App可以有Webview，也可以没有）， 主要用于加载H5页面，是一个小型的浏览器内核。

hybrid应用场景

1、微信公众号， 通过JSSDK连接Native 和 web端
2、微信小程序，通过内置框架连接Native 和 web端

 

hybrid.png

hybrid核心技术 --- JSBridge桥接器

1、实现Native端和web端双向通信的一种机制
2、以Javascript引擎或Webview容器为媒介
3、通过约定协议进行通信

hybrid主流技术框架

1、Web渲染： Cordova 【前身是PhoneGap】
2、原生渲染： React Native、Weex
3、混合渲染： 微信小程序

JSBridge 实现原理

 

4.png

1、类比Client/Server
2、将Native端原生接口封装成Javascript接口
3、将Web端原生接口封装成Native端原生接口
4、Web端和Native端之间双向通信

JSBridge两种实现方式 【指web调用原生端, 原生端调用web端只有执行js代码一种方式】

一、拦截WebView请求的URL Schema

1、URL Schema ： 是URL的一种请求格式 【<prototal>://<domain>/<path>?<query>】
2、自定义JSBridge通信的URL Schema 【jsbridge://<method>?<params> ------ 如：jsbridge://showToast?text=hello 】

 

5.png

如图： 两条线， 1、如果符合我们的 URL Schema， 就会拦截解析url 调用原生的方法， 2、如果是正常的url，则走正常的服务端请求。
优点：兼容性好
缺点： 不直观、url长度有限制

 

// 实践
// 1 natvie 调用web方法 【如 调用web弹窗】
// 原生端调用web端只有执行js代码一种方式
private void showWebDialog(string text) {
      String jsCode = String.format("window.showWebDialog('%s')",  text)
      webView.evaluateJavascript(jsCode, null) // webView 引擎去执行
} // 然后再去 web端实现showWebDialog方法
// web端调用native端
// web
showBtn.addEventListener(‘click’, e => {
    const inputValue = editText.value
    showNativeDialog(inputValue)
})
function showNativeDialog(text) {
    window.alert('jsbridge://showNativeDialog?text=' + text) // native拦截
}
// native
...
// 拦截里面...
if ( !message.startWith('jsbridge://') ) {
   return ... // 走默认的
} else {
  showNativeDialog(text)
}
private void showNativeDialog(text) {
    ...
}

二、向WebView注入JS API

App 向webView注入一个js对象提供给webView用， 方法名、参数和app方法一致

 

1.png

优点： 简单直观
缺点： 有兼容性问题 (Android 4,2+)

// 1、native调用web不变 都是通过执行js脚本
// web端掉用native端
// web
showBtn.addEventListener(‘click’, e => {
    const inputValue = editText.value
    showNativeDialog(inputValue)
})
function showNativeDialog(text) {
    // window.alert('jsbridge://showNativeDialog?text=' + text) // native拦截
  window.NativeBridge.showNativeDialog(text)
}
// native
webView.addJavascriptInterface(new NativeBridge(this),  'NativeBridg') // addJavascriptInterface 原生端向wevView注入对象的方法
class   {
    private ctx
    NativeBridge(ctx) {
        this.ctx = ctx
   }
  @addJavascriptInterface
  private void showNativeDialog(text) {
      ...
  }
}

* 以上其实都是单向的、不能把调用后返回的结果传回， 下面将介绍带回调的JSBridge

1、在对端执行操作并返回结果
2、有输入有输出才是完整的调用

 

2.png

eg： 在web端获取app端某个输入框的值，并用web弹框展示。

let id = 1
const callbackMap = {}
window.JSSDK = {
    getNativeEditTextValue ( callback) {
        // 
      const callbackId = id ++ 
      callbackMap[callbackId] = callback
      NativeBridge.getNativeEditTextValue(callbackId)
    },
    receiveMessge(callbackId, value) { // 接收
      if (callbackMap[callbackId]) {
        callbackMap[callbackId](value)
      }
   }
}
showBtn2.addEventListener(‘click’, e => {
    JSSDK.getNativeEditTextValue(value => window.alert(`native 输入值：${value}`))
})
// native
class   {
    private ctx
    NativeBridge(ctx) {
        this.ctx = ctx
   }
  @addJavascriptInterface
   private void getNativeEditTextValue(callbackId) {
       ...
      // receiveMessge
   }
}

JSBridge的开源实现

1、JsBridge： 拦截URL Schema方式

2、DSBridge： 注入JS API方式

作者：小强流浪记
链接：https://www.jianshu.com/p/f7e0ae5d4c3f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。