HarmonyOS鸿蒙Next中HBuilder X 4.76打包APP启动白屏
HarmonyOS鸿蒙Next中HBuilder X 4.76打包APP启动白屏 项目只保留一个页面能正常显示页面,项目只要是存在2个以上画面启动就会出现白屏,以下是复现会出现问题的pages.json代码
{
"easycom": {
"autoscan": true,
"custom": {
"^s-(.*)": "@/sheep/components/s-$1/s-$1.vue",
"^su-(.*)": "@/sheep/ui/su-$1/su-$1.vue"
}
},
"pages": [
{
"path": "pages/index/index",
// "aliasPath": "/",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh": true
}
// "meta": {
// "auth": false,
// "sync": true,
// "title": "首页",
// "group": "商城"
// }
},
{
"path": "pages/index/user",
// "aliasPath": "/",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh": true
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "星品购",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#FFFFFF",
"navigationStyle": "custom"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/tabbar/home.png",
"selectedIconPath": "static/tabbar/home_active.png",
"text": "首页"
},
// {
// "pagePath": "pages/index/cart"
// },
{
"pagePath": "pages/index/user",
"iconPath": "static/tabbar/user.png",
"selectedIconPath": "static/tabbar/user_active.png",
"text": "我的"
}
]
}
}
更多关于HarmonyOS鸿蒙Next中HBuilder X 4.76打包APP启动白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这边使用4.81的Hbuilder并没有出现这个问题,IDE为6.0 beta3版本的,使用代码如下:
// index.vue
<template>
<view class="content">
<button class="button">Index页面</button>
</view>
</template>
<script lang="uts">
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.button{
width: 100%;
margin: 10px;
margin-top: 50px;
}
</style>
// use.vue
<template>
<view>
<view class="content">
<button class="button">打开user界面</button>
</view>
</view>
</template>
<script setup>
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.button{
width: 100%;
margin: 10px;
margin-top: 50px;
}
</style>
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
"^s-(.*)": "@/sheep/components/s-$1/s-$1.vue",
"^su-(.*)": "@/sheep/ui/su-$1/su-$1.vue"
}
},
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh": true
}
},
{
"path": "pages/index/use",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh": true
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"navigationStyle": "custom"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png",
"text": "首页"
},
{
"pagePath": "pages/index/use",
"iconPath": "static/logo.png",
"selectedIconPath": "static/logo.png",
"text": "我的"
}
]
},
"uniIdRouter": {}
}
这边能否提供下完整可复现的demo呢?
更多关于HarmonyOS鸿蒙Next中HBuilder X 4.76打包APP启动白屏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
如何提供,
看看是否可以提供个git地址,或者编辑原问题是否可以上传附件,
关注,顶贴,
使用4.84 版本打包试试
那鸿蒙开发工具要改吗鸿蒙开发工具是5.1.1 Release,
在HarmonyOS Next中使用HBuilder X 4.76打包APP出现启动白屏,可能原因包括资源文件未正确打包、应用启动配置问题或系统兼容性。需检查manifest.json中的启动页配置、资源路径是否正确,并确认所有依赖组件已适配HarmonyOS Next。可尝试清理缓存重新打包,或检查控制台日志定位具体错误。
根据您提供的pages.json配置,出现白屏问题的主要原因是tabBar配置与页面路径不匹配。在您的配置中,tabBar的list数组包含了两个页面路径:
pages/index/indexpages/index/user
但是,在pages数组中,您只定义了两个页面:
pages/index/indexpages/index/user
问题在于tabBar配置中的页面路径必须在pages数组中正确定义,且路径必须完全匹配。从您的配置来看,路径是匹配的,但白屏可能由以下原因导致:
-
页面组件文件缺失:请检查
pages/index/index.vue和pages/index/user.vue文件是否存在且路径正确。 -
页面组件初始化错误:如果页面组件在初始化时出现JavaScript错误或资源加载失败,会导致白屏。建议检查浏览器开发者工具的控制台是否有错误信息。
-
路由配置冲突:如果使用了
aliasPath或其他路由配置,可能导致页面无法正常加载。 -
资源路径问题:
iconPath和selectedIconPath中的图片路径是否正确,如果图片资源不存在可能导致tabBar渲染异常。
建议按以下步骤排查:
- 确认所有页面组件文件存在且无语法错误。
- 检查静态资源(如图标)路径是否正确。
- 在HBuilder X中清理项目并重新打包。
如果问题仍然存在,请提供更详细的错误日志或描述白屏发生时的具体场景。

