IT评测·应用市场-qidao123.com

标题: HarmonyOS Next 简单上手元服务开发 [打印本页]

作者: 王海鱼 时间: 2024-12-18 04:10
标题: HarmonyOS Next 简单上手元服务开发
HarmonyOS Next 简单上手元服务开发

万物互联时代，人均持有装备量不停攀升，装备种类和使用场景更加多样，使得应用开发、应用入口变得更加复杂。在此背景下，应用提
供方和用户急迫必要一种新的服务提供方式，使应用开发更简单、服务（如听音乐、打车等）的获取和使用更便捷。为此，HarmonyOS
除支持传统的必要安装的应用（以下简称传统应用）外，还支持更加方便快捷的免安装的应用，即元服务。
元服务是HarmonyOS提供的一种轻量应用程序形态，具备秒开直达，纯净清新；服务相伴，恰适时宜；即用即走，账号相随；一体两
面，嵌入运行；原生智能，全域搜刮；高效开发，生而可信等特征。
元服务可独立上架、分发、运行，独立实现业务闭环，可大幅提拔信息与服务的获取效率。
元服务和应用的的区别

元服务开发旅程

在AGC平台上新建一个项目

链接
一个项目可以多个应用

AGC新建一个元服务应用

新建一个本地元服务项目

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

修改元服务名称

修改元服务图标

紧张，上架审核很严谨

先本身下载随意一张图片
使用画图工具图像属性修改 1024px
使用开发工具中 Image Asset 来制作图片

新增元服务卡片

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

元服务开发中收到的限定

每一个包巨细不能高出2M

元服务项目总巨细一样平常是10M，特别环境可以申请20M

服务卡片最多16张

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

服务卡片不能使用call变乱

AtomicServiceTabs

实现tab切换和标题设置

// Index.ets
import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI';
@Entry
@Component
struct Index {
@State message: string = '首页';
@State currentIndex: number = 0;
@Builder
tabContent1() {
Column().width('100%').height('100%').alignItems(HorizontalAlign.Center).backgroundColor('#00CB87')
}
@Builder
tabContent2() {
Column().width('100%').height('100%').backgroundColor('#007DFF')
}
@Builder
tabContent3() {
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

路由管理

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();
@Builder
navigationContent() {
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: NavPathStack
aboutToAppear() {
const param = this.pathStack.getParamByName("HomeView").pop() as IParam
promptAction.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组件参考、设置业务域名
根本使用

新建了组件WebHome 用来显示 AtomicServiceWeb容器
- 1. import { AtomicServiceWeb, AtomicServiceWebController } from '@ohos.atomicservice.AtomicServiceWeb'
  3. @Entry
  4. @Component
  5. export struct WebHome {
  6. @State
  7. ascontroller: AtomicServiceWebController = new AtomicServiceWebController()
  9. build() {
  10. NavDestination() {
  11. Column() {
  12. AtomicServiceWeb({ src: $rawfile("index.html"), controller: this.ascontroller })
  13. .width("100%")
  14. .height("100%")
  15. }
  16. .width("100%")
  17. .height("100%")
  18. .justifyContent(FlexAlign.Center)
  19. }
  20. }
  21. }
  复制代码
新建h5页面 index.html
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>Document</title>
7. <style>
8. body{
9. background-color: red;
10. }
11. </style>
12. </head>
13. <body>
15. </body>
16. </html>
复制代码
在Index 添加了添加跳转到 WebHome
WebHome 使用 AtomicServiceWeb 容器显示内容