夫天地者,万物之逆旅;光阴者,百代之过客。而浮生若梦,为欢几何?
架构师词条:JSBridge(Native 和 H5交互方式之一)

JSBridge 概述

JSBridge 是一种在 Hybrid 开发中提供 web 前端 JavaScript 能够调用 Native 功能接口的能力,例如:地址位置、摄像头。

JSBridge 实现原理之接口注入

Java 后台通过使用 webview 对象的 addJavascriptInterface 方法将处理对象添加到 JavascriptInterface上。

public class JavascriptInterface {

    @JavascriptInterface
    public void showTestt(String txt) {
        ... 接受到JS调用的处理业务
    }
}

mWebView.addJavascriptInterface(new JavascriptInterface (), "Native");

前端 JavaScript 使用如下方式调用 Java 中的方法。

window.Native.showToast('前端调用了 Java的方法');

JSBridge 实现原理之拦截URL Scheme

通过 WebView 的 shouldOverrideUrlLoading,可以拦截到网页所有URL的跳转。页面可以构造一个特殊格式的Url跳转,shouldOverrideUrlLoading拦截Url后判断其格式,然后Native就能执行自身的逻辑了。

JSBridge 实现原理之改写浏览器原有对象

通过修改原来浏览器的 window某些方法,然后拦截固定规则的参数,然后分发给Java对应的方法去处理。这里常用的是以下四个方法: 

alert:可以被webview的 onJsAlert监听 

confirm:可以被webview的 onJsConfirm监听 

console.log:可以被webview的 onConsoleMessage监听 

prompt:可以被webview的 onJsPrompt监听 


prompt简单举例说明,Web页面通过调用 prompt()方法,安卓客户端通过监听 onJsPrompt事件,拦截传入的参数,如果参数符合一定协议规范,那么就解析参数,扔给后续的Java去处理。这种协议规范,最好是跟iOS的协议规范一样,这样跨端调起协议是一致的,但具体实现不一样而已。

JSBridge 实现原理之使用第三方库

详细的介绍和使用方式参考源码说明: https://github.com/lzyzsd/JsBridge

参考资料

小白必看,JSBridge 初探 
Android混合开发之WebView与Javascript交互  

JsBridge使用和原理  

JsBridge  

Hybrid 开发:JsBridge - Web和客户端的桥   

JsBridge实现JavaScript和Java的互相调用  

Android中JSBridge的原理与实现 

作者:暗夜余晖

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

0

支持

0

反对

posted @2020-2-24  拜读(244)

评论列表

评论内容:



喜欢请打赏

支付宝 微信

请放心支付