# web-view

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

A container that hosts web pages. Will automatically cover the entire Mini Program page,Personal type Mini Program is not supported for the time being.

client 6.7.2 Version starts,navigationStyle: custom Yes web-view Invalid component

Cannot be used in Mini Programs.

attribute type Default value Required Introductions Minimum version
src string no webview A link to a web page. Openable associated Official Account message template Other pages need to loginMini Program management backgroundconfigure the business domain name. 1.6.4
bindmessage eventhandler no Webpage to Mini Program postMessage A message is triggered and received at certain times (Mini Program back, component destruction, sharing). e.detail = { data }, data is a multiple postMessage Array of parameters of 1.6.4
bindload eventhandler no This event is triggered when the page loads successfully. e.detail = { src } 1.6.4
binderror eventhandler no This event is triggered when a page load fails. e.detail = { src } 1.6.4

# Correlation interface 1

[web-view]((Web-view) web pages, you can use theJSSDK 1.3.2 provides an interface to return to the Mini Program page. Supported interfaces are:

Interface name Introductions Minimum version
wx.miniProgram.navigateTo Parameters are consistent with the Mini Program interface 1.6.4
wx.miniProgram.navigateBack Parameters are consistent with the Mini Program interface 1.6.4
wx.miniProgram.switchTab Parameters are consistent with the Mini Program interface 1.6.5
wx.miniProgram.reLaunch Parameters are consistent with the Mini Program interface 1.6.5
wx.miniProgram.redirectTo Parameters are consistent with the Mini Program interface 1.6.5
wx.miniProgram.postMessage Sends a message to the Mini Programs that triggers the component's message event at a specific time (Mini Programs retreat, component destruction, sharing) 1.7.1
wx.miniProgram.getEnv Get the current environment 1.7.1

# sample code

Preview with Developer Tool

// <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) })

# Correlation interface 2

[web-view]((Web-view)Support for the following onlyJSSDK interface

interface module Interface specification Concrete interface
Determine if the client supports js checkJSApi
Image interface Take a photo or upload chooseImage
Preview Pictures previewImage
Upload pictures uploadImage
Download pictures downloadImage
Get Local Pictures getLocalImgData
Audio interface Start recording. startRecord
Stop recording. stopRecord
Automatic stop of listening recording onVoiceRecordEnd
Play Voice playVoice
Pause Play pauseVoice
Stop playing stopVoice
Listen to the voice playback onVoicePlayEnd
Upload interface uploadVoice
Download interface downloadVoice
Intelligent interface Identify audio translateVoice
Equipment information Get network status getNetworkType
geographical location Use built-in maps to open locations openLocation
Get geographic location getLocation
Shake the perimeter Turn on ibeacon startSearchBeacons
Shut down ibeacon stopSearchBeacons
Listen to ibeacon onSearchBeacons
WeChat scan Tune up WeChat scan scanQRCode
WeChat card coupons Pull card coupon list chooseCard
Batch Add Coupon Interface addCard
Check the card coupon of WeChat card package openCard
Long press recognition Mini Program circular code nothing

# Correlation interface 3

When the user shares, get the current[web-view]((Web-view), which is the URL in theonShareAppMessageReturns in callbackWebViewUrlParameters.

# sample code

Sample code:

  onShareAppMessage(options) {

# Correlation interface 4

Can be accessed throughwindow.__wxjs_environmentVariable to determine whether in the Mini Programs environment, it is recommended inWeixinJSBridgeReadyCallback, or you can use theJSSDK 1.3.2getEnvInterface.

# sample code

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

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

# Correlation interface 5

From WeChat7.0.0To begin with, you can judgeuserAgentContained inminiProgramWords to determine the Mini Programs web-view environment.

# Correlation interface 6

From WeChat7.0.3To start, the webview can determine whether the Mini Program is in the foreground by determining the following:

WeixinJSBridge.on('onPageStateChange', function(res) {
  console.log('nothing is active', nothing.active)

# Bug & Tip

  1. tipInside the page iframe The domain name also needs to be configured into the domain whitelist.
  2. tipOn the developer tools, you can web-view Component by right-clicking - Debug, Open web-view Component debugging.
  3. tip: Each page can have only one web-viewweb-view Automatically covers the entire page and overwrites other components.
  4. tipweb-view Division between web pages and Mini Programs is not supported JSSDK Provides communication beyond the interface provided by.
  5. tip:: In iOS If there is an unresponsive JS SDK interface call, you can web-view of src Add it to the back.#wechat_Redirect resolved.
  6. tipAvoid Chinese characters in links, and iOS There will be a problem to open the white screen, it is recommended to add EncodeURIComponent