微信小程序使用web-view,内嵌跳转h5踩坑记!!

这篇具有很好参考价值的文章主要介绍了微信小程序使用web-view,内嵌跳转h5踩坑记!!。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题场景

由于业务需要在微信小程序内,嵌入外网h5到小程序,项目整体在开发,调试完成都没有任何问题,但是,在部署到测试环境之后,跳转h5报如下错误:

微信小程序使用web-view,内嵌跳转h5踩坑记!!

 

通过查阅官方文档,以及各类技术文档,报错的原因是,没有在微信公众平台配置业务域名和合法域名;具体操作步骤【开发者登录小程序后台mp.weixin.qq.com,选择开发管理->开发设置】

微信小程序使用web-view,内嵌跳转h5踩坑记!!

 想了解更多,可以参阅下面的文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/domain.htmlhttps://developers.weixin.qq.com/miniprogram/dev/framework/ability/domain.html

到这里可能大多数人会有这样一个疑问,为什么开发环境是没有问题的,在测试环境就会出现上面这个错误,原因是我们微信开发者工具勾选了如下配置(方便我们开发)如图:

微信小程序使用web-view,内嵌跳转h5踩坑记!!

 接下来我们开始配置,request合法域名和业务域名:

注意:微信官方明确规定,目前小程序内嵌网页能力暂不开放给个人类型帐号和小游戏帐号。所以配置域名操作必须是企业账号或者企业微信并且是以管理员的身份才行。

 重点问题来了

当配置完合法域名(也就是你h5页面的地址的域名https://xxx.xx.xx),在进行配置业务域名的时候,点击保存之后总会报一下错误:

微信小程序使用web-view,内嵌跳转h5踩坑记!!

 根据文档提示的意思是需要在网站域名根目录下添加校验文件,于是乎就将官方提供的校验文件部署到了域名根目录下(例如,我们自己测试环境是www.aaa.bb.com,我们将官方校验文件部署在了该域名根目录下),并且能够在浏览器以(https://www.aaa.bb.com/校验文件名.txt)能够访问到(说明添加成功了),如图:

微信小程序使用web-view,内嵌跳转h5踩坑记!!

 但是我们再次点击保存的时候还是报同样的警告,这里需要注意,这个时候我们已经排除了官方提供会出现该问题的所有可能。

重点来了

当时已经穷途末路了,并且微信开发社区遇到类似的问题很多,而且没有具体的解决办法,一致认为是官方未回应这个问题。最后,我们反着想会不会是在跳转的h5链接的域名根目录下添加该校验文件,结果这一试,还真是。

后面想了想官方要求这么做的目的应该就是为了小程序的安全性,在业务域名下添加唯一标识,跳转的时候进行校验。

总结

这个问题卡了我很久,官方文档的意思其实就是需要在你配置的业务域名下根目录下添加校验文件,这样小程序就判定为是安全和经过授权的域名。希望能够帮到遇到同样问题的小伙伴,有异议及时评论。文章来源地址https://www.toymoban.com/news/detail-482829.html

到了这里,关于微信小程序使用web-view,内嵌跳转h5踩坑记!!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用web-view在微信小程序中显示网页

    比如要在小程序中显示《用户协议》《隐私政策》等网页内容,可以直接用web-view显示 如下代码所示 打开的页面标题显示的是网页的标题,也就是title标题/title标签中的内容 最后,记得在小程序后台开发管理中添加业务域名,把要访问的网址添加到业务域名中,否则小程序发

    2024年02月15日
    浏览(70)
  • 微信小程序-web-View使用以及跟小程序的通信传值

    简单来说 就是小程序嵌套H5页面 web-view 官网地址 不需要在这个页面做修饰,H5页面会自动铺满 bindmessage属性用来绑定从H5传值过的函数; 注意:传给H5的数据只能拼接在url后面 代码如下(示例): 接收 h5 页面传递过来的参数 代码如下(示例): 向小程序发送消息,会在特定

    2024年02月11日
    浏览(65)
  • 微信小程序web-view使用说明,及链接打不开问题

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

    2024年02月09日
    浏览(90)
  • 微信小程序web-view跳转

    h5项目中跳转外部连接可使用的web-view标签解决 官网连接:web-view | 微信开放文档 1.添加事件 2.新页面中的跳转链接(一行即可,默认会会自动铺满整个小程序页面) src就是路径,写需要跳转的网页地址即可! 3.配置路由,app.jason中 4.小程序后台配置域名 开发管理=开发设置=业务域名中

    2024年02月11日
    浏览(68)
  • 微信小程序使用web-view跳转网页解决跳转出现空白或者被拦截问题

    首先,在小程序的页面布局文件中添加web-view组件的引用 给大家先画个草图大家就明白了 具体操作可以私信我,我手把手教你解决

    2024年04月23日
    浏览(63)
  • 微信小程序组件、web-view、h5之间交互

    目录结构 小程序 /pages/index/index.wxml /pages/index/index.js /pages/index/index.json 组件 /component/index-page/index.wxml /component/index-page/index.js /component/index-page/index.json web-view /pages/web/web.wxml /pages/web/web.js h5

    2023年04月16日
    浏览(75)
  • uniapp微信小程序嵌入页面web-view配置

    uniapp开发微信小程序的时候, 有时候需要嵌入H5页面 可以使用小程序自带的  web-view  组件相当于 HTML页面中的 iframe  1.配置业务域名 开发管理 ---开发设置 ---业务域名   然后去配置你的业务域名就可以了   2.页面中使用 web-view 使用起来还是很方便的 uniapp提供属性可以具体

    2024年02月11日
    浏览(69)
  • 微信小程序在web-view页面增加一个按钮

    需求: 在微信小程序中通过web-view打开H5页面,需要小程序端在页面中增加一个可以请求接口的按钮 实现方法 通过在web-view中嵌套cover-view标签来实现( 注意: cover-view只支持嵌套 cover-view、cover-image,可在 cover-view 中使用 button,但是本人在里面使用button标签时,对button添加样式无效

    2024年02月07日
    浏览(75)
  • 微信小程序实现支付宝支付——web-view实现

    由于使用到的微信小程序需要实现支付功能,而微信支付的申请手续较为繁琐,所以使用了支付宝支付,但是微信小程序正常情况不支持支付宝支付,所以我使用了web-view内嵌了支付宝的h5支付。 不会使用支付宝沙箱支付的同学可以看这篇文章Springboot支付宝沙箱支付 代码如下

    2024年02月11日
    浏览(59)
  • 微信小程序跳转公众号文章 web-view方式

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 提示:这里可以添加本文要记录的大概内容: 小程序和公众号都必须时企业认证的 1.在小程序里面关联相关的公众号 2.在公众号里面关联相关的小程序 提示:以下是本篇文章正文内容,下面案例可供参

    2024年02月09日
    浏览(85)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包