HarmonyOS Next 简单上手元服务开发

embedded/2024/11/25 20:25:58/

HarmonyOS Next 简单上手元服务开发

万物互联时代，人均持有设备量不断攀升，设备种类和使用场景更加多样，使得应用开发、应用入口变得更加复杂。在此背景下，应用提

供方和用户迫切需要一种新的服务提供方式，使应用开发更简单、服务（如听音乐、打车等）的获取和使用更便捷。为此，HarmonyOS

除支持传统的需要安装的应用（以下简称传统应用）外，还支持更加方便快捷的免安装的应用，即元服务。

元服务是HarmonyOS提供的一种轻量应用程序形态，具备秒开直达，纯净清爽；服务相伴，恰合时宜；即用即走，账号相随；一体两

面，嵌入运行；原生智能，全域搜索；高效开发，生而可信等特征。

元服务可独立上架、分发、运行，独立实现业务闭环，可大幅提升信息与服务的获取效率。

元服务和应用的的区别

image-20241124191141178

元服务开发旅程

image-20241124191156792

在AGC平台上新建一个项目

链接

一个项目可以多个应用

image-20241124191241104

AGC新建一个元服务应用

image-20241124191300505

新建一个本地元服务项目

image-20241124191643071

如果成功在AGC平台上新建过元服务，那么这里会自动显示

image-20241124191744693

修改元服务名称

image-20241124191327227

修改元服务图标

重要，上架审核很严谨

image-20241124191343134

  1. 先自己下载随意一张图片

  2. 使用画图工具 图像属性 修改 1024px

    PixPin_2024-11-24_19-15-16

  3. 使用开发工具中 Image Asset 来制作图片

image-20241124191814129

image-20241124192132959

新增元服务卡片

Win模拟器 不支持新增元服务的卡片

新建卡片

image-20241124192208171

image-20241124192221915

元服务开发中收到的限制

每一个包大小不能超过2M

image-20241124192250939

元服务项目总大小 一般是10M，特殊情况可以申请20M

服务卡片最多16张

服务卡片不能随意通过卡片跳转其他其他应用或者元服务

服务卡片不能使用call事件

AtomicServiceTabs

实现tab切换和标题设置

image-20241124192911325

// Index.ets
import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI';@Entry
@Component
struct Index {@State message: string = '首页';@State currentIndex: number = 0;@BuildertabContent1() {Column().width('100%').height('100%').alignItems(HorizontalAlign.Center).backgroundColor('#00CB87')}@BuildertabContent2() {Column().width('100%').height('100%').backgroundColor('#007DFF')}@BuildertabContent3() {Column().width('100%').height('100%').backgroundColor('#FFBF00')}build() {Stack() {AtomicServiceTabs({tabContents: [() => {this.tabContent1()},() => {this.tabContent2()},() => {this.tabContent3()}],tabBarOptionsArray: [new TabBarOptions($r('sys.media.ohos_ic_public_phone'), '绿色', Color.Black, Color.Blue),new TabBarOptions($r('sys.media.ohos_ic_public_location'), '蓝色', Color.Black, Color.Blue),new TabBarOptions($r('sys.media.ohos_ic_public_more'), '黄色', Color.Black, Color.Blue)],tabBarPosition: TabBarPosition.BOTTOM,barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'),})}.height('100%')}
}

AtomicServiceNavigation

路由管理

PixPin_2024-11-24_19-32-52

Index

// Index.ets
import {AtomicServiceNavigation,NavDestinationBuilder,AtomicServiceTabs,TabBarOptions,TabBarPosition
} from '@kit.ArkUI';
import { HomeView } from '../views/HomeView';export interface IParam {id: number
}@Entry
@Component
struct Index {@StorageProp("safeTop")safeTop: number = 0@StorageProp("safeBottom")safeBottom: number = 0@State message: string = '主题';// 页面跳转@Provide("pathStack")pathStack: NavPathStack = new NavPathStack();@BuildernavigationContent() {Button("内容").onClick(() => {const param: IParam = { id: 100 }this.pathStack.pushPathByName("HomeView", param)})}@Builder// 路由页面映射的  以前 navNavigation 修改配置文件！！！pageMap(name: string) {if (name === 'HomeView') {HomeView()}}build() {Row() {Column() {// navNavigation 类似AtomicServiceNavigation({// 容器内直接显示的内容navigationContent: () => {this.navigationContent()},// 标题！！title: this.message,//titleOptions: {backgroundColor: '#fff',isBlurEnabled: false},// 路由页面映射navDestinationBuilder: this.pageMap,navPathStack: this.pathStack,mode: NavigationMode.Stack})}.width('100%')}.height('100%').padding({top: this.safeTop,bottom: this.safeBottom})}
}

HomeView

import { IParam } from "../pages/Index"
import { promptAction } from "@kit.ArkUI"@Component
export struct HomeView {@Consume("pathStack")pathStack: NavPathStackaboutToAppear() {const param = this.pathStack.getParamByName("HomeView").pop() as IParampromptAction.showToast({ message: `${param.id}` })}build() {NavDestination() {Column() {Text("homeView").fontSize(50)}.width("100%").height("100%").justifyContent(FlexAlign.Center)}}
}

AtomicServiceWeb

为开发者提供满足定制化诉求的Web高阶组件，屏蔽原生Web组件中无需关注的接口，并提供JS扩展能力

AtomicServiceWeb后续将不再支持registerJavaScriptProxy、runJavaScript等接口。若需要Web组件加载的网页中调用元服务原生页面

的对象方法，可通过JS SDK提供的接口获取相关数据。若JS SDK接口无法满足需求，还可通过传参的方式，元服务原生页面执行对象方法

后获取结果，将结果传递给Web组件加载的网页中。

在元服务内，仅能使用AtomicServiceWeb组件显示Web页面，且需要配置业务域名。

请参考：AtomicServiceWeb组件参考、配置业务域名

基本使用

  1. 新建了组件WebHome 用来显示 AtomicServiceWeb容器

    1. import { AtomicServiceWeb, AtomicServiceWebController } from '@ohos.atomicservice.AtomicServiceWeb'@Entry
@Component
export struct WebHome {@Stateascontroller: AtomicServiceWebController = new AtomicServiceWebController()build() {NavDestination() {Column() {AtomicServiceWeb({ src: $rawfile("index.html"), controller: this.ascontroller }).width("100%").height("100%")}.width("100%").height("100%").justifyContent(FlexAlign.Center)}}
}

  2. 新建h5页面 index.html

    image-20241124193502932

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color: red;}</style>
</head>
<body></body>
</html>

  3. 在Index 添加了添加跳转到 WebHome

    image-20241124193524156

  4. WebHome 使用 AtomicServiceWeb 容器显示内容

    PixPin_2024-11-24_19-40-02

鸿蒙页面传递数据到h5页面

通过 src属性传递

image-20241124194101296

h5页面接收和处理

image-20241124194121169

h5页面调用元服务方法

html中，如果需要调用元服务API，可集成元服务JS SDK，调用相关API进行访问

安装

npm install @atomicservice/asweb-sdk

使用方法

es6

import has from '@atomicservice/asweb-sdk';has.asWeb.getEnv({  callback: (err, res) => {  }});

umd

<script src="../dist/asweb-sdk.umd.js"></script><script>  has.asWeb.getEnv({    callback: (err, res) => {    }  });</script>

更多方法

image-20241124194443319

元服务发送网络请求

  1. 申请权限 在AGC平台上 把请求的域名填写到 白名单中 - 上线必须要做

    image-20241124194529204

  2. 在手机-设置-系统-应用-元服务豁免管控 打开 - 开发阶段也能发送请求

    模拟器不受限制

总结

image-20241124194617678

作者

作者：万少

链接：www.nutpi.net/

來源：坚果派 著作权归作者所有。

商业转载请联系作者获得授权，非商业转载请注明出处。

元服务上架

待续。。。


http://www.ppmy.cn/embedded/140477.html

相关文章

oracle的静态注册和动态注册

oracle的静态注册和动态注册

oracle的静态注册和动态注册 静态注册&#xff1a; 静态注册 : 指将实例的相关信息手动告知 listener 侦 听 器 &#xff0c; 可以使用netmgr,netca,oem 以及直接 vi listener.ora 文件来实现静态注册&#xff0c;在动态注册不稳定时使用&#xff0c;特点是&#xff1a;稳定&…
阅读更多...
【TEST】Apache JMeter + Influxdb + Grafana

【TEST】Apache JMeter + Influxdb + Grafana

介绍 使用Jmeter发起测试&#xff0c;测试结果存入Influxdb&#xff0c;Grafana展示你的测试结果。 环境 windows 10docker desktopJDK17 安装 Apache JMeter 访问官网&#xff08;Apache JMeter - Apache JMeter™&#xff09;下载JMeter&#xff08;目前最新版本5.6.3&a…
阅读更多...
企业OA管理系统：Spring Boot技术实现与案例研究

企业OA管理系统：Spring Boot技术实现与案例研究

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了企业OA管理系统的开发全过程。通过分析企业OA管理系统管理的不足&#xff0c;创建了一个计算机管理企业OA管理系统的方案。文章介绍了企业OA管理系统的系统分析部…
阅读更多...
数据库MYSQL——表的设计

数据库MYSQL——表的设计

文章目录 前言三大范式&#xff1a;几种实体间的关系&#xff1a;一对一关系&#xff1a;一对多关系&#xff1a;多对多关系&#xff1a; 前言 之前的博客中我们讲解的是关于数据库的增删改查与约束的基本操作&#xff0c; 是在已经创建数据库&#xff0c;表之上的操作。 在实…
阅读更多...
初识mysql数据库

初识mysql数据库

文章目录 一、概述二、SQL的优点三、SQL的分类四、 数据库分类五、 总结 一、概述 SQL&#xff08;Structured Query Language&#xff09;是一种用于管理和操作关系数据库的标准计算机语言。它由IBM公司在1970年代开发&#xff0c;并随着时间的推移逐渐成为数据库管理系统的核…
阅读更多...
RK3588适配MTK7921 USB接口WiFi驱动开发

RK3588适配MTK7921 USB接口WiFi驱动开发

在当前RK原厂提供的SDK里面已经适配的WiFi模组有不少，但是支持的模组大部分集中在realtek、正基、英飞凌等厂家。主要型号有Realtek的RTL8188系列、RTL8723系列、RTL8812系列、RTL8821系列、RTL8822系列和支持WiFi 6 的RTL8852系列，正基的AP6275系列、AP6276系列等。接下来将…
阅读更多...
城电科技|太阳能折叠灯：点亮你的便捷之光

城电科技|太阳能折叠灯：点亮你的便捷之光

朋友们&#xff0c;今天要给你们介绍一款能让生活变得更加美好的神器 —— 太阳能折叠灯&#xff01; 【超便捷折叠设计】 它就像一个百变精灵&#xff0c;轻松折叠起来后小巧玲珑。可以随意塞进背包的缝隙&#xff0c;或者放在车载储物箱里&#xff0c;完全不占地方&#xff…
阅读更多...
JAVA中的Lamda表达式

JAVA中的Lamda表达式

JAVA中的Lamda表达式 Lambda 表达式的语法使用场景示例代码1.代替匿名内部类2. 带参数的 Lambda 表达式3. 与集合框架结合使用4. 使用 Stream 操作 总结 Java 的 Lambda 表达式是 Java 8 引入的一个新特性&#xff0c;用于简化代码&#xff0c;特别是在处理函数式编程时。Lambd…
阅读更多...
最新文章

Copyright @ 2022~2023