Hbuilder X 打包后运行到HarmonyOS 鸿蒙Next云真机出现白屏,如果只有一个页面就没有问题,多个页面就有白屏

Hbuilder X 打包后运行到HarmonyOS 鸿蒙Next云真机出现白屏,如果只有一个页面就没有问题,多个页面就有白屏 【问题描述】:Hbuilder X 打包后运行到鸿蒙云真机出现白屏,如果只有一个页面就没有问题,多个页面就有白屏;不同版本的云真机都会出现这个问题;请问怎么解决

【版本信息】:

previewableImage

、无真机,用的云真机(不同的云真机测试都一样;例如nova14pro)

【复现代码】:无法提供,


更多关于Hbuilder X 打包后运行到HarmonyOS 鸿蒙Next云真机出现白屏,如果只有一个页面就没有问题,多个页面就有白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

开发者你好,白屏的问题是因为JS引擎在执行代码的时候报错了,可能是方法不支持也可能是写法上存在兼容性问题,可以参考这篇文章uni-app调试说明,最重要的是文章最后部分的说明。

以下是uni-app白屏问题定位参考方案:

【问题定位】

步骤 动作 难度 作用 约束
1 观察HBuiler控制台日志 简单,快速 修改显性报错 不适用于有桥接ArkTS插件的情况
2 运行到浏览器,检查F12是否报错 简单,快速 修改显性报错 不适用于有桥接ArkTS插件的情况
3 通过deveco检查应用报错 简单,快速 主要确认应用启动错误 /
4 通过JSVM调试查看是否有报错 中等 修改显性报错 /
5 通过DevTools查看子页/元素是否加载 中等 定界父页面还是子页面的问题 /
6 二分法排查:修改pages.json旁路部分页面 复杂,困难 定界 /
7 通过JSVM调试调试JS代码 复杂,困难 代码调试 /

定位步骤:

  1. 排查以下3种场景。

    条件编译未命中HarmonyOS平台。

    页面元素受v-if、v-show、样式影响没有渲染,可通过DevTools查看元素是否挂载到DOM树上。

    请求数据的方法未执行。

  2. 观察HBuilder报错。

  3. 运行到浏览器,通过F12查看是否有报错。

  4. 打开deveco,过滤应用和日志级别,检查关键错误。

  5. 通过JSVM调试查看页面是否有报错。

  6. pages.json中注释页面,通过二分法定界。

{
  "pages": [     
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle":"custom"  ,
        "navigationBarTitleText": "index"
      }
    },
    {
      "path": "pages/index2/index2",
      "style": {
        "navigationStyle":"custom"  ,
        "navigationBarTitleText": "index2"
      }
    },
    {
      "path" : "pages/webview/webview",
      "style" : {
        "navigationBarTitleText" : "huawei"
      }
    }
  ]
}
  1. 通过JSVM调试调试JS代码。
    在JSVM调试中能看到app-service.json包含了uniapp逻辑转译后的代码。参考第4步,可主动打断点调试。

【分析结论】
通过HbuilderX、浏览器开发者工具、DevEco Studio的日志可以获取一些明显的错误信息然后解决。uni-app插件可能在JS引擎未执行加载页面的代码时就运行出错导致白屏,可以在JSVM调试时提前勾选遇到异常自动断点即可定位到运行出错前的代码。最后还没解决可以通过二分法注释关键文件定界白屏原因。

【常见FAQ】
Q:JSVM调试加载不出源码怎么办?
A:请参考解决方案

  • 如果还是不能加载源码,可能是在加载源码前就抛出异常,可按JSVM调试的4、5、6步骤,打开调试页面,勾选Pause on uncaught exceptions和Pause on caught exceptions。可自动断点在异常抛出之前的位置。

Q:运行hdc命令报错提示找不到hdc命令。
A:hdc命令工具在DevEco Studio目录下,路径为:${DevEco Studio安装目录}\sdk\default\openharmony\toolchains。将此路径配置为环境变量即可。

Q:devtools调试JS代码,根据堆栈信息定位到Vue全局对象app报错undefined,下一步如何分析?
A:观察报错的第一场景,如果是媒体资源(图片,视频等),在项目中搜索该媒体资源是否作为对象导出,导出后在css、JS中使用不当,也会导致加载全局对象app异常,从而项目出现白屏问题。

【背景知识】

  1. uniapp项目页面使用webview渲染,js业务逻辑运行在uniapp定制的jsvm中。两者实现由uniapp官方开发,当前闭源。
页面渲染 逻辑执行
运行时 大部分是webview渲染,少量ArkUI渲染 JSVM
主要运行内容 html,css 业务逻辑:app-config-service.js,app-service.js
体现 通过显示布局边界看出,顶部NavigationBar是ArkUI渲染,下方主体内容是webview渲染。 可通过HarmonyOS提供的JSVM调试工具连接JSVM,对逻辑执行进行调试。
  1. 开发态uniapp项目的目录结构如下:
序号 文件 入口 作用
1 index.html / 项目入口
2 main.js 由index.html拉起 uniapp的入口文件
3 App.vue 由main.js拉起 uniapp的主组件
4 manifest.json 全局配置文件 应用的全局配置文件,指定应用的名称、图标、权限等
5 pages.json 被合并到app-config-service.js中,由uniapp框架拉起 配置页面的路径、窗口样式、导航栏、tabbar等

更多关于Hbuilder X 打包后运行到HarmonyOS 鸿蒙Next云真机出现白屏,如果只有一个页面就没有问题,多个页面就有白屏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


没有真机;电脑用不了模拟器;只能用华为云真机,老师;可以通过拉会议给指导一下该问题吗,

Hbuilder X打包应用在鸿蒙Next云真机多页面白屏问题

主要涉及路由配置和页面加载机制。

  • 检查页面路由注册是否正确,确保所有页面在main_pages.json中正确定义
  • 排查页面资源加载路径,鸿蒙对相对路径和绝对路径处理方式存在差异
  • 确认页面生命周期回调函数未阻塞渲染流程
  • 检查自定义组件和第三方库的兼容性,部分JS库可能存在鸿蒙Next适配问题
  • 页面跳转参数传递需符合鸿蒙规范,避免数据类型不匹配导致渲染失败

根据描述,多页面白屏问题通常与页面资源加载或路由初始化相关。建议排查以下方向:

  1. 检查路由配置
    确保多页面路由表正确配置,无循环引用或未注册的路由路径。鸿蒙Next对动态路由支持较为严格,需在app.json中明确定义所有页面路径。

  2. 资源加载时序
    白屏可能是因页面依赖的JS/CSS未完全加载。可在页面onInit生命周期添加加载状态检测,或通过@ohos.net.http模块预加载关键资源。

  3. 云真机兼容性
    鸿蒙Next云真机与本地真机存在渲染差异,建议在manifest.json中显式声明SDK版本(例如"harmonyOSVersion": "Next"),并关闭调试模式测试。

  4. 页面栈管理
    多页面跳转时若未正确销毁前序页面,可能导致内存溢出。可通过router.clear()清理历史栈,或使用router.replace替代部分router.push

若问题仍存,需进一步检查页面组件的生命周期函数(如onPageShow)是否阻塞渲染流程。

回到顶部