taro 微信小程序 向h5 发消息

在 Taro 微信小程序中，你可以通过使用 `wx.onMessage` 监听来自 H5 页面的消息。具体步骤如下：

1. 在小程序页面中注册监听函数：

wx.onMessage((message) => {
  console.log('收到来自 H5 页面的消息：', message);
});

2. 在 H5 页面中使用 `wx.miniProgram.postMessage` 发送消息：

wx.miniProgram.postMessage({
  data: '来自 H5 页面的消息',
});

这样就可以在小程序页面中接收到来自 H5 页面的消息了。需要注意的是，H5 页面必须使用 `wx.miniProgram.postMessage` 方法发送消息，而不能使用普通的 `window.postMessage` 方法。

相关问题

taro 微信小程序 flex-basis： 0px 失效

Taro是一个用于快速开发跨平台应用的框架，包括微信小程序、H5等。`flex-basis` 是 Flexbox 模式下的主轴基础尺寸属性，它规定了项目在主轴方向上占据的基础大小。

如果在 Taro 的微信小程序中，设置 `flex-basis: 0px` 似乎失效，这可能是由于以下几个原因：

1. **默认值**：微信小程序的 Flexbox 实现可能不是完全一致，它可能会有自身的默认值。`0px` 可能被视为 `auto` 或者最小宽度，因此没有起作用。

2. **CSS 层级**：检查一下是否有其他样式覆盖了这个属性，或者看看是不是在某些特定条件下才不起作用。

3. **兼容性限制**：微信小程序对 CSS 的支持可能存在一些局限，特别是在早期版本中，对于一些 Flexbox 特性可能不完全支持。

4. **组件限制**：若你在自定义组件内部设置了 `flex-basis: 0px`，需确认该组件是否正确处理了 Flexbox 规则。

要解决这个问题，你可以尝试以下步骤：
- 确认其他相关的 Flexbox 属性是否正常工作。
- 使用开发者工具查看元素的实际样式，看是否有意外的样式冲突。
- 如果有必要，可以考虑使用 `width: 0` 和 `flex-shrink: 0` 来模拟类似的效果，因为这些属性通常在微信小程序中更好工作。

Taro+微信小程序 webview 嵌套的h5页面 适配 苹果底部状态栏

苹果底部状态栏的高度为 34px，可以通过媒体查询（media query）来适配。具体做法是在 CSS 文件中添加以下代码：

@media only screen and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) {
  /* iPhone X, XS, 11 Pro */
  .footer {
    padding-bottom: 34px;
  }
}

@media only screen and (max-device-width: 896px) and (-webkit-device-pixel-ratio: 2) {
  /* iPhone XR, 11 */
  .footer {
    padding-bottom: 34px;
  }
}

@media only screen and (max-device-width: 896px) and (-webkit-device-pixel-ratio: 3) {
  /* iPhone XS Max, XR, 11 Pro Max */
  .footer {
    padding-bottom: 34px;
  }
}

其中，`.footer` 为需要适配的元素，可以替换为实际需要适配的元素的选择器。在 iPhone X、XS、11 Pro 上，设备宽度为 375px，设备像素比为 3，因此需要匹配 `max-device-width: 812px` 和 `-webkit-device-pixel-ratio: 3`；在 iPhone XR、11 上，设备宽度为 414px，设备像素比为 2，因此需要匹配 `max-device-width: 896px` 和 `-webkit-device-pixel-ratio: 2`；在 iPhone XS Max、XR、11 Pro Max 上，设备宽度为 414px，设备像素比为 3，因此需要匹配 `max-device-width: 896px` 和 `-webkit-device-pixel-ratio: 3`。适配时，只需要在对应的媒体查询中添加需要适配的样式即可。