共计 1370 个字符,预计需要花费 4 分钟才能阅读完成。
一、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)
},
正文完