微信小程序使用web-view打开h5页面注意事项

380 阅读2分钟

这是我参与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域名补充说明: image.png
  • 2. web-view放置在微信小程序中的网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。 但是支持的接口有:

image.png

image.png

image.png

  • 3.业务域名常见错误分析: image.png

PS 官网文档

developers.weixin.qq.com/miniprogram…