一. 什么是web-view
web-view是一個(gè)web瀏覽器組件铐料，可以用來(lái)承載網(wǎng)頁(yè)的容器阳似，會(huì)自動(dòng)鋪滿整個(gè)頁(yè)面（nvue使用需要手動(dòng)指定寬高）剂碴。
二. web-view更多介紹
三. web-view 和 vue頁(yè)面 監(jiān)聽傳參
1. vue 頁(yè)面?zhèn)鲄⒔o uniapp 頁(yè)面
vue項(xiàng)目 public文件夾下面的index.html中添加這行代碼
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
vue傳參給 uniapp
<template>
<div class="index">
<button @click="clickVal">點(diǎn)擊傳參</button>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
// 點(diǎn)擊 傳參
clickVal() {
uni.postMessage({
data: {
text: '我傳參怎么了咸这，我傳參怎么了痒蓬，我傳參怎么了贮勃。',
}
})
}
}
}
</script>
uniapp 接收 vue 參數(shù)
<template>
<view class="content">
<web-view @message="messageData" src="http://192.168.65.8:8080/#/"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
// 監(jiān)聽的參數(shù)
messageData(e) {
console.log(JSON.stringify(e.detail)) // 接收的參數(shù)
},
}
}
</script>
<style>
</style>
image.png
2. uniapp 傳參給 vue頁(yè)面
mounted() {
let currentWebview = this.$scope.$getAppWebview();
let wv = currentWebview.children()[0];
let data = {
text:'uniapp傳參給vue'
}
wv.evalJS(`getVueMessage(${JSON.stringify(data)})`);
}
vue頁(yè)面接收參數(shù)
mounted() {
this.$nextTick(() => {
window.getVueMessage = (data) => {
this.text = data.text
// console.log(data.text)
}
})
}
四. 完整示例代碼
uniapp 頁(yè)面
<template>
<view class="content">
<web-view @message="messageData" src="http://192.168.65.8:8080/#/"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
mounted() {
let currentWebview = this.$scope.$getAppWebview();
let wv = currentWebview.children()[0];
let data = {
text:'uniapp傳參給vue'
}
wv.evalJS(`getVueMessage(${JSON.stringify(data)})`);
},
methods: {
// 監(jiān)聽的參數(shù)
messageData(e) {
console.log(JSON.stringify(e.detail)) // 接收的參數(shù)
},
}
}
</script>
<style>
</style>
vue 頁(yè)面
<template>
<div class="index">
<button @click="clickVal">點(diǎn)擊傳參</button>{{ text }}
</div>
</template>
<script>
export default {
data() {
return {
text:''
}
},
mounted() {
this.$nextTick(() => {
window.getVueMessage = (data) => {
this.text = data.text
// console.log(data.text)
}
})
},
methods: {
// 點(diǎn)擊 傳參
clickVal() {
uni.postMessage({
data: {
text: '我傳參怎么了贪惹，我傳參怎么了，我傳參怎么了寂嘉。',
}
})
}
}
}
</script>
<style scoped lang="less"></style>
五. 坑人 .nvue web-view傳參方式
- nvue 獲取不到 window奏瞬。
let currentWebview = this.$scope.$getAppWebview();
let wv = currentWebview.children()[0];為null;
wv.evalJS()報(bào)錯(cuò)@message換成@onPostMessage監(jiān)聽參數(shù)web-view上使用evalJS
完整unapp nvue 代碼
<template>
<view class="content">
<web-view style="width: 600px; height: 500px;" @onPostMessage="messageData" src="http://192.168.65.8:8080/#/" ref="webView"></web-view>
<button @click="clickButton">uniapp點(diǎn)擊傳參</button>{{title}}
</view>
</template>
<script>
export default {
data() {
return {
title: ''
}
},
onLoad() {
},
mounted() {
},
methods: {
// 點(diǎn)擊 傳參
clickButton() {
let data = {
text:'uniapp傳參給vue'
}
console.log(this.$refs.webView)
//`web-view` 上使用 `evalJS`
this.$refs.webView.evalJS(`getVueMessage(${JSON.stringify(data)})`);
},
// 監(jiān)聽的參數(shù)
messageData(e) {
// console.log(JSON.stringify(e.detail)) // 接收的參數(shù)
this.title = e.detail.data;
},
}
}
</script>
<style>
</style>
