@JavascriptInterface
public void showMessage(String message) {
Toast toast = Toast.makeText(this.activity.getApplicationContext(),
message,
Toast.LENGTH_SHORT);
toast.show();
}
}
webView.addJavascriptInterface(new AppJavaScriptProxy(this),“androidAppProxy”);
// JS代码调用
if(typeof androidAppProxy !== “undefined”){
androidAppProxy.showMessage(“Message from JavaScript”);
} else {
alert(“Running outside Android app”);
}
这样就可以实现JS调用Android代码,使用者只需要关注被JS调用方法的实现,对调用的过程是不可知的。使用的时候有几个要注意的地方:
- 提供用于JS调用的方法必须为public类型
- 在API 17及以上,提供用于JS调用的方法必须要添加注解@JavascriptInterface
- 这个方法不是在主线程中被调用的
WebViewClient.shouldOverrideUrlLoading()是通过拦截Url的方式来实现与JS的交互。shouldOverrideUrlLoading()返回true时,代表拦截这次请求,让我们自己处理。shouldOverrideUrlLoading()返回false时,代表不拦截这次请求,让WebView去处理这次请求。
WebChromeClient.onJsAlert()、onJsConfirm()、onJsPrompt()三种方式和WebViewClient.shouldOverrideUrlLoading()类似,都是通过拦截请求的方式达到交互功能。
总结:这三种方式实际上可以归纳成两种:JavascriptInterface和拦截请求,两者之间各有好坏。
- JavascriptInterface是系统提供的方式,在效率和可靠性上肯定是优于后者的,而且以后会一直持续维护和优化。缺点在于扩展性和管理方面不太强,在Android 4.2以下存在漏洞,需要移除掉系统提供的一些接口,并小心处理提供的接口。
- 拦截请求的方式优点是便于管理和扩展,可以按照自身的业务进行设计,方便应对复杂的逻辑,而且可以在安全性上有所保证。缺点主要是官方对这种方式不提供支持,以后高版本有需要迁移整个逻辑的可能性。还有就是效率不高,H5快速调用多个请求时会有丢失的可能。
JS调用框架设计
为了解决前言中提到的通讯方式多样、调用混乱和安全性差等几个问题,需要重新设计JS调用框架,将整个流程从WebView中剥离出来,达到低耦合的目的。综合考虑后,决定沿用项目中之前的解决方式,通过拦截WebView请求的方式来实现。拦截性的方式在设计框架之前还需要考虑到通讯协议的问题。
协议设计
如上图所示,通过设计通讯协议达到多端统一通讯。协议上面可以参考现有的通讯协议,或者根据项目需求和前端设计一套通用协议。这里推荐一种简单的现有的协议:统一资源标志符。
jsbridge://method1?a=123&b=345&jsCall=jsMethod1"
该种标识允许用户对网络中(一般指万维网)的资源通过特定的协议进行交互操作,在这里不用完全使用,只使用了其中的三个字段。scheme定义为jsbridge,用于区分别的网络请求。authority用来定义JS需要访问的方法。后面的query用来传参数,如果需要客户端回调信息给前端,就可以加个参数jsCall=jsMethod1,然后客户端处理完后就可以通过WebView进行回调。
WebView.loadUrl(“javascript:jsMethod1(result=1)”)
这样就定义了一种简单的交互方式,能让JS和Native拥有基础的交互能力。如果需要传文件,可以通过将文件流转成Base64然后在通讯,当然如果文件太大,这种方式会有内存方面的风险。这里还有另外一种方式,拦截WebView的资源请求,将文件以流的形式进行通讯:
webView.setWebViewClient(new WebViewClient(){
@Override
public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
return new WebResourceResponse(“image/jpeg”, “UTF-8”, new FileInputStream(new File(“xxxx”);
}
}
框架设计
在设计中,主要考虑了以下几点:
- 安全性: 防止第三方网站获取用户私密信息和通讯被第三方截取信息。(域名白名单、数据加密)
- 易用性: 设计框架都需要考虑易用性,方便实用。如Android的JavascriptInterface方式,使用者只用关注被调用方法的实现。(参考Android的JavascriptInterface方式)
- 可移植性: 现在Android系统日新月异,每个版本都有较大改动和优化,如果出现更好的方案或者特性时,要方便迁移整个JsBridge方案。(设计中要职责分明)
- 扩展性: 方便业务逻辑扩展。(添加中间件)
通过分析整个通讯的流程,结合项目中的需要,大体抽象出通讯流程中的五个角色:
- JsBridge: 整个Js框架的管理,提供对外的接口,连接Processor和JsProvider。
- JsCall: 抽象一次请求,包含一次请求的内容和环境,拥有回调信息给前端的接口。
- IProcessor: 协议的抽象体。由于项目原因需要多套协议兼容,所以抽象出协议,负责请求的分类和解析。
- JsProvider: Js方法的提供者,本身是Object类型,方便现有代码迁移,而且和JavascriptInterface方式一致,也方便以后迁移。
- @JsMethod: Js方法的一个注解,类似@JavascriptInterface。
这样的模式和系统提供的JavascriptInterface方式基本一致,但是我们可以做的事情比JavascriptInterface方式更多,而且整个系统解耦清晰,但是这个结构实际上还缺乏较多的东西,无法达到设计的目标,整个流程中缺乏扩展性,没有拦截和二次处理机制。
可以在执行JsMethod之前添加一个拦截器,增强扩展性。
安全性方面也可以通过添加拦截器的方式来实现,将JS请求拦截在执行JsMethod之前,而每个JsMethod的安全级别可以通过扩展注解参数来标注。例如下面代码,添加permission字段来标示方法的安全级别。
@JsMethod(permission = “high”)
public void requestInfo(IJsCall jsCall) {
// do something
}
框架骨架搭建好了后,还需要一些优化性的设计:
- 日志系统:添加日志开关,打印关键性的日志。
- 线程转换:由于WebViewClient.shouldOverrideUrlLoading是在主线程里面执行,可以参考Android做法,将JS方法都放到其它线程去做,不影响页面流畅度。
- 异常机制:将框架中发生的异常统一管理后,抛出给框架调用者。
- … (结合业务设计)
###实现效果
最后,框架大体设计完毕,实现都是比较简单的。现在来看看使用的时候,首先是JS发起一个请求:
var iframe = document.createElement(‘iframe’);
iframe.setAttribute(‘src’, ‘jsbridge://method1?a=123&b=345’);
document.body.appendChild(iframe);
iframe.parentNode.removeChild(iframe);
iframe = null;
客户端只需要简单的对WebView的请求做拦截。
@Override
public boolean shouldOverrideUrlLoading(WebView webView, String url) {
boolean handle = super.shouldOverrideUrlLoading(webView, url);
if (!handle) {
handle = JSBridge.parse(activity, webView, url);
}
return handle;
}
创建一个解析当前协议的对象,这个是以后都可以复用的:
public class JsProcessor implements IProcessor {
public static final int TYPE_PROCESSOR = 1;
/**
- 协议编号
- @return
*/
@Override
public int getType() {
return TYPE_PROCESSOR;
}
/**
- 判断请求是不是属于这个协议
- @param url
- @return
*/
@Override
public boolean isProtocol(String url) {
return !TextUtils.isEmpty(url) && url.startsWith(“jsbridge”);
}
/**
- 解析协议
- @param context
- @param webView
- @param url
- @param webViewContext WebView的环境
- @return
*/
@Override
public IJsCall parse(Context context, WebView webView, final String url, Object webViewContext) {
return new IJsCall<RequestBean, ResponseBean>() {
private String mMethodName;
@Override
public void callback(ResponseBean data, WebView webView) {
JSBridge.callback(data, webView);
}
@Override
public String url() {
return null;
}
@Override
public RequestBean parseData() {
if (TextUtils.isEmpty(url)) {
return null;
}
Uri uri = Uri.parse(url);
String methodName = uri.getPath();
methodName = methodName.replace(“/”, “”);
重要知识点
下面是有几位Android行业大佬对应上方技术点整理的一些进阶资料。
高级进阶篇——高级UI,自定义View(部分展示)
UI这块知识是现今使用者最多的。当年火爆一时的Android入门培训,学会这小块知识就能随便找到不错的工作了。不过很显然现在远远不够了,拒绝无休止的CV,亲自去项目实战,读源码,研究原理吧!
- 面试题部分合集
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!
码,研究原理吧!
[外链图片转存中…(img-1I4lF5f0-1715425194449)]
- 面试题部分合集
[外链图片转存中…(img-x1jnThPu-1715425194450)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!