H5与APP交互

目录

一. JSBridge介绍

二. 实现原理 

1. JavaScript调用Native有两种方法：注入API、拦截URL_SCHEMA

2. Native调用JavaScript 

---

一. JSBridge介绍

H5与原生客户端语言混合开发，成为当下的主流开发模式，即Hybrid WebUI开发，例如微信的小程序。

JSBridge应用于该场景，是用JS实现的一个【Bridge】，用来在APP内方便地让Js调用Native，Native调用Js，是双向通信的通道。

• JS向Native发送消息：调用相关功能，通知Native当前Js的状态
• Native向JS发送消息：回溯调用结果、消息推送、通知JS当前Native的相关状态

二. 实现原理 

1. JavaScript调用Native有两种方法：注入API、拦截URL_SCHEMA

1.1 注入API

原理是通过WebView提供的接口，向window注入方法或对象，让JavaScript调用时直接执行相应的Native代码逻辑。

//JSBridge 调用 注入的 对象 方法
let token = "js_tokenString";
let action = "loginSucceed";
let htmlBtn = "点击了H5按钮";
window.webkit.messageHandlers.jsToiOS.postMessage({action, token, htmlBtn});
//jsToiOS是H5与IOS约定好的方法名

1.2 拦截 URL SCHEME

URL SCHEME 是一种类似于url的链接，是为了方便app直接互相调用设计的，形式和普通的 url 近似，主要区别是 protocol 和 host 一般是自定义的。

例如:
custemProtocol://custemHost/url?url=ymfe.tech

Web 端通过某种方式（例如 iframe.src）发送 URL Scheme 请求，之后 Native 拦截到请求并根据 URL SCHEME（包括所带的参数）进行相关操作。

缺陷：

• 使用iframe.src发送URL_SCHEMA，url有长度限制
• 创建请求，需要一定的耗时 

2. Native调用JavaScript 

直接执行拼接好的JavaScript代码，Native调用的JavaScript方法必须在全局的window上