微信小程序和H5页面如何实现相互跳转，并在跳转时传递extraData数据？请提供示例代码。

要实现微信小程序与H5页面之间的相互跳转，并传递extraData数据，你需要注意两者跳转机制的不同，并确保使用正确的API进行操作。微信小程序提供了`wx.navigateToMiniProgram`和`wx.miniProgram.navigateTo`等API来实现与H5页面的跳转，而H5页面可以通过调用微信小程序提供的接口跳转到小程序。

参考资源链接：[微信小程序与H5页面跳转代码详解与示例](https://wenku.csdn.net/doc/6401ace9cce7214c316ed980?spm=1055.2569.3001.10343)

对于微信小程序跳转到H5页面，可以在小程序中使用`wx.navigateToMiniProgram`方法，该方法需要传递目标小程序的AppID（`appId`）、页面路径（`path`）以及要传递的数据（`extraData`）。以下是一个示例代码片段：

// 微信小程序跳转到H5页面
wx.navigateToMiniProgram({
  appId: 'mAppId', // 目标小程序的AppID
  path: 'pages/index/index?id=123', // 目标页面路径
  extraData: {
    // 需要传递的数据
    'data': '传递的数据内容'
  },
  success: function (res) {
    // 跳转成功后的操作
  },
  fail: function (err) {
    // 跳转失败的操作
  }
});

而当H5页面需要跳转到微信小程序时，可以使用`wx.miniProgram.navigateTo`方法，如下所示：

<!-- H5页面跳转到微信小程序 -->
<script>
wx.miniProgram.navigateTo({
  url: 'miniPrograms://pages/index/index?id=123', // 小程序页面路径
});
</script>

在上述代码中，`url`参数的格式是`miniPrograms://pages/{页面路径}`，其中`pages`后面跟着的是小程序页面的路径。在小程序中设置好对应的schema后，就可以实现H5页面跳转到小程序的功能。

注意，在使用这些API时，需要确保小程序已设置允许从H5页面打开，同时H5页面也配置了正确的跳转链接。此外，由于小程序存在多个开发环境（如开发版、体验版、正式版），在跳转时还可以指定跳转的环境版本。

通过以上步骤，你可以在微信小程序和H5页面之间实现相互跳转，并在跳转时传递需要的extraData数据。为了更好地理解和应用这些知识，建议参阅《微信小程序与H5页面跳转代码详解与示例》，该资料提供了详细的代码示例和场景解析，有助于开发者在实际项目中快速应用和掌握这一技能。

参考资源链接：[微信小程序与H5页面跳转代码详解与示例](https://wenku.csdn.net/doc/6401ace9cce7214c316ed980?spm=1055.2569.3001.10343)