H5调用Native的方法

调用方式h5

一、导读在如今移动端盛行的年代，技术选型上基本都是混合开发Hybrid,混合开发是一种半Native半Web开发模式，充分利用H5的跨平台、快速迭代能力以及Native的流畅性、系统API调用能力，具有可复用性高、开发成本低、跨平台开发的特点其通常会涉及到两大类技术原生Native、Web H5,而Native、H5的相互通信离不开JSBridgeo

二、什么是JSBridgeHybrid模式下，H5会经常需要使用Native的功能，比如打开二维码扫描、调用原生页面、获取用户信息、状态同步等，同时Native也需要向H5端发送推送、更新状态、回溯调用结果等，而JavaScript是运行在单独的JS Context中Webview容器、JSCore等，与原生有运行环境的隔离，所以需要有一种机制实现Native端和H5端的双向通信,这种机制就是JSBridgeJSBridge相当于H5与Native之间进行双向通信的一座桥梁，其内部定义了一套用于H5与Native进行通信的规范（包括协议、方法、传参及回调等），其中Native只通过一个固定的桥对象调用H5,而H5也只通过固定的桥对象调用NativeH5与Native交互图

三、H5调用Native的方法

1、url schemeH5和Native约定一套通信协议作为通信基础，一般如下schema://methodNameparams=xxxcb=xxx;H5通过某种方式（例如iframe.src）发送url scheme请求，之后Native拦截到请求并根据url scheme（包括所带的参数）进行相关操作其中，schema表示约定的协议名，methodName表示请求的native方法名，params表示请求参数，cd表示调用native方法之后的回调函数名缺点使用iframe.src发送url scheme会有url长度的隐患，且创建请求时需要一定的耗时，与注入API的方式调用同样的功能相比，耗时会较长

2、注入API主要原理是通过WebView提供的接口，向JavaScript的context window中注入对象或者方法，这样H5就可以直接在全局window下调用这个对象或者方法，执行相应的Native代码逻辑，达到H5调用Native的目的缺点安卓

4.2以下版本存在安全漏洞，可能会导致用户信息泄露；

4.2以上版本引入新的接口以解决了这个安全问题，但存在兼容性问题注WebView是移动端提供的运行JavaScript的环境，是系统渲染H5页面的一个控件，可与页面JavaScript交互，实现混合开发综上，H5调用Native更推荐使用注入API的方式在联通智家APP中待上线的快速配网功能模块就使用了注入API的方式实现H5与Native的交互其中，在H5页面绑定设备成功之后，需要跳转到APP设备列表页查看已绑定的设备，如下图所示Et▼Z的，V*•…0736•••X十添加设多+添加场景・毒场・O4♦定义・・O”设■堂・•16MJR■重■■■质S.■震・・电小•调用方法如下:window.sh.jumpToAppPage code:deviceList其中，sh是Native注入的全局JS对象，jumpToAppPage是约定好的跳转方法名，｛code:deviceList｝是请求参数

四、结语通过文本的介绍，相信大家对H5调用Native的方法有了一定的了解，在实际开发过程中，具体的实现方法还需要根据需求具体分析。