uni-app 升级3.4.7后 Android安装应用首次启动出现灰屏白屏透明等显示异常情况

uni-app 升级3.4.7后 Android安装应用首次启动出现灰屏白屏透明等显示异常情况

开发环境 版本号 项目创建方式
Mac 10.15.6 (19G73) HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：3.4.7

手机系统：Android

手机系统版本号：Android 10

手机厂商：vivo

手机机型：X20A

页面类型：vue

vue版本：vue2

打包方式：离线

项目创建方式：HBuilderX

操作步骤： 按官方指定的开发指南开发

预期结果： APP首次安装完成后，首次启动时启动图正常显示、不闪烁、不出现白屏、正常过渡到首页

实际结果： 首次安装、启动的显示不正常： 第一次启动APP时，APP先展示蓝色（不知道是启动图还是首页底色），然后变成灰色，再变成白色，这时甚至会出现穿透显示手机桌面的情况，之后才进入首页（参见附件中视频）

bug描述： 背景：

  1. Android端APP
  2. 首页是nvue，fast启动模式，页面上只有一张图片
  3. 本地打包，SDK版本为最新的3.4.7
  4. 配置了splash
  5. manifast.json中启动图配置如下：
"splashscreen" : {  
    "alwaysShowBeforeRender" : true,  
    "waiting" : false,  
    "autoclose" : true,  
    "delay" : 0  
},  
......  
"splashscreen" : {  
    "androidTranslucent" : true,  
    "androidStyle" : "default",  
    "android" : {  
        "hdpi" : "splash/480.4A84FF.png",  
        "xhdpi" : "splash/720.4A84FF.png",  
        "xxhdpi" : "splash/1080.4A84FF.png"  
    },  
    "useOriginalMsgbox" : false  
},
  1. 启动图是一个纯蓝色的底图
  2. pages.json中首页的配置背景，也是纯蓝色：
{  
    "path" : "pages/start/start",  
    "style" :                                                                                      
    {  
        "navigationStyle": "custom",  
        "backgroundColor": "#4A84FF",  
        "app-plus": {  
            "background": "#4A84FF",  
            "titleNView": false  
        }  
    }  
},

更多关于uni-app 升级3.4.7后 Android安装应用首次启动出现灰屏白屏透明等显示异常情况的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 升级3.4.7后 Android安装应用首次启动出现灰屏白屏透明等显示异常情况的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在升级 uni-app 到 3.4.7 后，如果 Android 安装应用首次启动时出现灰屏、白屏或透明等显示异常情况，可能是由于以下原因导致的。以下是一些可能的解决方案：

1. 检查启动页配置

  • 问题原因：uni-app 在启动时默认会显示启动页（Splash Screen），如果配置不正确，可能会导致启动页显示异常。
  • 解决方案：检查 manifest.json 中的启动页配置，确保启动页图片路径正确，且图片尺寸符合要求。
{
  "app-plus": {
    "splashscreen": {
      "autoclose": true,
      "waiting": true,
      "image": "static/splash.png"
    }
  }
}

2. 检查页面加载逻辑

  • 问题原因：如果应用的首页加载速度较慢，可能会导致页面在加载完成前显示为空白或灰色。
  • 解决方案：优化首页的加载逻辑，确保页面内容能够快速渲染。可以在 onLoad 或 onReady 生命周期中确保数据加载完成后再进行页面渲染。
export default {
  onLoad() {
    this.loadData().then(() => {
      // 数据加载完成后渲染页面
    });
  },
  methods: {
    async loadData() {
      // 模拟数据加载
      return new Promise(resolve => setTimeout(resolve, 1000));
    }
  }
}

3. 检查样式和布局

  • 问题原因：如果页面样式或布局存在问题，可能会导致页面显示异常。
  • 解决方案：确保页面样式和布局正确，特别是 flex 布局、position 定位等。可以使用开发者工具检查页面元素，确保样式正确应用。

4. 检查 Android 版本兼容性

  • 问题原因：某些 Android 版本可能存在兼容性问题，导致页面显示异常。
  • 解决方案：确保应用在不同 Android 版本上都能正常显示。可以在 manifest.json 中设置 minSdkVersion 和 targetSdkVersion。
{
  "app-plus": {
    "android": {
      "minSdkVersion": 21,
      "targetSdkVersion": 30
    }
  }
}

5. 检查 uni-app 版本问题

  • 问题原因：uni-app 3.4.7 可能存在某些 bug，导致首次启动时显示异常。
  • 解决方案：尝试降级到之前的稳定版本，或者等待官方发布修复版本。可以在 package.json 中指定 uni-app 版本。
{
  "dependencies": {
    "uni-app": "3.4.6"
  }
}

6. 检查插件和依赖

  • 问题原因：某些插件或依赖可能与新版本 uni-app 不兼容，导致显示异常。
  • 解决方案：检查项目中使用的插件和依赖，确保它们与 uni-app 3.4.7 兼容。可以尝试更新或移除有问题的插件。

7. 清除缓存并重新编译

  • 问题原因：缓存问题可能导致编译后的应用出现异常。
  • 解决方案：清除项目缓存并重新编译应用。可以删除 unpackage 和 node_modules 目录，然后重新安装依赖并编译。
rm -rf unpackage node_modules
npm install
npm run build:app-plus
回到顶部