微信小程序嵌入h5页面加载空白

原创已于 2023-07-19 09:35:30 修改

· 2.3k 阅读

2 ·

版权

文章标签：

#微信小程序 #小程序

于 2023-07-19 09:33:44 首次发布

项目背景:我做的这个项目是用uniapp写的h5页面,然后嵌入到微信小程序中,微信小程序中开个入口,跳转到我们的h5页面.但是有时候会出现一个问题,就是有的手机加载的时候页面突然空白.(当时我和很多同事的手机都是正常进入,但是甲方的老师有的手机进入空白,之前他们也打开过,但是后来就打不开了)

解决方案:第一:清除微信缓存我的--设置--通用--存储空间--清除缓存(注意:缓存要全部清理掉,不能光清微信小程序的)

第二:在小程序跳转到项目的链接上加一个随机数或者时间戳,这样就可以让微信小程序每次都是请求新的链接,不会去访问之前的缓存(亲测有效)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

那年的夏天很热

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序分享H5页面会出现当前页面不存在的解决方案

时光叫我别恋他01

07-05

1万+

1、问题原因:出现页面不存在是因为在onShareAppMessage方法里面直接把webViewUrl(获取的h5的路径)直接放在了path里面; onShareAppMessage里面的path只能放当前项目里面的页面路径，例如pages/index/index。2、解决方法:把当前h5的路径拼接到当前页面的路径中，当传参一样传过去，例如：encodeURIComponent(res.w...

微信小程序嵌套H5页面，调用微信小程序扫码功能，并将结果传回H5页面

Justin_bieber111的博客

07-10

8081

实现方式: 小程序嵌套h5页面，点击h5页面的扫码按钮跳转到小程序的扫码页面，进入之后会立即扫码，拿到扫码结果后，跳转到小程序定义好的webview页面，再由webview页面进入h5页面。缺点：为了唤起扫码，会进入一个空白的扫码页面。

参与评论您还未登录，请先登录后发表或查看评论

小程序 web-view 如何给外链接的 h5 页面传递参数和值

热门推荐

Gochan_Tao的博客

05-16

2万+

小程序 web-view 如何给外链接的 h5 页面传递参数和值最近做项目的时候发现这种方法还是比较方便的。类似小程序页面之间的传值形式，举个例子： <web-view src="{{url}}?id={{id}}&token={{token}}&member={{member}}&paused={{paused}}" ></web-view>...

小程序webview内嵌h5链接第二次打开空白

艾路菲尔博客

08-20

1535

有个广告需要通过小程序内嵌H5打开报名然后调取小程序支付，再支付成功后跳转回H5的支付成功页面。然后问题来了，在支付成功后跳转支付成功的H5页面直接空白？？？尝试了一下把支付成功后跳转的地址换成入口H5地址又可以了，换回来又跳不了，直接打开链接又是可以访问的，看微信的说明，webview带的参数要encodeURIComponent一下，于是加上： let id = encodeURIComponent(app.globalData.authorizationInfo.openId) .

uniapp H5 微信小程序嵌套H5网页出现白屏问题

love_weiai的博客

03-17

594

3：修改每次打包的js文件，让每次打包后js名称不一样（主要目的让浏览器不读取缓存的js，每次从服务器重新获取新的js文件进行加载显示；vue项目实现原理一样，可以参考以下文章：）1：在微信：我的-设置-通用-存储空间-缓存；点击清理就可以了（如果面向大客户群，此方式不合适）2：在webView嵌套，url后面拼接时间戳，保证每次url都不一样就可以解决（亲测有效）在最外层创建vue.config.js文件，将以下代码复制其中，重新打包。

微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题

qq_35430000的博客

11-02

1万+

一、缓存带来的问题和原因我们在发布新版本的时候，在打开微信小程序嵌套的h5页面和微信公众号h5页面的时候，常常会发现页面还是上个版本的旧页面或者打开直接空白白屏了，那么为什么会存在这个问题呢？原因是微信浏览器为了提高性能，自带缓存功能，缓存了html文件，比如页面 https://www.xxx.com/abc.html,虽然这个页面内部内容都全部替换了，但是页面路径还是同一个，还是https://www.xxx.com/abc.html，缓存就会生效，还是会请求...

跨平台应用开发进阶(五十)uni-app ios web-view嵌套H5项目白屏问题分析及解决

IT全栈华强工作室

12-21

9799

应用uni-app框架开发好APP上架使用过程中，发现应用经过长时间由后台切换至前台时，通过webview方式嵌套的H5页面发生白屏现象。在前端减少内存使用，最重要的就是图片渲染，尤其是大图片。在页面上不要渲染多张大图，比如从摄像头或相册选择多张图，并缩放尺寸渲染在页面上，虽然肉眼看起来手机屏幕上是几张小图，但实际上是多张大图只是被缩小，这种情况非常耗费内存。一张图片3m，9张这样的大图同时渲染到屏幕上，什么手机都受不了。一个缩略图控制在几k或十几k，才是合理的。详情页面展现多张大图并不受影响。

微信小程序全部内嵌H5遇到的问题记录

c1o2c3o4的博客

12-29

3681

微信小程序内嵌H5

uniapp打包h5项目后网页打开空白

m0_73146522的博客

01-09

2785

5.在刚刚打开的h5文件夹下cmd进入终端。1.在manifest文件下配置路径。3.打开打包后生成的h5文件夹。6.点击下面出现的网址即可。

小程序跳转H5页面，修复线上环境无法打开问题

用户什么都没有写。

12-05

3504

有时候会遇到小程序跳转到H5页面的需求，下面是利用web-view实现简单的小程序跳转到H5页面首先需要单独创建一个文件来使用web-view，解决线上环境无法打开H5问题

微信小程序web-view嵌入h5页面，分享当前页

mubenxinsheng的博客

08-04

2797

微信小程序使用web-view 嵌入h5 分享当前页

微信小程序（内嵌网页分享功能）

05-21

当在`<web-view>`中加载的网页需要调用微信小程序的分享功能时，我们需要利用微信小程序的JSAPI。JSAPI是一组提供给开发者调用微信功能的JavaScript接口，其中包括了分享功能。具体来说，可以使用`wx.miniProgram....

微信小程序性能优化方案

前端彭于晏的博客

12-17

9783

微信小程序性能优化方案提高加载性能 小程序代码包准备（下载代码包）开发者代码注入页面渲染优化提升渲染性能 setData工作原理优化方法

记录微信小程序 跳转页面使用 web-view 加载一直空白问题

wtianp的博客

01-02

2709

从微信小程序跳转时，web-view 一直处在加载中1.查看web-view src是否正确；（正确的）2.查看小程序业务域名是否配置跳转页面域名；（已配置）3.开发者工具能正常跳转，电脑端微信小程序正常打开，手机端微信小程序不能正常跳转，4.电脑端网页能正常打开但使用https 时会提示不安全；（关键问题）5.手机浏览器打开相应链接会先提示不安全选择继续可正常访问；（问题确定）服务端配置相应域名的SSL证书，成功解决问题

app嵌入H5页面加载空白的问题

fengbin2005的专栏

11-13

556

/- 这里的单位为秒，10代表第一次请求10s后过期。//HTTP1.0通过Pragma控制浏览器缓存。//当前页面过期时间，立刻过期。* 移动端首页基本上不缓存,用于解决ios端网页缓存的问题。因为前端发布后,原来的js以及css链接不可访问导致.因为缓存了首页导致的问题。

webview嵌套HTML5界面白屏问题

绝凌峰

01-07

5923

问题介绍：在Android开发中，经常会遇到开发原生和H5嵌套的APP，而在android中加载H5界面时通常使用webview控件进行嵌套，而此时就会出现一些很神奇的事情——界面白屏。如果遇到这种情况，那就只能退出程序，干掉进程，然后重新进入app，重新加载界面，目前还没有找到其他的解决方法。经过多方面的研究，请教大神，总结了以下几点来减小这种白屏情况出现的概率。解决方案： 1.A...

微信小程序怎么跳转H5页面

cindy647的博客

11-27

1万+

微信小程序怎么跳转H5页面在微信小程序内要跳转至外部的H5页面，做法比较简单。可以看到微信官方文档中，微信小程序提供了承载网页的容器： web-view，通过这个容器，其实可以实现在小程序内打开一个H5页面。也就是可以在小程序中设置一个空白页面，专门用于打开此类外部H5页面。具体做法如下： 1、在小程序内新建一个空白页面，内置web-view容器，用于承载网页 index.wxml 文件： <view class="page-body"> <web-view src="{{tar

小程序嵌套H5

qq_43641110的博客

12-25

1万+

web-view页面的标题取决于H5嵌入页面的title标题，该组件不支持自定义组件导航栏可以通过修改title标题修改导航栏标题document.title = '通讯录'},注意：在微信开发者工具上可能会出现仅在第一次进入h5生效，进入h5后再改title的话并不能修改成功，由于微信开发者工具上不稳定，在上传后真机是可以的。

小程序打开空白的问题处理

weixin_45734165的博客

11-25

1096

二、完成第一步后，再检查小程序的请求域名是否正确，这里的域名一定要https的, 如果工具打开是正常,手机打开不正常，那就是这个域名的问题。一、如果是下载的小程序代码，检查一下平台后台的商城域名是否带s，如果不是带s的修改为带s的，然后重新下载小程序代码。一、检查服务器域名配置了 https没有，如果没有，解决办法是申请个ssl证书。二、如果是手动打包的小程序，检查域名配置是否正确，修改成你自己的域名。三、如果是2.2.1版本以后，请确认前端代码是否版本一致。最后重新发布一次即可。

微信小程序开发白屏

最新发布

03-25

### 微信小程序开发中白屏问题的原因分析与解决方案 #### 原因分析 微信小程序在实际开发过程中可能会因为多种因素导致页面白屏现象的发生。以下是可能引起该问题的主要原因： 1. **资源加载异常** 小程序启动时，如果某些静态资源（如图片、样式文件等）未能成功加载，则可能导致页面无法正常渲染而呈现空白状态[^5]。 2. **网络请求超时或失败** 如果小程序依赖外部接口数据来初始化界面，在网络状况不佳或者服务器响应缓慢的情况下，也可能引发白屏情况[^2]。 3. **代码逻辑错误** 存在于生命周期函数中的语法错误或其他运行时异常都可能是造成白屏的因素之一。例如 `onLoad` 或者其他事件处理方法内的未捕获异常会中断整个页面的执行流程[^1]。 4. **框架兼容性问题** 使用第三方库或插件时如果没有充分考虑不同版本间的差异性和适配程度，也容易触发类似的显示故障[^4]。 5. **WebView组件特殊行为** 对于涉及H5页面嵌入的小程序而言，首次打开 WebView 组件时常会出现短暂性的白屏等待期，这是因为内部机制尚未完成必要的准备工作所致。 #### 解决方案针对上述提到的各种潜在诱因，可以采取如下措施加以预防和修复： 1. **优化资源配置** - 确保所有必需的媒体素材均已上传至云端存储并设置合理的缓存策略； - 利用CDN加速分发热点内容降低延迟感知度； - 启用 Gzip 数据压缩减少传输体积提升加载效率。 2. **增强容错能力** - 添加全局错误监听器用于捕捉未知崩溃情形以便及时反馈给运维团队定位根因； - 针对重要 API 调用设定重试次数上限以及备用降级预案以应对突发状况下的服务不可达风险。 3. **改进编码实践** - 定期审查现有源码查找隐藏缺陷并通过单元测试验证修改后的稳定性表现； - 推荐采用模块化设计理念拆解复杂业务逻辑从而简化维护难度同时提高可读性。 4. **升级基础架构** - 密切关注官方文档更新动态了解最新特性支持范围进而调整项目构建方式保持同步迭代节奏； - 测试阶段务必覆盖主流机型组合模拟真实用户操作习惯暴露隐蔽漏洞提前修补。 5. **专项处理 WebView 场景** - 设计自定义占位符图形作为过渡效果掩盖初始加载过程直至目标站点完全展现为止； - 结合预取技术和懒加载模式平衡性能开销与用户体验之间的关系达到最佳均衡点。 ```javascript // 示例：增加全局错误捕获功能 App({ onError(msg) { console.log('Error occurred:', msg); wx.showToast({ title: '发生错误', icon: 'none' }); } }); ```