Communication Between Uni-app and Embedded Web-view Components
Tech
2
Parent-to-Child Communication
URL Parameter Passing
For small data payloads, embed parameters direct in the web-view URL.
Parent Component (Vue 3)
<template>
<web-view src="/static/webpage.html?payload=demo"></web-view>
</template>
JavaScript Bridge Method
Use Uni-app's bridge script for complex data transfer.
Parent Component
<script setup>
import { ref, onMounted } from 'vue'
const webViewRef = ref(null)
let embeddedView = null
onMounted(() => {
setTimeout(() => {
const pages = getCurrentPages()
embeddedView = pages[pages.length - 1].$getAppWebview().children()[0]
embeddedView.evalJS('acceptData({"status": "active", "id": 42})')
}, 1000)
})
</script>
Child Page (HTML)
<script src="/scripts/uni.webview.1.5.3.js"></script>
<script>
function acceptData(payload) {
console.log('Received:', JSON.stringify(payload))
}
</script>
Child-to-Parent Communication
Parent Component
<template>
<web-view src="/static/webpage.html" @message="processEvent"></web-view>
</template>
<script setup>
function processEvent(event) {
console.log('Event data:', event.detail)
}
</script>
Child Page (HTML)
<button onclick="transmitInfo()">Send Data</button>
<script src="/scripts/uni.webview.1.5.3.js"></script>
<script>
function transmitInfo() {
uni.postMessage({
data: { action: "update", value: 78 }
})
}
</script>
Available Methods
| Method | Description | Platform Notes |
|---|---|---|
| navigateTo | Open new page | Universal |
| redirectTo | Replace current page | Universal |
| reLaunch | Reset navigation stack | Universal |
| switchTab | Switch tabbar page | Universal |
| navigateBack | Return to previous page | Universal |
| postMessage | Send message to native | ByteDance/H5 limited |
| getEnv | Detect runtime environment | ByteDance/Feishu excluded |
Component Properties
| Property | Type | Description | Platform Notes |
|---|---|---|---|
| src | String | Target URL | Universal |
| allow | String | Feature policy | H5 only |
| sandbox | String | Security restrictions | H5 only |
| webview-styles | Object | Styling options | App-vue |
| update-title | Boolean | Auto-update title | App-vue (HX 3.3.8+) |
| @message | EventHandler | Message receiver | H5 limited |
| @onPostMessage | EventHandler | Real-time messaging | App-nvue |
