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).
Type
ComponentType<WebViewProps>
Examples
- React
- Vue
class App extends Component {
handleMessage () {}
render () {
return (
<WebView src='https://mp.weixin.qq.com/' onMessage={this.handleMessage} />
)
}
}
<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 | ✔️ | ✔️ | ✔️ |