web-view

更新时间：2025-10-11 16:01:31

注意⚠️

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

xhs.miniProgram.openShare 传参说明

字段	说明	默认值	备注
path	转发的路径	当前页面路径
shareType	分享转发的模式	必填	详见下方说明
title	自定义标题，即聊天群组内分享内容显示的标题	当前小组件名称
query	自定义页面路径中携带的参数，如 path?a=1&b=2 的 “?” 后面部分	当前页面路径携带的参数
imageUrl	自定义图片路径，可以是本地文件或者网络图片(IOS 客户端路径中如果含中文需要encode) 。支持 PNG 及 JPG，显示图片长宽比是 1:1	默认使用小组件 Logo
content	好友分享的内容描述	默认取小组件描述
externalImageUrl	分享到小红书站外的截图字段 (用于站外 h5 落地页展示，不传默认容器截取栈顶页面)	null

shareType 字段值说明

字段	说明
normal	分享小红书站内好友
wx_friends	分享微信好友
wx_moments	分享微信朋友圈

示例代码

复制代码

xhs.miniProgram.openShare({
  shareType: 'wx_friends',
  path: 'pages/name/test',
  title: '自定义转发标题',
  query: 'a=1&b=2 ',
  imageUrl: 'http://localhost/a.png',
  content: '自定义描述',
})

域名白名单

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

xhs.miniProgram.openShare 传参说明

shareType 字段值说明

域名白名单

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

扫码预览