H5 混合开发（更新中）_h5 和ios 安卓混合开发

作者：Monodyee | 2024-06-13 01:24:25

踩

h5 和ios 安卓混合开发

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)
            },
        }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/710362