Skip to main content
Version: Next

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

class App extends Component {
handleMessage () {}

render () {
return (
<WebView src='https://mp.weixin.qq.com/' onMessage={this.handleMessage} />
)
}
}

WebViewProps

PropertyTypeRequiredDescription
srcstringYeswThe 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.
onMessageBaseEventOrigFunction<onMessageEventDetail>NoTriggered 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.
onLoadBaseEventOrigFunction<onLoadEventDetail>NoTriggered when a webpage is loaded. e.detail = { src }
onErrorBaseEventOrigFunction<onErrorEventDetail>NoTriggered when a webpage failed to be loaded. e.detail = { src }

Property Support

PropertyWeChat Mini-ProgramH5React Native
WebViewProps.src✔️✔️
WebViewProps.onMessage✔️
WebViewProps.onLoad✔️✔️
WebViewProps.onError✔️✔️

onMessageEventDetail

PropertyTypeDescription
dataany[]The message data is an array of multiple postMessage parameters.

onLoadEventDetail

PropertyTypeDescription
srcstringWeb Link Address

onErrorEventDetail

PropertyTypeDescription
srcstringWeb Link Address

API Support

APIWeChat Mini-ProgramH5React Native
WebView✔️✔️✔️