hybrid 开发-飞外

概念

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端// webshowBtn.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端// webshowBtn.addEventListener(‘click’, e => {    const inputValue = editText.value    showNativeDialog(inputValue)})function showNativeDialog(text) (gps是什么意思？GPS是全球定位系统Global　Positioning　System的缩写形式，它是一种基于卫星的定位系统，用于获得地理位置信息以及准确的通用协调时间。){    // window.alert('jsbridge://showNativeDialog?text=' + text) // native拦截  window.NativeBridge.showNativeDialog(text)}// nativewebView.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 = 1const 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}`))})// nativeclass   {    private ctx    NativeBridge(ctx) {        this.ctx = ctx   }  @addJavascriptInterface   private void getNativeEditTextValue(callbackId) {       ...      // receiveMessge   }}

JSBridge的开源实现 1、JsBridge：拦截URL Schema方式2、DSBridge：注入JS API方式

飞外网

hybrid 开发-飞外

热门阅读