移动端H5与原生JavaScript是如何交互的?

随着移动端互联网的发展,越来越的APP运用到H5,可移动端H5与原生JavaScript是如何交互的呢?

移动端H5与原生JavaScript交互技巧,前端新人必看!


JavaScript调用Native的方式,主要有两种:注入API和拦截URL SCHEME。

注入 API 方式

其主要原理是,通过WebView提供的接口,向JavaScript的Context(window)中注入对象或者方法,让JavaScript调用时,直接执行相应的Native代码逻辑,达到JavaScript调用Native的目的。

针对Android和IOS有不同的处理方式:

1、Android的处理方式

Android中,就是新建一个类,里面写提供给H5操作的方法,并规定别名。

在安卓4.2以上可以直接使用@JavascriptInterface注解来声明。

定义完这个方法后再调用mWebView.addJavascriptInterface()方法。

将方法注入在window中,H5调用时,根据“window. 别名.方法”来调用。

移动端H5与原生JavaScript交互技巧,前端新人必看!


2、IOS的处理方式

IOS是利用WKWebView的新特性MessageHandler来实现JS调用原生方法的。

WKWebView初始化时,创建WKWebViewConfiguration对象,配置各个接口对应的MessageHandler,然后再接受js传递的参数调用接口。

H5中调用时,使用window.webkit.messageHandlers.接口名. postMessage(参数)。

移动端H5与原生JavaScript交互技巧,前端新人必看!


拦截 URL SCHEME

拦截URL SCHEME的主要流程是:Web端通过某种方式(例如iframe.src)发送URL Scheme 请求,之后Native拦截到请求并根据URL SCHEME(包括所带的参数)进行相关操作。

在这个过程中,这种方式有一定的缺陷:

  • 使用iframe.src发送URL SCHEME会有URL长度的隐患,而且特殊字符需要编码解码。
  • 创建请求,需要一定的耗时,比注入API的方式调用同样的功能,耗时会较长。

声明:本站发布的内容以原创、转载、分享网络内容为主,如有侵权,请联系电话:021-51697771-8029,邮箱:mj@cndns.com ,我们将会在第一时间删除。文章观点不代表本站立场,如需处理请联系我们。

热门TAG

热门视频