H5 混合开发（更新中）

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.innerHTML
            console.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.innerHTML
                    onSuccess(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)
            },
        }