The H5 web page is embedded in the applet using the web view. The web view can be displayed in the applet by setting the src attribute to specify the web page. A page can only have one web view, and the whole applet page will be covered automatically.

Official web view documentation: Web view | wechat open document wechat developer platform documenthttps://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

H5 end code:

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

Applet side code:

<web-view src="{{url}}" bindmessage="onLoadMessage" bindload="onWebLoad" binderror="onWebError"></web-view>

Web view component properties:  

attribute	type	Default value	Required	explain	Minimum version
src	string		no	webview links to web pages. You can open related articles of official account, and other web pages need to login. Applet management background Configure the business domain name.	1.6.4
bindmessage	eventhandler		no	When a web page sends a postMessage to an applet, it will trigger and receive a message at a specific time (applet fallback, component destruction, sharing). e. Detail = {data}, data is an array of parameters of multiple postmessages	1.6.4
bindload	eventhandler		no	This event is triggered when the web page is loaded successfully. e.detail = { src }	1.6.4
binderror	eventhandler		no	This event is triggered when the web page fails to load. e.detail = { src }	1.6.4

Available in H5 web pages JSSDK 1.3.2 The provided interface returns to the applet page. Supported interfaces are:

Interface name	explain	Minimum version
wx.miniProgram.navigateTo	The parameters are consistent with the applet interface	1.6.4
wx.miniProgram.navigateBack	The parameters are consistent with the applet interface	1.6.4
wx.miniProgram.switchTab	The parameters are consistent with the applet interface	1.6.5
wx.miniProgram.reLaunch	The parameters are consistent with the applet interface	1.6.5
wx.miniProgram.redirectTo	The parameters are consistent with the applet interface	1.6.5
wx.miniProgram.postMessage	Sending a message to an applet will trigger the message event of the component at a specific time (applet fallback, component destruction, sharing)	1.7.1
wx.miniProgram.getEnv	Get current environment	1.7.1

The applet passes values to the web page

The applet passes parameters to the web page. The value that needs to be brought to the web page can be realized by splicing parameters, and then intercepted in the web page.

<!-- Applet page -->
<web-view src="http://a.html?id=123"></web-view>

<!-- Webpage a.html-->
<script>
    let id = getUrlParam('id'); 
</script>

  Web pages pass values to applets

• Forwarding method through url and applet

Put the value to be passed to the applet as a parameter on the current url, and the applet can get it by clicking forward. The disadvantage of this method is that it can only be transmitted when clicking forward.

onShareAppMessage: function (options) {
    let webViewUrl = options.webViewUrl;//Web view current web address
}

• postMessage method using wechat sdk

By using the postMessage method of wechat sdk, the bindmessage method in the applet web view will trigger and receive the message at a specific time (applet retreat, component destruction, sharing). e.detail = { data }  

H5 end:

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

// javascript
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })

Applet side:

<!-- wxml -->
<web-view src="http://a.html?id=123" bindmessage="postMessage"></web-view>

// javascript
postMessage(e) {
    console.log(e)
},