更新时间:2024-03-15 17:07:08贡献者 5收藏订阅更新我的文档设置返回文档简介可通过 web-view 组件在小程序中嵌入 h5 页面。小程序不直接支持外跳 h5,web-view 部分地满足跳转 h5 的需求。关于小程序跳转的内容可查看 小程序内嵌&外跳能力导航。web-view 可以打开的 h5 页面的域名限于开发者维护的 h5 域名白名单(开放平台控制台 > 小程序详情页 > 开发设置 > h5 域名配置),仅支持添加开发者可控制的域名。若 web-view 提示访问受限,可参考 页面访问受限凯发app官方网站的解决方案。开发过程中遇到问题可查看 web-view 常见问题。使用限制●支付宝客户端 10.1.35 或更高版本可用。●native 渲染引擎:基础库 2.7.17 ,客户端 10.5.70 开始支持。可以通过 my.caniuse('web-view') 判断是否支持。●不支持个人小程序使用,仅支持企业小程序。●不支持在插件内使用。●每个页面只能有一个 web-view,会自动铺满整个页面并覆盖其它组件。●不支持多个页面 web-view 间通讯。不支持横屏以及全屏展示。●调试请以真机效果为准。注意事项●包含中文等特殊字符的 url,请先使用 encode 编码。●主文档 url、iframe 里的主文档 url,以及后续跳转的主文档 url,其域名均需要加入 h5 域名白名单,否则无法访问。●h5 域名白名单维护方法请查看 配置 h5 域名 。不支持添加阿里(天猫、淘宝等)域名,且域名总数量不超过 20 个。●h5 域名白名单变更后需要小程序发版,新的白名单仅对新版小程序生效。扫码体验效果示例使用示例代码.axml 示例代码.js 示例代码属性说明属性类型描述srcstringweb-view 要渲染的 h5 网页 url ,默认允许打开所有 https://render.alipay.com/p/ 开头的 url(支付宝客户端 10.2.63 版本开始支持),其他网页需要在 > 对应小程序详情页 > 开发设置 > h5域名配置 进行 h5 域名白名单配置。 说明:src必须是标准的 h5 链接,任何包含例如 alipays://xx... 的链接都会导致重定向出错,从而无法展示页面,即使是 https://render.alipay.com 开头的 url 也不能包含 alipays://xx... 此类内容。onmessageeventhandle网页向小程序 postmessage 消息。e.detail = { data }onloadeventhandle网页加载成功时触发此事件。e.detail = { src }版本要求:基础库 2.7.3 及以上onerroreventhandle网页加载失败时触发此事件。e.detail = { src }版本要求:基础库 2.7.3 及以上可以通过检测 useragent 中包含 miniprogram 字样来判断小程序 web-view 环境。可用 apiweb-view 载入的 h5 页面可以使用手动引入 https://appx/web-view.min.js(此链接仅支持在支付宝客户端内访问),提供了相关的 api 供您使用(调试请以真机效果为准)。说明: 如需嵌入 h5 页面请使用表格中支持的 api,表格中如不支持请调用原生 js。接口类别接口名描述导航栏my.navigateto保留当前页面,跳转到应用内的某个指定页面。导航栏my.navigateback关闭当前页面,返回上一级或多级页面。导航栏my.switchtab跳转到指定 tabbar 页面,并关闭其他所有非 tabbar 页面。导航栏<