微信小程序web-view使用说明,及链接打不开问题

         开发微信小程序时,有时会需要在小程序内打开网页链接,这时就需要用到 web-view 标签。web-view 是小程序上用来承载网页的容器,且每个页面只能有一个 web-view,它会自动铺满整个页面,并覆盖其他组件。目前个人类型的小程序上不支持使用。

        在小程序上打开的网页链接地址大致可以分为两种类型:

  • 外部网页链接,如百度、知乎等网页地址
  • 微信公众号文章链接

一、外部网页链接

        web-view 跳转外部网页链接需要配置业务域名,外部网页内 iframe 的域名也需要配置。配置小程序业务域名的方法可以参考业务域名 | 微信开放文档,配置好业务域名后,可以打开任意合法的子域名。大致配置流程如下:

1、扫码登录微信公众平台

 2、开发管理 —— 开发设置 —— 业务域名  进行添加、修改;

 

 

 3、配置完业务域名后,还需要下载校验文件(步骤2中第四张图的红色框部分),并将校验文件放置在域名根目录下(让后端去操作)。这一步相当于是让对方授权你能打开他的网页,比如要在你的小程序中打开百度,就需要百度去把这个校验文件放到他的域名根目录下得到他的授权;

4、设置业务域名时,报检查校验怎见石板,可以参考业务域名设置--校验文件检查失败自查指引 | 微信开放社区进行自查。

 二、微信公众号文章链接

        web-view 可以直接打开小程序已关联的公众号文章,无法打开未关联公众号的文章链接。在公众号上申请关联小程序,具体操作详见公众号关联小程序绑定流程 | 微信开放社区

        公众号上关联小程序成功后,可以在小程序后台查看已关联的公众号:

1、扫码登录微信公众平台(同上);

2、在左侧最底下的  设置 —— 关联设置 ——关联公众号  查看。

三、链接打不开问题

        使用 web-view 时,有时会出现无法打开链接的情况:

        这里总结之前碰到过的情况及大致的解决方法:

1、打不开某个外部网页链接:

  • 检查是否配置了小程序的业务域名,注意外部网页内再次 iframe 内嵌的其他域名也需要配置
  • 检查是否为 https 协议,不支持http协议,不支持 IP 地址

2、打不开公众号文章:检查小程序是否已关联该公众号

3、外部网页链接、公众号文章链接在开发工具、体验版上可以打开,正式版上不行:

  • 检查开发工具上是否开启了 “ 不校验合法域名、web-view业务域名、TLS版本以及HTTPS证书 ” 选项,开发工具上开启这个选项,不用配置业务域名或关联小程序也能打开链接,在开发工具上将该选项关掉,也就打不开了,该选项位置如下图;体验版上能打开是因为打开了 “ 开发调试 ”,关闭开发调试后,同样也是打不开。

  • 如果上面几点都没问题,那很有可能是链接地址有问题,可以检查是否含有中文字符、地址前后是否存在空格等,存在中文字符可以用 encodeURI 或 encodeURIComponent 函数编码后再打开,存在空格比较不容易发现,可以用trim( ) 去除地址中前后的空格。
  • 5
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值