web-view

更新时间：2025-08-12 16:56:40

注意⚠️

IDE 模拟器渲染层基于 Electron 的 webview 标签，而小程序的 web-view 组件基于 iframe。受浏览器安全策略（如 SameSite）影响，跨站或 iframe 场景下 Cookie 默认可能不会被携带。

为避免在 iframe 场景下跳转子页面或发起请求时出现 Cookie 丢失的问题，IDE 会对 iframe 相关的请求进行拦截，在可控场景中为 Cookie 自动附加 SameSite=None; Secure，也就意味着网站必须使用https协议。

当页面通过 JavaScript 写入 Cookie（document.cookie）时，IDE无法拦截。若存在子页面之间共享 Cookie 的需求，请在代码中显式设置 SameSite=None; Secure，并正确配置 domain/path 等属性，同样网站必须使用https协议。示例：

document.cookie = "username=JohnDoe; max-age=3600; domain=.example.com; path=/; secure; samesite=None";

以上为开发期在 IDE 模拟器中的兼容策略。真机环境（真机调试、预览版、体验版、正式版）以系统浏览器/WebView 的实际策略为准。

web-view

承载网页的容器

属性	类型	默认值	说明
src	string	none	webview 指向网页的链接
bindmessage	eventhandler	false	网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组
bindload	eventhandler	50	网页加载成功时候触发此事件。e.detail = { src }
binderror	eventhandler	400	网页加载失败的时候触发此事件。e.detail = { src }

web-view网页中可使用JSSDK 3.9.3或以上版本提供的接口返回小程序页面。

支持的接口有：

接口名	说明	版本
xhs.miniProgram.navigateTo	参数与小程序接口一致
xhs.miniProgram.navigateBack	参数与小程序接口一致
xhs.miniProgram.switchTab	参数与小程序接口一致
xhs.miniProgram.reLaunch	参数与小程序接口一致
xhs.miniProgram.redirectTo	参数与小程序接口一致
xhs.miniProgram.postMessage	向小程序发送消息，会在以下特定时机触发组件的message事件：小程序后退、组件销毁、分享、复制链接; 传递参数时需要以postMessage(params: { data: any }) 的形式传输，将可被JSON序列化的业务数据放到data字段上进行传输	3.9.3
xhs.miniProgram.getLocation	参数与小程序接口一致	3.3.3
xhs.miniProgram.makePhoneCall	参数与小程序接口一致	3.4.2
xhs.miniProgram.setClipboardData	参数与小程序接口一致	3.4.2
xhs.miniProgram.getNetworkType	参数与小程序接口一致	3.4.2
xhs.miniProgram.chooseImage	参数与小程序接口一致	3.4.2
xhs.miniProgram.previewImage	参数与小程序接口一致	3.4.2
xhs.miniProgram.openShare	参数与小程序接口一致	3.4.2
xhs.miniProgram.login	参数与小程序接口一致	3.4.2

域名白名单

web-view 打开的站点，需要设置域名白名单

如何判断当前宿主是小红书APP？

业务H5通过

userAgent

判断当前是否为小红书环境。

复制代码

// <script type="text/javascript" src="https://fe-static.xhscdn.com/xhs-mp/open/js/xiaohongshu-3.9.3.js"></script>
if(navigator.userAgent.includes('xhsminiapp')){
   // current is xhs mini
   xhs.miniProgram.postMessage({ data: 'foo' })
   xhs.miniProgram.postMessage({ data: {foo: 'bar'} })
}

小程序开放平台

文档中心

web-view

注意⚠️

web-view

域名白名单

如何判断当前宿主是小红书APP？

扫码预览