奇思乎乎乎 iPhone 16e · 17 系列 · Air - 一束网址,折射万屏
100%

输入网址,立刻开始预览

预设:
自定义:

微信小程序 web-view H5 兼容

把 H5 页面通过 `` 嵌入微信小程序时,H5 运行在受限的沙箱环境中,很多在微信原生浏览器里能用的功能会失效。

三大核心差异:

  • JSSDK 限制:H5 里不能直接引入 `wx.chooseImage` 等 JSSDK,需要通过 `wx.miniProgram.postMessage` 把数据发给小程序去调起原生能力。
  • 导航栏冲突:小程序自带顶部导航栏。如果你在 H5 里也画了一个顶部导航栏,视觉上会出现“双 Header”。
  • 路由与返回:点击小程序左上角的“返回”,默认是退出 web-view,而不是 H5 内的 `history.back()`。

你需要用 User-Agent(包含 `miniProgram`)区分当前是否在小程序内,从而隐藏 H5 的 Header,并做特定的鉴权逻辑。

常见问题

怎么判断网页是不是在微信小程序里?
判断 window.__wxjs_environment === "miniprogram",或者 User-Agent 中是否包含 "miniProgram"。
web-view 里页面高度是多少?
web-view 会占满整个小程序页面(不包含小程序的胶囊按钮和底部 TabBar)。100vh 一般是准确的,但要注意自定义导航栏的情况。

相关工具