微信小程序如何巧妙嵌入H5页面！_微信小程序嵌入网页

前言

      微信小程序中嵌入H5页面通常指的是在小程序中使用Web-view组件来加载外部的网页。而要实现小程序与H5页面的通讯，一般通过URL参数传递或者使用微信的JS-SDK。

      但是要使用该功能需要小程序是通过微信认证并且需要再小程序的开发设置里面，找到业务域名，按照要求来验证服务器才可以使用web-view组件。

 

web-view组件文档：

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 

业务域名配置说明：业务域名设置--校验文件检查失败自查指引 | 微信开放社区 (qq.com) 

微信小程序

在小程序的某个页面中使用Web-view组件来加载H5页面 

<web-view src="{{h5Url}}" bindmessage="handleMessage"></web-view>

其中h5Url是你想要加载的H5页面的URL 

h5Url: 'https://baidu.com/?param1=value1&param2=value2' 

bindmessage，处理H5页面通过postMessage发送过来的消息 

handleMessage(e) {
    // 处理H5页面通过postMessage发送过来的消息
    console.log(e.detail.data);
}

传递参数到H5页面

通过URL参数的方式将参数传递给H5页面。在H5页面中，你可以使用JavaScript的window.location对象来获取这些参数。

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

H5页面调用微信小程序方法

由于安全限制，H5页面无法直接调用微信小程序的方法，但可以通过Web-view组件的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组件的最新说明和要求。