保姆级教程带你实现HarmonyOS手语猜一猜元服务（二）

本文链接：https://blog.youkuaiyun.com/weixin_61845324/article/details/137605683

由于文章篇幅较长，共分为了三篇发布：

保姆级教程带你实现HarmonyOS手语猜一猜元服务（一）
保姆级教程带你实现HarmonyOS手语猜一猜元服务（二）
保姆级教程带你实现HarmonyOS手语猜一猜元服务（三）

🚀二、开发环境搭建

🔎1.DevEco Studio

DevEco Studio是一款专门为鸿蒙（HarmonyOS）系统开发而设计的综合性开发工具IDE，开发者可以利用该工具进行鸿蒙应用的设计、开发、调试和发布。DevEco Studio集成了代码编辑器、模拟器、调试工具、图形用户界面设计器和应用管理工具等多个功能，方便开发者进行鸿蒙应用的开发与管理。

DevEco Studio支持多语言开发，包括Java、ArkTS、JavaScript等，同时还支持多种开发模式和框架。此外，它还支持多平台开发，包括手机、平板、智能手表、电视等不同终端设备。

DevEco Studio下载地址：HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者

安装完成之后界面：

🔎2.配置环境变量

本文以window系统为例，具体操作步骤如下：

1、通过“设置 > 系统 > 系统信息 > 高级系统设置”进入“系统属性”页面的“高级”页签，点击“环境变量”

2、在“系统变量”中添加 HDC_SERVER_PORT和OHOS_HDC_SERVER_PORT 两个变量，变量值设置为未被占用的端口，例如7036和7037

3、在用户或者系统的path变量中，添加HDC工具的路径。

HDC工具路径为：HarmonyOS SDK安装目录/hmscore/{版本号}/toolchains。例如：C:\Users\XXXXX\AppData\Local\Huawei\Sdk\hmscore\3.1.0\toolchains

环境变量配置完成，重启DevEco Studio。

🔎3.诊断开发环境

1、打开项目，从欢迎页进入：底部菜单选择“Help > Diagnose Development Environment”

2、待自动检查完成。如果有检查未通过的项目，请根据检查项的描述和修复建议进行处理

🔎4.下载SDK

1、打开项目，从欢迎页进入：底部菜单选择“Configure > Settings”

🚀三、创建元服务项目

🔎1.创建元服务项目的步骤

1、登录AppGallery Connect，点击“我的应用”。

首次进入需要签协议

2、在“HarmonyOS”页签，“类型”选择“元服务”，可以查看创建的元服务。

🔎2.选择模板和配置项目属性

1、打开DevEco Studio，菜单选择“File > New > Create Project”，创建一个新工程。

2、选择“Atomic Service”，选择“Empty Ability”模板，点击“Next”。

3、配置工程基本信息。

Project name：设置“myProject”。
Bundle name：本样例以“com.huawei.myproject”为例。
Save location：选择工程存放路径。
Compile SDK：支持API 4~9，本样例选择“API 9”。
Model：应用支持的模式，API Version 4~8只支持FA模式。
Enable Super Visual：是否使用低代码开发模式，本样例不打开此开关。
Language：开发语言。
Device type：该工程模板支持的设备类型。本样例以手机设备为例。

点击“Finish”，等待工程创建完成，即可进行代码编写。

🔎3.编写代码和调试运行

1、点击右侧的Previewer工具，预览页面效果。

2、新建details.ets页面

details.ets页面

@Entry
@Component
struct Details {
  build() {
    //Flex容器组件
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      //Text组件
      Text('我是跳转页面')
        .fontSize(60)
        .fontWeight(500)
    }
    //容器整体宽高
    .width('100%')
    .height('100%')
  }
}

main_pages.json页面

{
  "src": [
    "pages/Index",
    "pages/details"
  ]
}

3、添加跳转按钮实现页面跳转

index.ets页面

import router from '@ohos.router'
@Entry
@Component
struct Index {
  @State message: string = '愚公搬代码'

  build() {
    //Flex容器组件
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      //Text组件
      Text('愚公搬代码')
        .fontSize(60)
        .fontWeight(500)
      //Button组件
      Button('跳转下一页')
        .fontSize(40)
        .fontWeight(500)
        .width(280)
        .height(60)
        //点击Button实现页面跳转
        .onClick(() => {
          console.info("跳转开始")
          router.pushUrl({
            url: 'pages/details' // 目标url
          }, (err) => {
            if (err) {
              console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
              return;
            }
            console.info('Invoke pushUrl succeeded.');
          });
        })
    }
    //容器整体宽高
    .width('100%')
    .height('100%')
  }
}