记一次奇怪的白屏之旅

前情纪要

好久没写博客了,因为最近真的很忙,最近要补上几大篇,就从前几天一次诡异的白屏开始。
新年之后返工接了一个迭代的项目,几个月从V1.1迭代到了V1.4。

进入正题

先说下业务手机端,大概就是一个携带appid和业务域名等等的链接,前端在跳板页通过重定向链接拿到code值去后端换openID 其余都是正常业务,和微信无关了。唯一有关的是在微信浏览器,入口要走公众号。
从1.0版本开始 陆续有售后反映说访问手机端偶尔会白屏。一直没查出是什么原因,上线的那个晚上,甚是难熬,后端几乎没什么问题,前端小姐姐,奋力的改着。还是会偶尔出现白屏问题,而且4G时出现次数更频繁。
并且有一下几大特性
1、后端没有报错,有些只是页面跳转的操作,更是没有接口访问
2、毫无规律可言,有时频繁出现几次,有时怎么点也不出来(这样的是最坑的)
3、各个页面均有出现
4、和机型无关,安卓Iphone均会出现
5、据说手机放那待一会,访问就会白屏。
那就从据说入手。不过还是有时复现,断网后,访问就是转圈loading了,并不是 白屏。
难道是前端路由问题吗,前端同学查了查,NO

由于是手机端,本后端调试起来好难(而且也不会),于是想了想,去查nginx->access.log
趁着某大佬手机 突然频繁白屏,开始一次次看log。log图我就不能放了哈,有隐私
大概样子是,几个 200请求,一堆304js文件等等。
难道是js缓存吗?
通过google.com禁用掉js缓存 然而惊喜只后并无卵用
后仔仔细细查看log,发现只要是有这个log的访问请求都会卡在那没有后续
如图:
在这里插入图片描述
特点是?visitDstTime=1 只要是出现这个,必然白屏。
后通过google查询。。。惊喜地发现。
******的运行商劫持,这种事情 真的是。。。无言以对
遂将首次微信跳转链接换为 https 得到解决

### UniApp 首次切换 TabBar 页面显示空白解决方案 在开发过程中遇到首次切换 TabBar 出现白屏的情况,通常是因为页面初始化时某些资源未及时加载完成或是渲染机制存在问题。针对此问题有几种常见处理方法: #### 方法一:优化页面加载顺序与依赖管理 确保各个 Tab 对应的页面组件按需懒加载而非一次性全部预加载可以有效减少初次访问其他标签页时可能出现的延迟现象。通过调整 `pages.json` 中关于多页面应用配置部分来实现这一点。 ```json { "lazyCodeLoading": "requiredComponents", } ``` 这使得只有当用户实际点击进入某个特定选项卡时才会去请求并解析该页面所需的相关代码片段[^1]。 #### 方法二:使用 Vue 生命周期钩子函数控制展示逻辑 利用 created 或 mounted 这样的生命周期阶段来进行数据获取操作而不是放在全局范围内执行异步调用。对于一些需要网络请求才能填充内容的部分尤其重要,防止因网速慢等原因造成视觉上的停滞感。 ```javascript export default { data() { return { loaded: false, // other states... }; }, methods: { fetchData() { // Simulate API call or heavy computation here. setTimeout(() => { this.loaded = true; }, 500); } }, onLoad() { this.fetchData(); } }; ``` 上述例子展示了如何定义一个简单的状态变量 `loaded` 来追踪是否已经成功取得必要信息,并配合条件渲染语句决定何时向用户呈现最终版本的内容[^2]。 #### 方法三:修正样式布局问题导致的隐藏元素 有时看似为空实际上只是因为 CSS 设置不当而被遮挡起来的对象。检查是否有绝对定位、浮动属性影响到了正常流内其它节点的位置;另外也要留意父容器的高度宽度设定是否会间接限制住内部子项的实际可见区域[^4]。 例如,在 uni-app 中可以通过设置最小高度 min-height 属性让页面始终占据一定比例屏幕空间从而避免底部留白过多的问题。 ```css page { display: flex; flex-direction: column; height: 100vh; /* Make sure the page takes up full viewport */ } .content-area { flex-grow: 1; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); /* For iPhone X notch support */ } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值