title: WebView
sidebar_label: WebView
Container that carries webpages. It automatically fills the entire Mini Program page. It is currently not supported on Mini Programs owned by personal entities (individual).
Reference
Type
ComponentType<WebViewProps>
Examples
import Tabs from ‘@theme/Tabs’;
import TabItem from ‘@theme/TabItem’;
tsx
class App extends Component {
handleMessage () {}
render () {
return (
<WebView src='https://mp.weixin.qq.com/' onMessage={this.handleMessage} />
)
}
}
html
<template>
<web-view src='https://mp.weixin.qq.com/' @message="handleMessage" />
</template>
WebViewProps
| Property |
Type |
Required |
Description |
| src |
string |
Yes |
wThe link from the webview to a webpage. It allows you to open an article of a linked Official Account. For other webpages, log in to Mini Program admin console to configure the service domain name. |
| onMessage |
BaseEventOrigFunction<onMessageEventDetail> |
No |
Triggered at a specific occasion (for example, the Mini Program returns to a previous page, a component is terminated, or a page is shared) when postMessage is called from a webpage to the Mini Program. A message is received after the event is triggered. The e.detail is {{ data }}, where data is an array consisting of parameter values obtained via multiple calls to postMessage. |
| onLoad |
BaseEventOrigFunction<onLoadEventDetail> |
No |
Triggered when a webpage is loaded. e.detail = {{ src }} |
| onError |
BaseEventOrigFunction<onErrorEventDetail> |
No |
Triggered when a webpage failed to be loaded. e.detail = {{ src }} |
Property Support
| Property |
WeChat Mini-Program |
H5 |
React Native |
| WebViewProps.src |
✔️ |
✔️ |
|
| WebViewProps.onMessage |
✔️ |
|
|
| WebViewProps.onLoad |
✔️ |
✔️ |
|
| WebViewProps.onError |
✔️ |
✔️ |
onMessageEventDetail
| Property |
Type |
Description |
| data |
any[] |
The message data is an array of multiple postMessage parameters. |
onLoadEventDetail
| Property |
Type |
Description |
| src |
string |
Web Link Address |
onErrorEventDetail
| Property |
Type |
Description |
| src |
string |
Web Link Address |
API Support
| API |
WeChat Mini-Program |
H5 |
React Native |
| WebView |
✔️ |
✔️ |
✔️ |
