# 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.

# 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:

# 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：

# 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:

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

# 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 {
  ready()
}

// 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. tip：Inside 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-view，web-view Automatically covers the entire page and overwrites other components.
4. tip：web-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