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

8 回复

这边使用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/index
  • pages/index/user

但是,在pages数组中,您只定义了两个页面:

  • pages/index/index
  • pages/index/user

问题在于tabBar配置中的页面路径必须在pages数组中正确定义,且路径必须完全匹配。从您的配置来看,路径是匹配的,但白屏可能由以下原因导致:

  1. 页面组件文件缺失:请检查pages/index/index.vuepages/index/user.vue文件是否存在且路径正确。

  2. 页面组件初始化错误:如果页面组件在初始化时出现JavaScript错误或资源加载失败,会导致白屏。建议检查浏览器开发者工具的控制台是否有错误信息。

  3. 路由配置冲突:如果使用了aliasPath或其他路由配置,可能导致页面无法正常加载。

  4. 资源路径问题iconPathselectedIconPath中的图片路径是否正确,如果图片资源不存在可能导致tabBar渲染异常。

建议按以下步骤排查:

  • 确认所有页面组件文件存在且无语法错误。
  • 检查静态资源(如图标)路径是否正确。
  • 在HBuilder X中清理项目并重新打包。

如果问题仍然存在,请提供更详细的错误日志或描述白屏发生时的具体场景。

回到顶部