1 流行的混合开发方案
基于 WebView UI （JSBridge）
基于 Native UI（ReactNative、weex）
小程序方案（微信、支付宝小程序）
JS通过JSBridge来调用native api，如拍照/扫一扫
2 H5和原生互相调用
2.1 注册全局api
异步情况导致卡顿
传递数据格式不同：面向 Android 只能接受 基本数据 类型数据。面向 IOS 可以接受任意类型数据。
返回值不同：面向 Android 可以直接接收返回值。面向 IOS 没有办法直接获取返回值。
// H5 调用 Android 方法function onAndroidFunction1 (str) {window.AndroidJSBridge.androidTestFunction1(str);}// Android 调用 H5 方法window.onFunction = function (str) {alert(str);return 'onFunction 方法已经调用完成';}// H5 调用 IOS 方法function onIOSFunction1 (str) {window.webkit.messageHandlers.IOSTestFunction1.postMessage({msg: str});}// IOS 回调 H5 方法window.onFunctionIOS = function (str) {alert(str);return 'onFunctionIOS 方法已经调用完成';}2.2 url scheme
APP中转返回网页
const iframe1 = document.getElementById('iframe1')iframe1.onload = () => {const content = iframe1.contentWindow.document.body.innerHTMLconsole.info('content', content)}iframe1.src = 'my-app-name://api/getVersion'// // URL scheme// 封装 JS-bridge：自造协议标准，不用发请求：fn1代表各种功能const sdk = {invoke(url, data = {}, onSuccess, onError) {const iframe = document.createElement('iframe')iframe.style.visibility = 'hidden'document.body.appendChild(iframe)iframe.onload = () => {const content = iframe1.contentWindow.document.body.innerHTMLonSuccess(JSON.parse(content))iframe.remove()}iframe.onerror = () => {onError()iframe.remove()}iframe.src = `my-app-name://${url}?data=${JSON.stringify(data)}`},fn1(data, onSuccess, onError) {this.invoke('api/fn1', data, onSuccess, onError)},fn2(data, onSuccess, onError) {this.invoke('api/fn2', data, onSuccess, onError)},fn3(data, onSuccess, onError) {this.invoke('api/fn3', data, onSuccess, onError)},}
