search

Vitaminaq / interview-collection

前端面试合集
3 stars 0 forks source link

h5与原生通信。 #17

Open Vitaminaq opened 2 years ago

Vitaminaq commented 2 years ago

h5向原生通信

  1. 得益于原生webview初始化的时候会在h5这边的windows下注入相关通信方法，具体方法名跟系统有关。

    如安卓：window.webviewName(sendDataString)  
IOS：win.webkit.messageHandlers[fnName].postMessage(sendDataString)
flutter和reactNative提供的webview所注入的方法又会不同，总之万变不离其宗。

    demo参考链接

  2. 原生端可通过拦截h5 url跳转，通常称为scheme协议或者伪协议，如：APP://toHome。常见场景有h5拨打电话，发送邮件等。

原生向h5通信

得益于原生拥有可执行js方法的权力，所以调用我们挂载在windows下的回调方法，即可完成通信。