关于微信小程序web-view组件的坑

于 2021-10-13 11:35:44 发布 269 收藏
分类专栏： 工作问题 文章标签： 小程序 微信 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43713680/article/details/120740576
版权

微信小程序web-view的url，url内有另一个url作为参数，避免取参数时不能取到完整的url，于是url参数用encodeUrlComponent()进行了编码
但是在小程序中用没有获取到编码后的url，而是拿到了未编码的不完整url，
将web-view的url拿出来在浏览器中执行，可以拿到编码后的url。
可见web-view组件的是会自动将编码后的url内容给解码的。
以此文章记录
解决方案：由于后端本身是想使用url上的参数，于是将url上的参数取出，全部拼接到自身url后，并将当前的url传给后端，得到相同的功能

你海哥哥
关注
专栏目录
微信小程序项目总结，已经遇到的坑分析
lxf的博客
11-03 726
一、前言 历时一个月零5天，小程序项目终于是测试发布上线，项目总体是在原小程序项目基础上增加电子发票上传功能，新增了三种上传方式，分别是本地上传，会话列表上传和卡包上传，下面会逐个列举项目中遇到的问题及方法。项目总体来说不难，只是新增三种发票上传功能，然而却前前后后做了一个月，期间状态也值得好好分析下。 二、项目进展 项目从9月26号开始的~ 1.会话列表导入 因为微信提供了wx.chooseMessageFile接口在图片文档附近，提供会话列表导入数据，所有做的很顺利，整个功能在3天左右就做好了
微信小程序 web-view 开发采坑大全
huangpb的博客
01-26 6700
前言 原来小程序里的webView又这么多注意点。今日早读文章由腾讯imweb@结一投稿分享。 正文从这开始～～ 对于开发者来说，如果 H5 页面能够直接嵌入到小程序那是再好不过了，而 web-view 组件正好就提供了这么个功能（个人类型与海外类型的小程序暂不支持使用）。简单来说它是一个可以用来承载网页的容器，会自动铺满整个小程序页面。 虽然这带来了很大的便利，但是也还是有很多需要注意的地...
微信小程序web-view能发送ajax,微信小程序web-view组件的坑
weixin_29210759的博客
08-05 112
最近在做一个活动时候，需要将H5页面嵌入别人家的小程序中，正常微信环境中我们会通过在分享链接拼接参数的方式，来获取微信用户的分享关系，然而在小程序中分享的地址是小程序自己的path，其他用户点击的时候会直接进入小程序的这个path，所以H5就不能直接获取到用户的分享关系了。那么怎么实现呢？思路是挺简单的：H5将需要拼接在分享链接上的参数，通过wx.miniProgram.postMessage发送...
小程序开发之组件web-view（浏览器）
M.Siebel
01-17 1224
web-view web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。 注： navigationStyle: custom 对 组件无效 非正式域名链接需要登录小程序管理后台配置业务域名。 网页内 iframe 的域名也需要配置到域名白名单。 开发者工具上，可以在 组件上通过右键 - 调试，打开 组件的调试。 每个页面只...
微信小程序web-view源码（内嵌网页分享功能）.zip
08-29
微信小程序web-view源码（含内嵌网页分享功能）亲自测试ok，将app.js下域名换成自己的域名即可
ios端微信小程序，web-view页面白屏，安卓正常显示
热门推荐
唯一的切慕，唯一的诗歌……
05-16 1万+
今天小程序上线，ios端小程序有的页面白屏，后来查到的问题是web-view的src中携带的参数中含有中文，ios端是不允许链接中有中文的，所以只能给中文转码了，h5页面提取参数的时候再解码一下就可以了 介绍一下javascript中，转码和解码的两种方法 1 中文转码 encodeURI(url) 2 解码 decodeURI(url)...
微信小程序嵌入 H5 页面（web-view）
weixin_43299180的博客
05-13 6498
在开发微信小程序的时候，我们有时候会遇到将 H5 页面嵌入到小程序页面中的情况；微信小程序自带的 web-view 组件相当于 HTML 页面中的 iframe ，方便我们在微信小程序中打开一个 H5 页面； 官网描述： 承载网页的容器；会自动铺满整个小程序页面，个人类型的小程序暂不支持使用；所以使用这个组件，必须是在企业号小程序里面； 使用： 1、配置业务域名 在微信小程序后台，开发-开发管理-开发设置-业务域名 这里添加需要嵌入到小程序里面 H5 页面的合法域名（最多200个）； 2、使用组件 每个页面
uniapp开发微信小程序，使用web-view预览PDF文件安卓真机测试加载不到
weixin_44479794的博客
03-28 3940
先说功能需求，点击A页面的书本，跳转到B页面预览相应的PDF格式文件内容 最初的写法是直接在A页面写方法做跳转并传链接参数，B页面接收，并使用web-view做预览，此方法只能在ios正常预览，Android不显示。 A页面 B页面 通过百度查询知道uniapp开发微信小程序时使用web-view跳转pdf文件链接时，Android是不生效的，ios可以正常跳转 解决方法： 在A页面的跳转方法中写一个判断方法，判断手机为Android或者IOS，若为Android，则在A页面
小程序web-view打开PDF格式文件的安卓苹果兼容性问题
游人
01-10 2500
小程序中打开pdf格式原本可以使用web-view（承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用） <web-view src="{{link}}"></web-view> src里放链接就能够正常实现 但是src里面放pdf的链接涉及到了兼容性问题（苹果手机可以正常打开pdf格式文件，安卓打开为空白） 所以如果src里面放pdf格式就会...
Android小程序白屏,微信小程序web-view跳转h5 安卓白屏
weixin_39845825的博客
05-27 397
在小程序使用 跳转到h5时 安卓白屏 ios正常 跳转的过程非常慢跳转去web-view.js代码gotoWebview(toUrl) {wx.navigateTo({url: '/pages/webview/webview',success: function (res) {res.eventChannel.emit('from', { url: toUrl })}})},web-view.js...
关于微信小程序web-view遇到的一个坑
Not_affect的博客
09-07 140
记录使用web-view中遇到的一个问题 使用web-view进行跳转页面时,发现路径传过去后打开异常的情况, 这种情况一般是没有对其url进行编码解码导致; //跳转路径 let url = '/pages/web-view/index?url=' + encodeURIComponent(res.data);//对地址进行编码 wx.navigateTo({ url: url, }) //web-viwe onLoad: function
微信小程序中web-view的那些坑
chj927232的博客
02-01 2023
最近在研究微信小程序，在使用web-view的时候遇到了一些坑，记录一下。 1.打开的页面必须在微信小程序网站上的开发设置中配置进去，否则是无法打开该网页的 2.所有的H5 URL必须是https 3. H5的URL不能包含“？key=value”，也就是不能通过key=value进行传...
小程序web-view组件
wwf1225的博客
08-10 1830
https://www.cnblogs.com/-nothing-/p/7910355.html 小程序web-view组件 不久前微信小程序发布了web-view组件，这个消息在各个圈里引起不小的涟漪。近期正好在做小程序的项目，便研究了一下这个让大家充满期待的组件。 1，web-view这个组件是什么鬼？ 官网的介绍：web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。简单来说，这个组件是一个和当前页面一样大小的容器，容器里显示的是属性src引用的url...
微信小程序web-view遇坑，空白页面
weixin_44622464的博客
06-10 2925
使用微信小程序 web-view 标签一直空白页面 错误：一直刷新还是一直空白，查了下跳转别的页面使用web-view 还是不行 解决：重启微信开发者工具/真机调试试试
微信小程序-web-view组件
weixin_45527865的博客
09-24 1386
微信小程序-web-view组件1.web-view组件的使用？2.cover-view组件的使用？3.实现需求（在web-view组件上面添加按钮，实现分享、拨打电话功能） 1.web-view组件的使用？ 每个页面只能有一个web-view组件，web-view组件会铺满整个屏幕，并且覆盖其他组件； web-view，个人类小程序暂不支持； 2.cover-view组件的使用？ 覆盖在原生组件之上的文本视图。 可覆盖的原生组件包括 map、video、canvas、camera、live-play
uniapp与webview之间的相互传值
seimeii的博客
04-24 585
1.uniapp发送数据到H5端 其实很接单、在 web-view 中只需要通过 URL 就可以向 H5 进行传参 例如在 uni-app 中： 1.uniapp端 其实很接单、在 web-view 中只需要通过 URL 就可以向 H5 进行传参 例如在 uni-app 中： <template> <view class="advertisement" style=" 100%;"> <web-view :src="url" @message="message"&
微信小程序踩坑记录 ------- 解决 web-view 刷新Html页面问题
张鑫的博客
05-19 4262
最近搞了个520活动，总得来说流程不是很复杂但还是踩到了坑，特此记录一下，帮助自己记忆也方便给有同样问题的小伙伴一个参考。 这次做的活动是将H5页面嵌套在小程序的web-view组件中，H5活动页面中涉及到一个领取优惠券的操作，但是有一个必须是手机号登录用户才可以领取的限制条件，所以流程是这样的： 1、小程序给H5传参，H5根据接口判断用户是否登录 2、如果用户没有登录H5页面通过微信 JSSDK 1.3.2 的 wx.miniProgram.navigateTo 方法跳转到小程序的手机号注册页面 3、.
微信小程序 webview 返回按钮阻止返回
github_38186390的博客
05-14 3096
一。需求：微信小程序在使用webview 时，导航栏是不允许自己修改的。对于左上角的返回按钮，如果相要在返回的时候，弹框确定后再返回，微信小程序是没有api支持。在微信小程序的思路上基本无解。 二。解决办法：用于我们的webview 就是直接使用的微信浏览器。我们是可以使用js 相关的 History API. 主要是通过 设置 history.pushState 这个方法来阻止的。 history.pushState API说明：总共是三个参数，前面两个不用管直接用null 即可，第三个代码跳转页面的
清除小程序webview
alonia的博客
07-31 2179
<web-view src="{{fomalUrl}}></web-view> 由于webview跳到h5界面是单页面应用 1.所以按网上说的给界面加时间戳并没有什么用。。。。。 2 h5用 webpack打包后的css js 本来就是加了hash 的，，所以也没用 后面的解决方法时清除html 缓存 <META HTTP-EQUIV="pragma" C...
web-view不支持打开非业务域名请重新配置
weixin_48557454的博客
01-14 7503
【微信小程序】web-view不支持打开非业务域名请重新配置 解决:
小程序webview引入H5安卓坑
最新发布
weixin_44021910的博客
06-15 227
h5小程序的坑

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题：大白 设计师：CSDN官方博客 返回首页
评论

打赏作者

你海哥哥

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值