h5 调用方式资料

h5调用方式一、导

读在如今移动端盛行的年代，技术选型上基本都是混合开发（Hybrid），混合开发是一种半Native半Web开发模式，充分利用H5的跨平台、快速迭代能力以及Native的流畅性、系统API调用能力，具有可复用性高、开发成本低、跨平台开发的特点。其通常会涉及到两大类技术：原生Native、WebH5，而Native、H5的相互通信离不开JSBridge。二、什么是JSBridgeHybrid模式下，H5会经常需要使用Native的功能，比如打开二维码扫描、调用原生页面、获取用户信息、状态同步等，同时Native也需要向H5端发送推送、更新状态、回溯调用结果等，而JavaScript是运行在单独的JSContext中（Webview容器、JSCore等），与原生有运行环境的隔离，所以需要有一种机制实现Native端和H5端的双向通信，这种机制就是JSBridge。JSBridge相当于H5与Native之间进行双向通信的一座桥梁，其内部定义了一套用于H5与Native进行通信的规范（包括协议、方法、传参及回调等），其中Native只通过一个固定的桥对象调用H5，而H5也只通过固定的桥对象调用Native。

H5与Native交互图三、H5调用Native的方法1、urlscheme：H5和Native约定一套通信协议作为通信基础，一般如下：schema://methodNameparams=xxx&cb=xxx;H5通过某种方式（例如iframe.src）发送urlscheme请求，之后Native拦截到请求并根据urlscheme（包括所带的参数）进行相关操作。其中，schema表示约定的协议名，methodName表示请求的native方法名，params表示请求参数，cd表示调用native方法之后的回调函数名。缺点：使用iframe.src发送urlscheme会有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设备列表页查看已绑定的设备，如下图所示。

调用方法如下：其中，sh是Native注入的全局JS对象，jumpToAppPage是约定好的跳转方法名，{code:‘deviceList’}是请求参