uni-app 真机调试、H5预览、自定义基座调试正常无报错，云打包apk过程无报错，但安装到手机后白屏，tabbar不显示

uni-app 真机调试、H5预览、自定义基座调试正常无报错，云打包apk过程无报错，但安装到手机后白屏，tabbar不显示

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

产品分类：
uniapp/App

PC开发环境操作系统：
Windows

HBuilderX类型：
正式

HBuilderX版本号：
4.08

手机系统：
Android

手机系统版本号：
Android 14

手机厂商：
模拟器

手机机型：
9

页面类型：
vue

vue版本：
vue3

打包方式：
云端

App下载地址或H5网址：
https://hunsha.letong.group/uploads/ab.apk

操作步骤：

  • 云打包

预期结果：

  • 云打包后正常显示

实际结果：

  • 云打包后白屏

bug描述：
下午app写了几个页面，准备打包到手机看看效果，结果就是启动后白屏，什么也不显示，标准基座，自定义基座，H5预览都正常，没有任何报错信息，cpu型号也全选了，不管是安卓9的模拟器还是安卓14的手机，安装后都不行
appid是UNIA5003B3
apk


更多关于uni-app 真机调试、H5预览、自定义基座调试正常无报错，云打包apk过程无报错，但安装到手机后白屏，tabbar不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 真机调试、H5预览、自定义基座调试正常无报错，云打包apk过程无报错，但安装到手机后白屏，tabbar不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 开发中，如果你遇到云打包后安装到手机出现白屏、tabbar 不显示的问题，以下是一些可能的原因和解决方案：

1. 检查打包配置

  • 问题：打包配置不正确可能导致资源文件丢失或路径错误。
  • 解决方案：
    • 确保 manifest.json 中的配置正确，特别是 appid、路由模式、tabbar 配置等。
    • 检查 pages.json 中的 tabbar 配置是否正确，路径是否存在。
    • 如果是 H5 打包，确保 router 配置正确，例如 mode: 'history' 或 mode: 'hash'。

2. 静态资源路径问题

  • 问题：打包后静态资源（如图片、字体、样式文件）路径错误，导致无法加载。
  • 解决方案：
    • 检查项目中是否有使用相对路径的静态资源，建议改为绝对路径。
    • 在 manifest.json 中，确保 h5 配置的 publicPath 正确，例如：
      "h5": {
  "publicPath": "./"
}
    • 如果是图片资源，确保图片路径正确，或者将图片放到 static 目录下。

3. 路由配置问题

  • 问题：路由配置错误可能导致页面无法加载。
  • 解决方案：
    • 检查 pages.json 中的 pages 和 tabbar 配置，确保路径和组件名称正确。
    • 如果是动态路由，确保路由参数传递正确。

4. 自定义基座问题

  • 问题：自定义基座与云打包的配置不一致，可能导致白屏。
  • 解决方案：
    • 确保自定义基座和云打包的 manifest.json 配置一致。
    • 重新生成自定义基座并测试。

5. 兼容性问题

  • 问题：某些 API 或组件在真机环境中不支持。
  • 解决方案：
    • 检查是否有使用 H5 特有的 API 或组件，确保它们在原生环境中兼容。
    • 使用 uni.getSystemInfo 获取设备信息，排查是否是特定设备或系统版本的问题。

6. 日志排查

  • 问题：无法直接定位问题原因。
  • 解决方案：
    • 在 App.vue 的 onLaunch 或 onShow 生命周期中添加日志，查看是否有错误信息。
    • 使用 Android Studio 或 Xcode 连接手机，查看运行日志（Logcat 或 Console）。
    • 如果是 H5 打包，打开浏览器的开发者工具，查看控制台和网络请求。

7. 清除缓存

  • 问题：缓存可能导致旧代码或配置残留。
  • 解决方案：
    • 在手机上卸载并重新安装应用。
    • 在 uni-app 项目中，运行以下命令清除缓存：
      npm run clean

8. 依赖问题

  • 问题：某些依赖包在打包时未正确引入。
  • 解决方案：
    • 确保所有依赖包已正确安装，运行以下命令：
      npm install
回到顶部