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

React

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

Vue

<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	✔️	✔️	✔️