HarmonyOS Next 简单上手元服务开发

news/2024/11/27 2:59:47/

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/news/1550217.html

相关文章

MySQL基础大全（看这一篇足够！！！）

MySQL基础大全（看这一篇足够！！！）

文章目录 前言一、初识MySQL1.1 数据库基础1.2 数据库技术构成1.2.1 数据库系统1.2.2 SQL语言1.2.3 数据库访问接口 1.3 什么是MySQL 二、数据库的基本操作2.1 数据库创建和删除2.2 数据库存储引擎2.2.1 MySQL存储引擎简介2.2.2 InnoDB存储引擎2.2.3 MyISAM存储引擎2.2.4 存储引…
阅读更多...
vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗

vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗

在与main.ts同级下的plugins文件夹&#xff08;如果没有&#xff0c;新建一个&#xff09;下建一个element.js文件&#xff08;名字随便取&#xff09; element.js文件内容如下&#xff1a; import ElementPlus from element-plus export default (app) > {console.log(app…
阅读更多...
【Axure高保真原型】或和且条件

【Axure高保真原型】或和且条件

今天和大家分享或和且条件案例的原型模板&#xff0c;效果包括&#xff1a; 可以选择指标、等式和填写对应值构成条件等式&#xff1b; 点击添加条件按钮&#xff0c;可以增加一行新的条件&#xff1b; 点击所在行的号按钮&#xff0c;可以在该行下方添加一行新的条件&#x…
阅读更多...
H.265流媒体播放器EasyPlayer.js网页全终端安防视频流媒体播放器可以播放本地视频吗

H.265流媒体播放器EasyPlayer.js网页全终端安防视频流媒体播放器可以播放本地视频吗

H.264/H.265播放器EasyPlayer.js主要用于在网页上实现视频播放功能&#xff0c;特别是针对RTSP流的播放。它允许开发者在不需要安装额外插件或软件的情况下&#xff0c;直接在网页中嵌入和播放来自监控摄像头或其他RTSP源的视频流。 可以播放本地视频吗&#xff1f; 回答&…
阅读更多...
SpringBoot技术打造智能考勤平台

SpringBoot技术打造智能考勤平台

第1章 绪论 1.1 项目背景及意义 企业内部工作人员每天当中的出勤记录能够看出员工对于工作的积极性和工作是否高效。这种方式比较困难但是也在持续的前进&#xff0c;以前的通过人工记录出勤的企业工作人员工作时态度应用的方法并不正确&#xff0c;不但是这些不利之处&#xf…
阅读更多...
GoF设计模式——结构型设计模式分析与应用

GoF设计模式——结构型设计模式分析与应用

文章目录 UML图的结构主要表现为&#xff1a;继承&#xff08;抽象&#xff09;、关联 、组合或聚合 的三种关系。1. 继承&#xff08;抽象&#xff0c;泛化关系&#xff09;2. 关联3. 组合/聚合各种可能的配合&#xff1a;1. 关联后抽象2. 关联的集合3. 组合接口4. 递归聚合接…
阅读更多...
SpringBoot（9）-Dubbo+Zookeeper

SpringBoot（9）-Dubbo+Zookeeper

目录 一、了解分布式系统 二、RPC 三、Dubbo 四、SpringBootDubboZookeeper 4.1 框架搭建 4.2 实现RPC 一、了解分布式系统 分布式系统&#xff1a;由一组通过网络进行通信&#xff0c;为了完成共同的任务而协调工作的计算机节点组成的系统 二、RPC RPC&#xff1a;远程…
阅读更多...
如果在docker 容器中安装ros遇到的问题

如果在docker 容器中安装ros遇到的问题

1.在容器内部无法修改时间&#xff0c;需要在宿主机外边修改时钟。修改时钟&#xff1a; hwclock --systohc或者执行 date -s "2024-11-24 19:25:10"2.容器内部内置有opencv4.5版本&#xff0c;需要卸载&#xff0c;重新安装4.2.0版本。记录折腾好久的卸载过程。 …
阅读更多...
最新文章

Copyright @ 2022~2023