Hybrid App从概念到实战

Hybrid App从概念到实战
目录

JSBridge是个啥
H5 和 Native 的双向通信通用方法
H5调用Native方法
Native调用H5方法
通信原理总结
H5 和 Native 通信实战
总结

最近一直在准备找工作，看了很多公司的招聘介绍，有相当一部分直接写：熟悉 Hybrid App 开发加分！正好，我司开发的就有这种 Hybrid App——使用WebViewJavascriptBridge通信，前端封装一些常用方法调用。

现在的 app 开发，已经不在是以前一样所以页面都是有原生开发，基于应用的更新上线繁琐，由于 H5 的易更新，易维护性， 现在很多应用都采用同 H5 页面混合开发模式，例如：淘宝、QQ、京东等等。下面就来看看 Native 和 H5 如何实现通信：

回到顶部
JSBridge是个啥
直接来重点，记住：JSBridge 是一个很简单的东西，更多的是一种形式、一种思想，为了解决 H5 和 Native 的双向通信。

就像我们刚接触 ajax 时，也很懵逼。其实，他们俩个差不多，ajax 是浏览器和服务器通信的规范（暂且叫规范，像CMD规范一样，SeaJS是它的一种实现方式）， JSBridge 是 H5 和 Native 通信的规范。axios 是 ajax 通信的一种实现方式，WebViewJavascriptBridge（下文要说）是JSBridge的一种实现方式。明白了这些，下面就很好理解了。

回到顶部
H5 和 Native 的双向通信通用方法
H5通信方式和兼容性如下表所示。指的是借助 Native 的 webview 加载H5页面，H5 和 Native 之间通过注入API、URL拦截、全局调用等形式，实现消息通信。站在大厂的角度考虑，在实战的时候，会选择更兼容的方式。

H5调用Native方法
平台 方法 备注
Android shouldOverrideUrlLoading scheme拦截方法
Android addJavascriptInterface API
Android onJsAlert()、onJsConfirm()、onJsPrompt（）
IOS 拦截URL
IOS JavaScriptCore API方法，IOS7+ 支持
IOS window.webkit.messageHandlers APi方法，IOS8+支持
1.注入 API 方式的主要原理：通过 WebView 提供的接口，向 JavaScript 的 Context（window）中注入对象或者方法，让 JavaScript 调用时，直接执行相应的 Native 代码逻辑，达到 JavaScript 调用 Native 的目的。

说白了就是，Native 往 window 对象挂对象或方法，让 H5 可以调 Native 的方法。具体挂的对象或方法是 Native 定义的，比如人家挂了个getName(arg)，H5 调用就是window.getName(arg)，当然调用时可以向 Native 传数据。

2.拦截 url scheme原理：先解释一下 url scheme： url scheme 是一种类似于 url 的链接，是为了方便app直接互相调用设计的，形式和普通的 url 近似，主要区别是 protocol 和 host 一般是自定义的，例如: httpsss://bridge_loaded/url?url=http://ymfe.tech，protocol 是 httpsss，host 则是 bridge_loaded。

拦截 url scheme 的主要流程是：Web 端通过某种方式（例如 iframe.src）发送 url scheme 请求，之后 Native 拦截到请求并根据 url scheme（包括所带的参数）进行相关操作。

Native调用H5方法
平台 方法 备注
Android loadurl()
Android evaluateJavascript() Android 4.4 +
IOS(UIwebview) stringByEvaluatingJavaScriptFromString
IOS(UIwebview) JavaScriptCore IOS7+ 支持
IOS(Wkwebview) evaluateJavaScript:javaScriptString IOS8+支持
相比于 JavaScript 调用 Native， Native 调用 JavaScript 较为简单，毕竟不管是 iOS 的 UIWebView 还是 WKWebView，还是 Android 的 WebView 组件，都以子组件的形式存在于 View/Activity 中，直接调用相应的 API 即可。

Native 调用 JavaScript，其实就是执行拼接 JavaScript 字符串，从外部调用 JavaScript 中的方法，因此 JavaScript 的方法必须在全局的 window 上。（闭包里的方法，JavaScript 自己都调用不了，更不用想让 Native 去调用了）

通信原理总结
通信原理是 JSBridge 实现的核心，实现方式可以各种各样，但是万变不离其宗。这里，推荐的实现方式如下：

JavaScript 调用 Native 推荐使用 注入 API 的方式（iOS6 忽略，Android 4.2以下使用 WebViewClient 的 onJsPrompt 方式）。
Native 调用 JavaScript 则直接执行拼接好的 JavaScript 代码即可。

说实话，作为一个前端开发，刚开始看了上面这些方法啥的，我是一脸懵*。毕竟是嵌套在人家 Native 里面，规则都是他们实现的，我们H5只能遵循这个规则去玩。但一定要理清他们约定的这套规则是如何通信的，才能保证我们的愉快的交流。

通信的原理大概介绍完了，下面介绍实战中如何使用，帮我们更好的理解概念。补充一句，通信的实现方式有很多种，下面只是我司的实现方式：（没有 Native 代码，纯web前端角度）

回到顶部
H5 和 Native 通信实战
因为很多地方需要用同样的方法，比如：关闭H5页面并吐司、上传图片、预览图片、右上角的“增加”（╋）按钮、...所以，我们把和原生通信的方法写在一个js 文件里，直接 export 导出，方便代码的复用。

// mob.js
// 判断是什么平台(设备)
var browser = {
versions:function(){

var u = navigator.userAgent, app = navigator.appVersion;
return {
    trident: u.indexOf('Trident') > -1, // IE
    presto: u.indexOf('Presto') > -1, // opera
    webKit: u.indexOf('AppleWebKit') > -1, // webkit
    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, // firefox
    mobile: !!u.match(/AppleWebKit.*Mobile.*/), // mobile
    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // iOS
    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, // android or uc
    iPhone: u.indexOf('iPhone') > -1 , // iPhone QQHD
    iPad: u.indexOf('iPad') > -1, // iPad
    webApp: u.indexOf('Safari') == -1,
    teacherApp: u.indexOf('XRJ-Admin') > -1 // 教师端 原生在userAgent放不同的字符串代表不同app
    guardianApp: u.indexOf('XRJ-Edu') > -1 // 家长端
};

}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

// 判断是否是移动设备打开。browser代码在下面
if(browser.versions.mobile) {

    var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
            //在微信中打开
    }
    if (ua.match(/WeiBo/i) == "weibo") {
            //在新浪微博客户端打开
    }
    if (ua.match(/QQ/i) == "qq") {
            //在QQ空间打开
    }
    if (browser.versions.ios) {
            //是否在IOS浏览器打开
    }
    if(browser.versions.android){
          //是否在安卓浏览器打开
    }

} else {
//是PC浏览器打开
}

/**

• 我司通信实现方案：
• iOS端注入 WebViewJavascriptBridge 对象或者拦截 url scheme，下面的setupWebViewJavascriptBridge是固定写法
• 这是我司iOS的做法，也是iOS的通用做法。
  *
• Android当然也可以这么做，如果他们这样实现，后面H5封装的函数只用写一套就可以适配2端了。
• 我司Android不是这么做的，是通过注入对象或方法实现的，所以下面要针对2端写不同代码。
  */

function setupWebViewJavascriptBridge(callback) {

if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)

}

// 关闭页面并吐丝
// 调用：pageClose(1, '操作成功)
function pageClose(code, msg = ''){

setupWebViewJavascriptBridge(function(bridge) {
    bridge.callHandler('iOS_RESPONSE_CALL_BACK', {"code":code,"msg":msg}, function responseCallback(responseData) {
  // 关闭页面完毕的回调函数，类似 ajax() 的 success: function(result) {}
  // responseData：回调函数返回的数据，类似 success 里面的 result
});
});
if(browser.versions.android){
    if(code == 1){
        todo.closeWindow(0);
    }else if(code == 401){
        todo.refreshWebView;
        return false;
    };
    if(msg) todo.showToast(msg);
}

}

// 图片上传
// 调用：load()
function load(){

setupWebViewJavascriptBridge(function(bridge) {
  bridge.callHandler('iOS_UPLOAD_PHOTO', [], function responseCallback(responseData) {
              // 上传完毕回调函数
      imgload(responseData,true);  // H5 页面中定义的全局方法 window.imgload = function(data,flag) {}
  })
});
if(browser.versions.android){
    picture.showPictureDialog(); // webView.loadUrl("javascript:imgload");
}

}

// 图片浏览 - data数据格式和原生商量好
// 调用：var imgData = {"position":position,"list":[imgsrc0,imgsrc1,imgsrc2]}; imgSee(imgData);
function imgSee(data){

setupWebViewJavascriptBridge(function(bridge) {
  bridge.callHandler('iOS_PHOTO_BROWSER',data); // 调用 iOS 的 'iOS_PHOTO_BROWSER' 方法，同时传数据data
});
if(browser.versions.android){
    data = JSON.stringify(data);
    todo.startGallery(data); // 调用 Android 的 startGallery 方法，同时传数据data
}

}

// 单个头部菜单，右上角的“新增”按钮。因为是原生组件，我们操作不到，所以需要初始化页面时往这个按钮上绑定js方法，以便我们之后操作。
// 调用： topMenu('╋',0) || topMenu('新增',0)
function topMenu(title, index){

setupWebViewJavascriptBridge(function(bridge) {
  // js注册方法 'JS_MENU_ACTION' 给 iOS 调用 - 方法名 H5 决定
    bridge.registerHandler('JS_MENU_ACTION', function(data, responseCallback) {
          topMenuHandle(data,true); // H5 页面中定义的全局方法 window.topMenuHandle = function(data,flag) {}
          responseCallback(data); // 做完后，告诉 iOS 一声
    })

        // 调 iOS 的 'iOS_MENU_JSON' 并传参
    bridge.callHandler('iOS_MENU_JSON', [{"action":index,"title":title}]);  // - 方法名 iOS 决定
});
if(browser.versions.android){
// topMenuHandle是往“新增”按钮绑定的js方法，
// index是触发这个函数时回传给js的数据，用来判定点击个哪个按钮，title是这个按钮的名字
// H5 把一切安排的明明白白的
    var jsonStr = '[{"action":"javascript:topMenuHandle('+index+')","title":'+title+'}]'
    menu.inflateMenu(jsonStr);  // jsonStr必须是字符串
}

}

// 多个头部菜单
// 调用：var titleData = [{'title':"添加行为",'src':base.config.imgHost+"/cs/img/icon_bullet_behavior_add.png"},{'title':"审核行为",'src':base.config.imgHost+"/cs/img/icon_bullet_behavior_review.png"}]
// topMenus(titleData)
function topMenus(data){

var dataList = [];
$.each(data,function(index,item){
    dataList.push('{"title":"'+item.title+'","src":"'+item.src+'"'+(browser.versions.android?',"action":"javascript:topMenusHandle('+index+')"':'')+'}');
})
setupWebViewJavascriptBridge(function(bridge) {
    bridge.registerHandler('JS_MORE_MENU_ACTION', function(responseData) {
        topMenusHandle(responseData,true);
    })
    bridge.callHandler('iOS_MORE_MENU', dataList)
});
if(browser.versions.android){
    menu.inflateCustomMenu('['+dataList+']');
}

}

// 导出
export {
browser,
load,
imgSee,
topMenu,
topMenus,
pageClose,
}
回到顶部
总结
Hybrid是一种连接 H5 跟 Native 的思路，即可以快速迭代H5功能，又可以有NA的体验，是混合开发的典型开发模式。实践过程中需要根据业务形态模型来定制代码实现，注入时机也不是一成不变的可以根据业务形态来选择。
原文地址https://www.cnblogs.com/chenwenhao/p/11218525.html