小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
JsBridge
JSBridge 是一种 JS 实现的 Bridge，连接着桥两端的 Native 和 H5。它在 APP 内方便地让 Native 调用 JS，JS 调用 Native ，是双向通信的通道。JSBridge 主要提供了 JS 调用 Native 代码的能力，实现原生功能如查看本地相册、打开摄像头、指纹支付等。
双向通信原理
JS 调用 Native
拦截 URL Scheme
Android的话，Webview提供了shouldOverrideUrlLoading方法来提供给Native拦截H5发送的URL Scheme请求iOS的WKWebview可以根据拦截到的URL Scheme和对应的参数执行相关的操作
这种方法的优点是 不存在漏洞问题、使用灵活，可以实现 H5 和 Native 页面的无缝切换
重写 prompt
注入 API
基于 Webview 提供的能力，我们可以向 Window 上注入对象或方法。JS 通过这个对象或方法进行调用时，执行对应的逻辑操作，可以直接调用 Native 的方法。使用该方式时，JS 需要等到 Native 执行完对应的逻辑后才能进行回调里面的操作。
Android的Webview提供了addJavascriptInterface方法，支持Android 4.2及以上系统IOS的UIWebview提供了JavaScriptScore方法，支持iOS 7.0及以上系统
Native 调用 JS
Native 调用 JS 比较简单，只要H5 将 JS 方法暴露在 Window 上给 Native 调用即可
JSBridge 的使用
由 H5 引用
采用本地引入 npm 包的方式进行调用。这种方式可以确定 JSBridge 是存在的，可直接调用 Native 方法。但是如果后期 Bridge 的实现方式改变，双方需要做更多的兼容，维护成本高
由 Native 注入
有利于保持 API 与 Native 的一致性，但是缺点是在 Native 注入的方法和时机都受限，JS 调用 Native 之前需要先判断 JSBridge 是否注入成功
结语
如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。
文章如有错误之处，希望在评论区指正🙏🙏。
