微信小程序嵌入 H5 页面（webview）基本用法和父子传参数说明

在微信小程序中，嵌入H5页面是一个常见的需求，用于展示丰富的网页内容。小程序通过WebView组件来实现这个功能。本文将介绍如何在小程序中使用WebView嵌入H5页面，并说明如何进行父子传参。

一、WebView组件的基本用法

要在微信小程序中使用WebView组件，需要将对应的页面注册到app.json中，并在页面中使用<web-view>标签。

1. 注册页面

首先，在小程序的app.json文件中注册你的WebView页面。例如，如果你的WebView页面名为webview，相应的配置如下：

{
  "pages": [
    "pages/index/index",
    "pages/webview/webview" // 注册webview页面
  ]
}

2. 创建WebView页面

创建一个新的页面webview，在该页面的webview标签中使用src属性指定需要展示的H5页面链接。代码如下：

<!-- pages/webview/webview.wxml -->
<view class="container">
  <web-view src="https://www.example.com" bindmessage="onMessage"></web-view>
</view>

/* pages/webview/webview.wxss */
.container {
  height: 100%;
}

二、父子传参数说明

1. 从小程序向H5传参

在小程序中，可以通过在src中添加查询参数的方式，向H5页面传递参数。例如：

// 在某个页面中跳转到webview页面
const url = 'https://www.example.com?param1=value1&param2=value2';
wx.navigateTo({
  url: '/pages/webview/webview?url=' + encodeURIComponent(url)
});

在WebView页面中，可以通过onLoad方法获取传递的参数：

// pages/webview/webview.js
Page({
  onLoad: function(options) {
    const url = decodeURIComponent(options.url);
    this.setData({
      webviewSrc: url
    });
  }
});

<!-- pages/webview/webview.wxml -->
<view class="container">
  <web-view src="{{webviewSrc}}" bindmessage="onMessage"></web-view>
</view>

2. 从H5向小程序传参

在H5页面中，如果需要传递参数给小程序，可以通过postMessage进行消息传递。在小程序中，使用bindmessage来监听发送过来的消息。

在H5页面中发送消息的代码可能是这样的：

// h5页面中
window.onload = function() {
  const data = {
    message: "Hello from H5",
    data: { key: "value" }
  };
  window.qyt && window.qyt.sendMessage(data); // 假设qyt是封装的发送方法
}

在小程序的WebView页面中，监听并处理这个消息：

// pages/webview/webview.js
Page({
  onLoad: function(options) {
    const url = decodeURIComponent(options.url);
    this.setData({
      webviewSrc: url
    });
  },
  onMessage: function(event) {
    const dataFromH5 = event.detail.data;
    console.log('来自H5的消息:', dataFromH5);
    // 处理从H5页面来的数据
  }
});

总结

在微信小程序中使用WebView组件嵌入H5页面是一个非常方便的功能，通过合理地传递参数，可以实现小程序与H5之间的互动。使用query参数可以轻松地将小程序的数据传递给H5，而通过postMessage机制，H5也可以向小程序传递数据。希望本文的介绍能够帮助开发者更好地利用这一功能。