Android与IOS的接口都是不统一的

[TOC]

乘势H5的穿梭推广与发展,为了项目标灵活性,顾客端的好多作用被放置在H5页面去做到。所以移动客商端平时供给与H5的页面交互。Android的WebView自个儿提供了有的接口来贯彻native与web的相互,比如shouldOverrideUrlLoading()addJavascriptInterface()等艺术。但是随着事情发展,代码或然会变得特别臃肿,Android与IOS的接口都以不统一的,难以保证。别的,Android自己提供的接口,只怕在低版本上设有漏洞。所以能够行使类似IOS的JSBridge措施。那篇文章就试着解析一下它的法规与贯彻格局。其余,Kotlin已经来到了,还不行动起来?小编将会试着用Kotlin重新实现一下JSBridge,试一下Kotlin到底好用糟糕用,Let’s
Go!

1. 什么是JSBridge?

看名称就能够想到其意义,JSBridge正是在native与web之间成立一座桥梁,方便native调用web端代码,同一时间也方便web调用native代码。当然,须求大家前后端事先定义通讯合同,具体怎么定义我们会在后头谈到到。总之,大家想做到的正是透过一行代码完成native与web的通信。

2. 原生交互格局的简短计算

Android调用JS的代码的方法:

  1. 通过webview.loadUrl("JavaScript:function实现
  2. 通过webview.evaluateJavascript()主意完成

JS调用Android方法

  1. 通过webview.addJavaScriptInterface()来实现
  2. 通过webViewClientshouldOverrideUrlLoading艺术拦截U奇骏L完结
  3. 通过webChromeClientonJsAlert()、onJsConfirm()和onJsPrompt()方法回调拦截JS对话框onAlert()、onJsConfirm()和OnJsPrompt()的消息

下面的不二法门都是开荒中常常接纳到的方式,还面生的话能够谐和在去熟识一下。必要留神的是,在行使这几个办法的时候记得为WebView增加相应的设置,因为为了安全起见,Google暗中同意情形下都以禁止这个主意的。

WebSettings webSettings = mWebView.getSettings();// 设置与js交互的权限webSettings.setJavaScriptEnable;// 设置允许js弹框webSettings.setJavaScriptCanOpenWindowsAutomatically;

3. JSBridge的落实原理

有了地点这几个基础的知识,原理就很精晓了。大家照旧利用原生的办法,只不过经过JSBridge来分装一套标准化的并行接口。通过大家和煦定义通讯公约来尤其正式的落到实处互相之间。至于怎么制订大家的相互合同,上边会详细讲到。

对于Android调用JS接口,大家得以接纳WebView的loadUrl()方法。

对于JS调用Android方法,大家得以选择WebViewClient的shouldOverrideUrlLoading回调方法。

要想拓宽正规的相互,交互公约是少不了的。首先,大家必需告诉js大家须要调用他的哪位方法,其次要把调用的参数字传送递过去,一般景观下我们还亟需理解js方法实践之后的结果,并且,方法有不小希望是异步推行的,所以大家还非得将回调的消息也报告js,方便回调。反过来,js调用大家同样需求报告大家这个新闻。为了便利,我们能够将这么些数据分装成Json数据。定义一个实体类Message:

data class Message(var callbackId: String, var responseId: String, var responseData: String, var data: String, var handlerName: String?) { constructor (): this("", "", "", "", "") {} fun toJsonString(): String { var jsonObject = JSONObject() jsonObject.put(STRING_CALLBACK_ID, callbackId) jsonObject.put(STRING_RESPONSE_ID, responseId) jsonObject.put(STRING_RESPONSE_DATA, responseData) jsonObject.put(STRING_DATA, data) jsonObject.put(STRING_HANDLER_NAME, handlerName) return jsonObject.toString() } companion object { val STRING_CALLBACK_ID = "string_callback_id" val STRING_RESPONSE_ID = "string_response_id" val STRING_RESPONSE_DATA = "string_response_data" val STRING_DATA = "string_message" val STRING_HANDLER_NAME = "string_handler_name" fun toMessageObject(jsonString: String): Message { val jsonObject = JSONObject(jsonString) return Message( jsonObject.optString(STRING_CALLBACK_ID), jsonObject.optString(STRING_RESPONSE_ID), jsonObject.optString(STRING_RESPONSE_DATA), jsonObject.optString(STRING_DATA), jsonObject.optString(STRING_HANDLER_NAME) ) }}

在大家调用js接口的时候,就能够这么来:

JSBridge://{message}

js在吸收数额后,将message中的数据深入分析出来,根据提供的数量,调用相应的措施就能够。

4. 干活流程

先是,在WebView加载完页面后要将WebViewJavaScriptBridge.js文件注入到页面中去,并通报WebView实行伊始化操作。

图片 1

  1. 率先调用JSBridge提供的统一接口callHandler()
  2. JSBridge举办一密密麻麻封装转变,然后通过loadUrl()方法调用JS方法
  3. JS方法试行,何况将结果通过shouldOverrideUrlLoading()艺术重临

具体进行流程看下图:

图片 2

  1. 第一调用JSBridge提供的相会接口callHandler()
  2. JSBridge实行一类别封装转变,通过shouldOverrideUrlLoading()主意来通告Android有新音信要求管理
  3. Android通过_fetchMessageQueue()艺术来获撤消息
  4. 剖判处理响应的音信
  5. 将结果再次来到给JS

切切实实进行流程看下图:

图片 3

5. JSBridge的贯彻代码简介

代码实现其实并非很复杂,关键就是概念好不无关系的相互协议就可以。

图片 4

切切实实代码查看 GitHub-KJSBridge(公司网络无法上传GitHub,改天上传=
=),项目应用kotlin写的,说一下应用kotlin的感受:

  1. 最深的感受正是对空指针的严控,假诺三个变量恐怕性质可认为空,则必需注脚为type?的情势,否则未来赋值为空的时候编写翻译是不经过的,这就大致能够解除空指针难题,尽管一开始选用起来特别劳苦不实惠,不过好处是刚强的,何况,那样就能强制大家一最先就对变量的空属性进行思索,让代码更健全。

  2. 代码简洁
    再也不用findViewById了,协理lambda表明式,辅助函数扩充等等,这么些都用起来一级福利,熟练了就喜欢

3.自建数据类

4.支撑高阶函数

5…….

等等等等多数浩大好处,并且kotlin完全兼容Java,可以并行存在,最最最入眼的是谷歌官方帮助。所以,貌似未有啥样说辞并不是起来了!别的提一点,Android
Studio3.0编写翻译速度不是快了一丝丝,快升级吗~

相关文章