搞定鸿蒙新手 3 大痛点:页面跳转实现、应用标识修改与 Hyper-V 启动故障排查

136 阅读6分钟

作为鸿蒙开发新手,刚上手时难免会遇到各种 “卡壳” 问题 —— 页面跳转不知如何实现传参、想修改 App 图标名称却找不到入口、模拟器启动时弹出 Hyper-V 配置错误…… 这些问题看似基础,却常常让初学者耗费大量时间。本文结合华为开发者联盟官网的技术规范,针对这 3 个高频痛点,给出 step-by-step 实操方案,帮你快速打通开发流程。

一、页面跳转实现:含传参与目标页适配(基于 ArkTS)

鸿蒙应用的页面跳转核心依赖路由跳转有 router和Navigation(这个后面会讲到,这节课主要以router路由工具为例),支持页面间跳转、传参及返回,但是新手的话,推荐从router学起,更容易上手。实际开发中需注意源页面跳转逻辑 和目标页参数接收 两部分修改,以下是完整实操:

1. 基础准备

首先需要有两页面,这里以Index.ets和 Home.ets为例,示范代码如下:

//Index.ets
@Entry
@Component
struct Index {
  build() {
    Column(){
      Row(){
        Text("Index页面")
          .fontWeight(FontWeight.Bold)
          .fontSize(30)
      }
    }
    .justifyContent(FlexAlign.Center)
    .width("100%")
    .height("100%")
  }
}
//Home.ets
@Entry
@Component
struct Home {
  build() {
    Column(){
      Row(){
        Text("Home页面")
          .fontWeight(FontWeight.Bold)
          .fontSize(30)
      }
    }
    .justifyContent(FlexAlign.Center)    
    .width("100%")
    .height("100%")
  }
}

2. 关键配置:在 main_pages.json 注册目标页

官网明确要求 “所有页面需在 main_pages.json 中配置路径”,只要带有 @Entry组件的即为页面页,否则跳转失败,具体配置流程如下:

  • 找到页面配置文件:路径为ArkTSDemo1>entry> src> main>resources>base>profile> main_pages.json
  • 添加新页面路径:在src数组中添加页面路径,示例为"src":[ "pages/Index", "pages/Home"]
  • 立即同步:配置完成后点击“Sync Now”同步项目,确保IDE能正常识别配置

3. 源页面(Index.ets):实现跳转与传参

在Index.ets 中添加跳转按钮,通过 router.pushUrl/ router.replaceUrl携带参数跳转(参数需要传递则加,不需要则可不加):

import { router } from '@kit.ArkUI'

//Index.ets
@Entry
@Component
struct Index {
  build() {
    Column(){
      Row(){
        Text("Index页面")
          .fontWeight(FontWeight.Bold)
          .fontSize(30)
      }
      Button("跳转按钮")
        .padding(10)
        .onClick(()=>{
          router.pushUrl({//通过pushUrl()方法实现跳转
            url:"pages/Home",
            //传参的参数类型是个对象Object,可以有一个或多个属性
            params:{
              name:"PLC",
              type:"微信公众号"
            }
          })
        })
    }
    .justifyContent(FlexAlign.Center)
    .width("100%")
    .height("100%")
  }
}

4. 目标页(Home.ets):接收参数并展示

跳转后需在目标页通过 router.getParams()获取参数,官网文档提示 “需在页面生命周期内调用”,推荐在 aboutToAppear中处理:

import { router } from '@kit.ArkUI'

interface Params{
  name:string,
  type:string
}
//Home.ets
@Entry
@Component
struct Home {
  //创建变对应的对象变量来接收传来的参数值
  @State params:Params={
    name:"",
    type:""
  }
  //在页面创建即获取传参
  aboutToAppear(): void {
    this.params=router.getParams() as Params
    }
  build() {
    Column(){
      Row(){
        Text("Home页面")
          .fontWeight(FontWeight.Bold)
          .fontSize(30)
      }
      //显示语法1,通过变量成员显示
      Text("Index页面传来的参数为:")
      Text("昵称:"+this.params.name+"\n类型:"+this.params.type)
      //显示语法2,通过模版字符串显示
      // Text(`Index页面传来的参数为\n昵称:${this.params.name}\n类型:${this.params.type}`)
    }
    .justifyContent(FlexAlign.Center)
    .width("100%")
    .height("100%")
  }
}

运行结果如下:

在这里插入图片描述

二、修改 App 图标(Logo)与应用名称:1 步快速配置

APP信息分为设置中显示的应用信息 和桌面上显示的应用信息,以下针对这两种情况进行对应的配置。

1. 修改设置中显示的应用图标及名称

图标和名称统一在app.json5中修改,文件路径为ArkTSDemo1> AppScope> app.json5,关键配置代码如下:

"app":{
  "bundleName":"com.huawei.nyapplication",
  "vendor":"example",
  "versionCode":1000808,
  "versionName":"1.0.0",
  "icon": "$media:layered_image",//应用图标
  "label":"$string:app_name"//应用名称
}

2. 修改桌面上显示的应用图标及名称

图标和名称统一在module.json5中修改,文件路径为ArkTSDemo1>entry>src>main> module.json5,关键配置代码如下:

"abilities":[
  {
    "name":"EntryAbility",
    "srcEntry":"./ets/entryability/EntryAbility.ets",
    "description":"description",
    "icon":"$media:layered_image",//应用图标
    "label":"$string:EntryAbility_label",//应用名称
    "startWindowIcon":"$media:startIcon",
    "startWindowBackground": "#FFFFFF",
    "exported": true,
    "skills":[
      {
        "entities":[
          "entity.system.home"
        ],
        "actions":[
          "action.system.home"
        ]
      }
    ]
  }
]

三、模拟器启动报 “Hyper-V 未配置”:2 种场景解决方案

很多新手在启动鸿蒙模拟器时,会遇到 “Hyper-V 未启用” 或 “Hyper-V 配置错误” 提示。这是因为鸿蒙模拟器依赖 Windows 的 Hyper-V 虚拟化技术,官网在 “模拟器环境要求” 中已明确配置条件,分以下 2 种场景解决,可以解决90%以上的Hyper-V 配置问题:

场景 1:未安装 Hyper-V(Windows 10/11 专业版 / 企业版)

若系统是专业版 / 企业版,直接通过 Windows 功能启用 Hyper-V:

  1. 按下Win+R,输入control打开控制面板,进入 “程序→程序和功能→启用或关闭 Windows 功能”;
  2. 勾选 “Hyper-V” 下的所有选项(包括 “Hyper-V 管理工具” 和 “Hyper-V 平台”);
  3. 勾选虚拟机平台(Virtual machine platform);
  4. 点击 “确定”,等待系统安装组件,完成后重启电脑;
  5. 重启后打开 DevEco Studio,重新启动模拟器即可。

场景 2:Windows 家庭版无 Hyper-V 选项

家庭版默认隐藏 Hyper-V,需通过命令手动启用:

  1. 右键点击 “开始菜单”,选择 “命令行窗口(管理员)”;
  2. 复制粘贴以下命令,按回车执行(需等待 2-3 分钟):
bcdedit /set hypervisorlaunchtype auto
  1. 重启电脑即可;
  2. 如果重启之后还没有出现Hyper-V选项,可能是系统本身没有安装Hyper-V配置,则可新建文本文档,输入下面的命令:
pushd "%~dp0"
dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum >hyper-v.txt
for /f %%i in ('findstr /i . hyper-v.txt 2^>nul') do dism /online /norestart /add-package:"%SystemRoot%\servicing\Packages\%%i"
del hyper-v.txt
Dism /online /enable-feature /featurename:Microsoft-Hyper-V -All /LimitAccess /ALL
pause
  1. 将.txt后缀改为.bat,以管理员身份运行。命令逻辑是自动去下载微软官网的Hyper各个版本,会一直重复执行,建议运行5~10S后关闭窗口;
  2. 重启电脑,Hyper-V 就安装并自动启用,可以从控制面板的“启用或关闭 Windows 功能”中再检查一下。

总结

以上 3 个问题是鸿蒙新手的 “高频踩坑点”,但只要遵循官网技术规范,按步骤操作就能快速解决:页面跳转核心是router 模块的 “传参 + 接收” 配合页面注册;App 标识根据需要修改对应的配置文件和资源文件;Hyper-V 问题则分系统版本和硬件场景适配。后续遇到问题时,也可多查阅华为开发者联盟官方社区,很多基础问题都能在官方文档中找到标准答案。

当然也欢迎大家一起系统地学习鸿蒙开发,深入掌握更多 ArkTS 核心技术,拿到基础、高级等开发者证书,欢迎加入鸿蒙班,一起从入门到精通:点击免费加入

如果本文帮你解决了开发难题,欢迎点赞收藏,也可以在评论区分享你遇到的其他鸿蒙新手问题~