微信小程序uniapp出现白屏怎么解决(总集)

本文汇总了解决微信开发者工具中出现的各种白屏问题,包括配置、缓存、模块引用、页面跳转、真机调试等,并提供了排查和解决步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我本人遇到这种问题一般都很快解决了,所以没有怎么留意,没有凡尔赛自夸,不是自己厉害,只是比较细心。最近有小伙伴反馈白屏,突然想到这种情况有很多种,想做个集合,有朋友遇到解决不了的,请留言,我尽可能解决并留在此处。

最重要的!!!
如果你的电脑配置不怎么样,并且没有改动就白屏,请重启微信开发者工具,电脑性能好出现概率低但不完全

白屏情况一 开启了Selected context only

在这里插入图片描述

请不要给这个打√,或者出现问题的时候检查,部分问题出现bug的时候,这个会隐藏掉bug提示。虽然他能很好帮我们解决ui库警报提示过多的问题

白屏情况二 缓存未清理

在这里插入图片描述

这种情况常常出现在多个小程序项目,修复bug,接手别人项目的情况,有缓存的存在,导致白屏。有时候单纯的重启没有效果的,请最好在全部清除后重启。

白屏情况三 线上出现白屏 开发环境没问题

在这里插入图片描述

检查域名有没有配置 有时候后端给你的测试环境 不代表线上版本 没有配置叫负责人配置一下就好了

白屏情况四 体验版扫码出现白屏

在这里插入图片描述

请检查路径是否正确

白屏情况五 报错模块找不到 组件找不到 文件找不到之类的

①先确定是否有这个文件,有这个文件的话通过索引搜索是否是引入错误,引入路径错误,使用变量名错误
②如果是刚引入这个包的时候出现问题,不是包不对,就是引入方式不对
③JSON文件是否配置无误
④清理缓存
⑤依赖安装有误,安装未完成,或者安装完成之后提示了警告
⑥脚手架跟当前项目不匹配

白屏情况六 页面跳转出现白屏

如果给页面page或者自定义class加了页面颜色,可以给page.json或者app.json(微信原生)加相同的页面背景色

白屏情况七 真机调试白屏

在这里插入图片描述

尽可能用2.0版本,(局域网模式开是最好的,但如果是手机需要连接电脑的wifi或者同局域网的wifi),还要观察连接状态是否正常,服务状态是否正常,如果会跳,或者红色是不可行的

在这里插入图片描述

如果切换了2.0还不行,检测自己开发工具是否是最新版本,老版本经常出现问题。新版本可能出现新问题,但总归问题是越来越少的。

白屏情况八 Couldn’t resolve the Js file “app.js” relative to “app.json”

因为依赖下载失败 把最近一次导入的依赖项删除即可

同样错误另一种解决方法

来源@老编程爱好者
场景是app转小程序之后遇到这个问题

需要删除unpackage\dist\dev\mp-weixin目录,重新编译运行

白屏情况九 预览情况下白屏

在这里插入图片描述

根据这四步进入调试状态 查看报错情况

白屏情况十 未有权限查看该项目

在这里插入图片描述

这里面需要有最起码的开发者权利才能看

开发者工具本地设置

一般必用的几个选项给你们画出来,其他可有可无

在这里插入图片描述

校验不校验合法域名看个人需求,一般也是需要的

如果有用,请给我点赞收藏,我会很开心,谢谢

### UniApp 手机端调试白屏解决方案 #### 一、常见原因分析 在 UniApp 开发过程中,特别是在安卓和 iOS 平台上,可能会遇到应用启动后出现白屏的情况。这通常是由以下几个因素引起的: - **JavaScript 错误**:某些 JavaScript 错误会阻止页面的渲染过程[^1]。 - **资源加载失败**:图片或其他静态资源未能成功加载也可能导致白屏现象[^2]。 #### 二、具体解决方法 针对上述提到的原因,可以采取如下措施来解决问题: ##### 1. 检查并修正 JavaScript 错误 当应用程序抛出 `Uncaught ReferenceError` 或其他类型的 JS 异常时,可能导致创建实例上下文失败从而引发白屏问题。建议开发者仔细审查代码逻辑,特别是那些可能涉及到全局变量定义的地方,确保所有使用的对象都已经正确定义并且初始化完成后再被调用。 ```javascript // 避免未声明就使用的变量 if (typeof myVar !== 'undefined') { console.log(myVar); } else { console.error('myVar is not defined'); } ``` ##### 2. 确认资源路径正确无误 对于 CSS 文件、图像文件以及其他外部依赖项,在不同平台间可能存在路径差异。务必确认这些资源链接指向的是有效的地址,并且能够跨设备稳定访问。可以通过浏览器开发者工具中的网络面板查看是否有任何请求返回了 404 错误码。 ##### 3. 使用 HBuilderX 的内置功能辅助诊断 HBuilderX 提供了一些有用的特性帮助定位问题所在之处。比如通过连接到真实设备上的 Web Inspector 来实时监控前端表现;利用其自带的日志记录机制捕获更多关于崩溃前后的信息以便后续分析处理。 ##### 4. 清理缓存重新编译 有时候旧版本残留的数据会影响新构建的应用程序行为。尝试清除本地存储以及服务器端部署包内的临时文件夹之后再执行一次完整的构建流程看能否恢复正常工作状态。 ---
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值