Yes, parameters can be passed between the H5 page and the WeChat mini - program when the H5 page is embedded in the WeChat mini - program using the web - view.
The web - view component in the WeChat mini - program provides a way to display web pages within the mini - program. Communication between the H5 page and the mini - program can be achieved through the JSSDK provided by WeChat. The mini - program can send data to the H5 page when it loads the web - view, and the H5 page can also trigger events and send data back to the mini - program.
In the mini - program code:
Page({
data: {
url: 'https://example.com/h5page'
},
onLoad() {
const { url } = this.data;
wx.navigateTo({
url: `/pages/webview/webview?url=${encodeURIComponent(url)}¶m1=value1¶m2=value2`
});
}
});
In the H5 page, you can get the parameters from the URL:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
</head>
<body>
<script>
function getQueryParams() {
const queryString = window.location.search.substring(1);
const params = {};
const pairs = queryString.split('&');
for (let i = 0; i < pairs.length; i++) {
const pair = pairs[i].split('=');
const key = decodeURIComponent(pair[0]);
const value = decodeURIComponent(pair[1] || '');
params[key] = value;
}
return params;
}
const params = getQueryParams();
console.log(params.param1); // value1
console.log(params.param2); // value2
</script>
</body>
</html>
First, in the mini - program, when using web - view, you need to register a message event listener:
Page({
onLoad() {
const webViewContext = wx.createWebViewContext('webviewId');
},
onMessage(e) {
console.log(e.detail.data); // Data sent from the H5 page
}
});
In the H5 page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
</head>
<body>
<button id="sendMessage">Send message to mini - program</button>
<script>
document.getElementById('sendMessage').addEventListener('click', function () {
if (typeof WeixinJSBridge!== "undefined") {
WeixinJSBridge.invoke('postMessage', {
data: JSON.stringify({
key1: 'value1',
key2: 'value2'
})
});
}
});
</script>
</body>
</html>
If you are developing the mini - program and H5 page on a cloud platform, Tencent Cloud can provide a series of services. For example, if you need to store the data passed between the H5 and the mini - program, you can use Tencent Cloud's Cloud Object Storage (COS) to store files related to the data. If you need to manage the servers for hosting the H5 page, Tencent Cloud's Cloud Virtual Machine (CVM) can be a good choice. It can provide a stable and reliable server environment for your H5 page.