HarmonyOS元服务开发环境搭建与项目创建初始化。

小荣的网络开发日志
265 阅读6分钟

前言

大家好，我是小荣，一个想让程序员赚💴的程序员。由于公司需要这边需要接触到元服务这个东西，上一篇文章我们简单学习了什么是元服务，以及他的使用场景和要开发该应用要学习什么技术， 本篇文章就开启我们的第二篇，开始我们第一个元应用的开发流程。

目录

大体可以学到的内容如下

  • 开发环境搭建
  • 创建元服务项目
    • 获取app id
    • 创建元服务工程
      • 工程项目创建
      • 图标
      • 页面创建预览
    • 创建元服务卡片
  • 真机运行

开发环境搭建

可以参考官网文档环境搭建

下载开发工具

DevEco Studio NEXT Release开发工具是由华为鸿蒙提供的，还挺大的。2gb大小，可以从官网直接下载。

安装

  1. 下载完成解压在之后是一个exe安装文件，点击安装，勾选环境变量， 创建桌面快捷方式等，一直点确定即可，安装过程中比较慢。
  2. 打开快捷桌面，会有一个弹窗，选择Do not import settings,
  3. 勾选同意协议
  4. 设置中文（创建一个空的项目，点击file>settings>plugin>installed>enble） 可以参考这个文章：blog.csdn.net/PsEmperor/a…

开发环境配置

1.打开配置，找到Open Harmony SDK,选择一个目录进行默认的sdk安装 image.png 2.关闭项目，诊断开发环境即可

image.png

创建应用

按照官网给的流程图我们一步一步制作。 官网教程

image.png 这里首先要注册华为的账号。

获取appId

  1. 登录AppGallery Connect， 点击“我的应用”。这里要实名认证。
  2. 按步骤完成实名认证之后开始创建一个应用，获取APPid

image.png 3.创建app会让你填写应用的名称以及应用的一些服务权限，这里按需求填写即可。这样就可以获取到我们的appId了

image.png

创建元服务工程

官方教程

1.打开我们的开发IDEA，新建一个新的项目

image.png

2.选择左边的Atomic Servuce

image.png

3.点击sign in之后会默认帮你弄好app id

image.png 4.配置项目名称和要适配的机器。

image.png

4.项目创建自动生成目录

  • AppScope > app.json5：元服务的全局配置信息。

  • entry：HarmonyOS工程模块，编译构建生成一个HAP。

    • src > main > ets：用于存放ArkTS源码。
    • src > main > ets > entryability：元服务的入口。
    • src > main > ets > pages：元服务包含的页面。
    • src > main > resources：用于存放元服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
    • src > main > module.json5：模块配置文件。主要包含HAP的配置信息、元服务在具体设备上的配置信息以及元服务的全局配置信息。具体的配置文件说明，详见module.json5。
    • build-profile.json5：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。
    • hvigorfile.ts：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。

  • oh_modules：用于存放三方库依赖信息。

  • build-profile.json5：元服务级配置信息，包括签名signingConfigs、产品配置products等。

  • hvigorfile.ts：元服务级编译构建任务脚本。

生成元服务图标

1.在工程中选中模块或文件，右键单击New > Image Asset，进入图标配置页面，选一张1024*1024的图点击finsh即可。

image.png

构建元服务的第一个页面

  1. 页面文件在Entry-->src-->main-->ets-->pages下 按照文档，给的示例以及添加的按钮，可以看得出来，build函数就是他的页面构建 我们把build函数的内容替换一下，就可以渲染出button了

build() { 
    Row() { 
        Column() { 
            Text(this.message)
            .fontSize(50) 
            .fontWeight(FontWeight.Bold) // 添加按钮，以响应用户点击 
            Button() { Text('Next') .fontSize(30) .fontWeight(FontWeight.Bold) 
        } 
        .type(ButtonType.Capsule) 
        .margin({ top: 20 }) 
        .backgroundColor('#0D9FFB') 
        .width('40%') .height('5%')
        } 
    .width('100%') 
    }
 .height('100%') 
}

2.点击右边侧边栏，有个预览的按钮即可预览效果 image.png

3.构建第二个页面

一种是这种自己构建页面，需要手动配置路由，路由文件在entry > src > main > resources > base > profile的main_pages.json

image.png

另一种是右键创建页面，着这种就不需要配置路由了

image.png

新建元服务卡片

  1. 在“Project”窗口，在“entry”模块目录右键选择“New > Service Widget > Dynamic Widget”，

image.png 2. 进入卡片模板选择界面，如下图所示，我们选择一个空白模板第一个即可 image.png

3.配置卡片的信息 image.png

  • Service widget name：卡片的名称，在同一个应用/服务中，卡片名称不能重复，且只能包含大小写字母、数字和下划线。
  • Display name：卡片预览面板上显示的卡片名称。仅API 11 及以上Stage工程支持配置该字段。
  • Description：卡片的描述信息。
  • Language：界面开发语言，可选择创建ArkTS/JS卡片。说明
  • 元服务只支持ArkTS卡片，不支持JS卡片。
  • Support dimension：选择卡片的规格。部分卡片支持同时设置多种规格。首次创建服务卡片时，将默认生成一个EntryCard目录，用于存放卡片快照。
  • Default dimension：在下拉框中可选择默认的卡片。
  • Ability name：选择一个挂靠服务卡片的Form Ability，或者创建一个新的Form Ability。
  • Module name：卡片所属的模块。

4.创建完成后他会在这里生成对应的文件

image.png

  1. 点击执行预览就可以看到我们的卡片了

image.png

真机模拟器运行

具体可按照官网这个步骤执行

使用ArkUI

developer.huawei.com/consumer/cn…

avatar
文章
阅读
粉丝