uni-app应用web-view加载三方web应用、网页应用、uni-app开发的H5应用调用uni的API及网页和vue页面通讯解决方案

1、基于非uni-app开发的三方web应用、网页应用与uni-app应用页面交互
该方案为通用方案，参考官方方案即可，该方案仅作为参考

// 动态加载js  
function loadScript(options, callback) {  
    if (!options.src) {  
        return;  
    }  
    // 判断引入的js对象是否存在  
    if (typeof options.fun == 'undefined') {  
        console.log('自动引入');  
        var node = document.createElement('script');  
        node.src = options.src;  
        node.addEventListener('load', callback, false);  
        document.head.appendChild(node);  
    } else {  
        console.log('直接渲染');  
        console.log(options.eventListener || 'load');  
        document.addEventListener(options.eventListener || 'load', callback, false);  
    }  
};  

// 执行动态加载，初始化js  
this.loadScript({  
    src: '/static/uni.webview.1.5.2.js',  
    fun: window.h5uni,  
    eventListener: 'UniAppJSBridgeReady'  
}, () => {  
    // your code  
    uni.navigateBack();  
});  

2、基于uni-app开发的H5应用页面交互
此处有坑：基于uni-app开发的H5应用与uni-app开发的应用进行集成页面交互，存在无法调用的情况，初步分析属于uni.webview.1.5.2.js中注册的uni对象被uni-app中注册的uni对象覆盖，导致无法正常加载；
解决办法：修改uni.webview.1.5.2.js源码中暴漏的uni对象名称，此处名称可自定义，我们暂时以h5uni为例进行演示，源码修改如下：

<template>  
    <view class="body">  
        <view class="desc">web-view 组件加载本地 html 示例，仅在 App 环境下生效。点击下列按钮，跳转至其它页面。</view>  
        <view class="btn-list">  
            <button class="btn" type="primary" @click="btnOpt" data-action="navigateTo">navigateTo</button>  
            <button class="btn" type="primary" @click="btnOpt" data-action="redirectTo">redirectTo</button>  
            <button class="btn" type="primary" @click="btnOpt" data-action="navigateBack">navigateBack</button>  
            <button class="btn" type="primary" @click="btnOpt" data-action="reLaunch">reLaunch</button>  
            <button class="btn" type="primary" @click="btnOpt" data-action="switchTab">switchTab</button>  
        </view>  
        <view class="desc">网页向应用发送消息。注意：小程序端应用会在此页面后退时接收到消息。</view>  
        <view class="btn-list">  
            <button class="btn btn-red" type="button" @click="btnOpt" data-action="postMessage">postMessage</button>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            }  
        },  
        onLoad() {  
            this.loadScript({  
                src: '/static/uni.webview.1.5.2.js',  
                fun: window.h5uni,  
                eventListener: 'UniAppJSBridgeReady'  
            }, () => {});  
        },  
        methods: {  
            loadScript(options, callback) {  
                if (!options.src) {  
                    return;  
                }  
                // 判断引入的js对象是否存在  
                if (typeof options.fun == 'undefined') {  
                    console.log('自动引入');  
                    var node = document.createElement('script');  
                    node.src = options.src;  
                    node.addEventListener('load', callback, false);  
                    document.head.appendChild(node);  
                } else {  
                    console.log('直接渲染');  
                    console.log(options.eventListener || 'load');  
                    document.addEventListener(options.eventListener || 'load', callback, false);  
                }  
            },  
            btnOpt(e) {  
                var action = e.currentTarget.dataset.action;  
                switch (action) {  
                    case 'switchTab':  
                        h5uni.switchTab({  
                            url: '/pages/index/index'  
                        });  
                        break;  
                    case 'reLaunch':  
                        h5uni.reLaunch({  
                            url: '/pages/index/index'  
                        });  
                        break;  
                    case 'navigateBack':  
                        h5uni.navigateBack({  
                            delta: 1  
                        });  
                        break;  
                    default:  
                        h5uni[action]({  
                            url: '/pages/index/index'  
                        });  
                        break;  
                }  
            },  
        }  
    }  
</script>  

<style>  
    .body {  
        margin: 0 16rpx;  
    }  

    .desc {  
        padding: 52rpx 20rpx;  
        color: #999999;  
        font-size: 32rpx;  
    }  

    .btn {  
        display: block;  
        margin: 20px auto;  
        padding: 5px;  
        border: 0;  
        color: #ffffff;  
        height: 40px;  
        width: 200px;  
        font-size: 13px;  
    }  

    .btn-red {  
        background-color: #dd524d;  
    }  

    .btn-yellow {  
        background-color: #f0ad4e;  
    }  
</style>