关于uniapp:uniapp开发appwebview与app相互通信

一、app 向 webview 发送数据（传参），在 index.vue 页面

1、通过 url 传参

<view class="html-box">
    <web-view :src="'../../../hybrid/html/viewContract/index.html?data=' + obj"@message="getMessage"ref="wv"></web-view>
</view>


2、通过 evalJS("uniEvent(`${params}`)")
data() {
    return {
        currentWebview: null,
        obj: null
    }    
},
onLoad() {
    const self = this;
    self.currentWebview = self.$scope.$getAppWebview().children()[0]

    // 传递大量数据
    self.currentWebview.evalJS(`getParams(${JSON.stringify(res)})`)
},
methods: {saveContract() {//app 通过事件向 html 发送数据
        const self = this;
        self.currentWebview.evalJS("uniEvent('saveContract')");    
    },
}

二、webview 接管 app 发来的数据（传参），在 /hybrid/html/viewContract/index.html 页面

1、通过 url 接管参数
<script type="text/javascript">
    console.log('接管 url 参数', decodeURIComponent(location.href.split('data=')[1]))
</script>


2、通过 evalJS 定义的办法接管参数
<script type="text/javascript">
    let dianziHetong = null;
    window.getParams = (data) => {console.log("webview 外部：", data)
          dianziHetong = data
          console.log(dianziHetong)
    }
    window.uniEvent = function(data) {console.log('app 发来的数据', data)
    }
</script>

三、webview 向 app 发送数据（传参），在 /hybrid/html/viewContract/index.html 页面

1、通过 uni.postMessage()
<script src="../js/uni-webview.js"></script>
<script type="text/javascript">
    document.addEventListener('UniAppJSBridgeReady', function() {
        uni.postMessage({
            data: {
                msg: 'saveContract',
                content: editor.txt.html()}
        });
    })
</script>

四、app 接管 webview 发来的数据（传参），在 index.vue 页面

1、通过绑定事件 getMessage 获取
getMessage(e) {console.log('接管 webview 发来的数据', e.detail)
},