web-view

Start from base library version 1.6.4. Please remaining backward compatible.

The web-view component is a container that can be used to host web pages, and it can automatically covering the entire Mini Program page. Mini Programs of personal and overseas types are not supported for the time being.

Since the client 6.7.2 version. navigationStyle:](../framework/config.md#window)[ ](../framework/config.md#window)[custom is invalid for <web-view> component

Attribute name Type Default Value Description
src String webview Links to web pages, through which the articles of the associated official accounts can be opened. For other web pages, it needs to log in the Mini Program Management Background to configure business domain names.
bindmessage EventHandler When a web page executes postMessage to the Mini Program, a message is triggered and received at a specific time (when the Mini Program goes back, the component is destroyed, or a share is made). e.detail = { data }
bindload EventHandler This event is triggered when the page loads successfully. e.detail = { src }
binderror EventHandler This event is triggered when the page fails to load. e.detail = { src }

Sample code:

<!-- wxml -->
<!-- The web-view directing to the home of the WeChat Official Account Platform -->
<web-view src="https://mp.weixin.qq.com/"></web-view>

You can use the interface provided by JSSDK 1.3.2 to return the Mini Program page in the <web-view/> web page. Supported interfaces include:

Interface name Description Minimum Version
wx.miniProgram.navigateTo The parameters are consistent with those of the Mini Program interface 1.6.4
wx.miniProgram.navigateBack The parameters are consistent with those of the Mini Program interface 1.6.4
wx.miniProgram.switchTab The parameters are consistent with those of the Mini Program interface 1.6.5
wx.miniProgram.reLaunch The parameters are consistent with those of the Mini Program interface 1.6.5
wx.miniProgram.redirectTo The parameters are consistent with those of the Mini Program interface 1.6.5
wx.miniProgram.postMessage Send a message to the Mini Program 1.7.1
wx.miniProgram.getEnv Get the current environment 1.7.1

Sample code:

Preview with Developer Tool

<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true })

<web-view/> Only the following JSSDK interfaces are supported in the web page:

Interface module Interface Description Specific Interface
Determine whether the client supports js checkJSApi
Image interface Take photos or upload chooseImage
Preview images previewImage
Upload images uploadImage
Download images downloadImage
Get local images getLocalImgData
Audio interface Start recording startRecord
Stop recording stopRecord
Stop monitoring recording automatically onVoiceRecordEnd
Play voice playVoice
Pause playback pauseVoice
Stop playback stopVoice
Monitor the end of voice playback onVoicePlayEnd
Upload interfaces uploadVoice
Download interfaces downloadVoice
Intelligent interface Identify audios translateVoice
Device information Get network states getNetworkType
Geographical location Use built-in maps getLocation
Get geographical locations openLocation
Shake Nearby Enable ibeacon startSearchBeacons
Close ibeacon stopSearchBeacons
Monitor ibeacon onSearchBeacons
WeChat Scan QR Code Tune up WeChat Scan QR Code scanQRCode
WeChat Cards Offers Pull the list of coupon usage chooseCard
Add coupons in batch interface addCard
View the coupons in WeChat Cards Offers openCard
Press and hold to identify Mini Program circular codes N/A

Users can get the URL of the current <web-view/> when sharing, which returns the webViewUrl parameter in the onShareAppMessage callback.

Sample code:

Page({
  onShareAppMessage(options) {
    console.log(options.webViewUrl)
  }
})

In a web page, the window.__wxjs_environment variable can be used to determine whether the current environment is the Mini Program environment. It is recommended to use it in the WeixinJSBridgeReady callback, or you can use the getEnv interface provided by the JSSDK 1.3.2.

Sample code:

// Within the page under the web-view
function ready() {
  console.log(window.__wxjs_environment === 'miniprogram') // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
  document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
  ready()
}

// or
wx.miniProgram.getEnv(function(res) {
  console.log(res.miniprogram) // true
})

Bug & Tip
  1. The iframe domain name in the web page also needs to be configured to the domain name whitelist.
  2. On the developer toolkit, you can open the debugging of the <web-view/> component by right-clicking on the <web-view/> component and selecting "Debug".
  3. There can only be one <web-view/> per page, and <web-view/> will automatically cover the entire page and override other components.
  4. Communication between <web-view/> web pages and the Mini Program does not support interfaces other than those provided by JSSDK.
  5. In iOS devices, if there is no response to a JSSDK interface call, a #wechat_redirect can be added after the src of <web-view/>.