这是我参与8月更文挑战的第15天,活动详情查看:8月更文挑战
前言
微信小程序可以通过微信小程序组件 web-view 打开h5页面
web-view 承载h5页面注意事项
基础库 1.6.4 开始支持,低版本需做兼容处理。
-
承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。
-
客户端 6.7.2 版本开始,
navigationStyle: custom对 web-view 组件无效 -
小程序插件中不能使用
-
个人类型的小程序暂不支持嵌入h5
-
H5域名需要在小程序公众号管理平台进行配置,且必须是https
-
配置h5域名时,需要在H5域名服务器根目录放置一个微信生成的txt 鉴权文件,并且通过域名+鉴权文件名访问鉴权文件,如:www.xx.com/xx.txt
举例:在小程序中嵌入百度首页,需要在百度服务器上放置一个微信的鉴权文件,且外网可以访问 因此与其他网站合作时,需要了解该网站是否可以放我们的鉴权文件,该鉴权文件在小程序公众号服务平台下载
-
H5包含多个域名,需要全部在程序端配置,比如:H5首页域名为A,功能页域名为B,支付页域名为C,则ABC三个域名都需要在小程序端配置
-
H5包含微信支付功能时,嵌入小程序后无法正常使用,其他微信提供的H5功能是否可用,详情看附录2。
-
H5域名的配置最多可以添加20给域名,一个月可修改5次,一年可以修改50次。
-
H5可以跳转回小程序,但需要开发代码
微信小程序中的web-view 可以跟微信小程序做交互
代码如下
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })
附录:
- 1. 小程序可嵌入的H5域名补充说明:
- 2. web-view放置在微信小程序中的网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。 但是支持的接口有:
- 3.业务域名常见错误分析: