前言
web-view组件文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
JS-SDK文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
微信小程序
<web-view src="{{h5Url}}" bindmessage="handleMessage"></web-view>h5Url: 'https://baidu.com/?param1=value1¶m2=value2'
handleMessage(e) {
// 处理H5页面通过postMessage发送过来的消息
console.log(e.detail.data);
}// H5页面中的JavaScript代码
const queryParams = new URLSearchParams(window.location.search);
const param1 = queryParams.get('param1');
const param2 = queryParams.get('param2');H5页面
//微信JS-SDK
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
//测试用的vconsole
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>postMessage方法向小程序发送消息，然后小程序在bindmessage事件中处理这些消息。// H5页面中的JavaScript代码
window.wx.miniProgram.postMessage({ data: { action: 'yourAction', data: 'yourData' } });
// 在小程序页面中：
Page({
// ...
handleMessage(e) {
const { action, data } = e.detail.data;
// 根据action执行相应的操作，处理data
if (action === 'yourAction') {
// 执行你的操作
}
}
});window.wx.miniProgram是微信提供的全局对象，它允许H5页面与小程序进行交互。但需要注意的是，不是所有的网页都可以使用这个对象，只有被嵌入到微信小程序中的H5页面才能使用它。注意：
需要注意的是，Web-view组件加载的页面必须是一个完整的URL，不能是本地HTML文件。 由于安全限制，H5页面和小程序之间的交互受到一定的限制。因此，在设计交互逻辑时，应尽量避免复杂的交互操作，确保数据的安全性和隐私性。 另外，不同版本的微信可能对Web-view组件的支持和限制有所不同，因此在实际开发中需要关注微信官方文档中关于Web-view组件的最新说明和要求。
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
