元服务
万物互联时代，人均持有设备量不断攀升，设备种类和使用场景更加多样，使得应用开发、应用入口变得更加复杂。在此背景下，应用提
供方和用户迫切需要一种新的服务提供方式，使应用开发更简单、服务（如听音乐、打车等）的获取和使用更便捷。为此，HarmonyOS
除支持传统的需要安装的应用（以下简称传统应用）外，还支持更加方便快捷的免安装的应用，即元服务。
元服务是 HarmonyOS 提供的一种轻量应用程序形态，具备秒开直达，纯净清爽；服务相伴，恰合时宜；即用即走，账号相随；一体两
面，嵌入运行；原生智能，全域搜索；高效开发，生而可信等特征。
元服务可独立上架、分发、运行，独立实现业务闭环，可大幅提升信息与服务的获取效率。
元服务和应用的的区别
元服务开发旅程
在 AGC 平台上新建一个项目
一个项目可以多个应用
AGC 新建一个元服务应用
新建一个本地元服务项目
如果成功在 AGC 平台上新建过元服务，那么这里会自动显示
修改元服务名称
修改元服务图标
重要，上架审核很严谨
先自己下载随意一张图片
使用画图工具 图像属性 修改 1024px
使用开发工具中 Image Asset 来制作图片
新增元服务卡片
Win 模拟器 不支持新增元服务的卡片
新建卡片
元服务开发中收到的限制
每一个包大小不能超过 2M
元服务项目总大小 一般是 10M，特殊情况可以申请 20M
服务卡片最多 16 张
服务卡片不能随意通过卡片跳转其他其他应用或者元服务
服务卡片不能使用 call 事件
AtomicServiceTabs
typescript
// 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
typescript
// 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
typescript
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容器
- JavaScript
import { AtomicServiceWeb, AtomicServiceWebController } from '@ohos.atomicservice.AtomicServiceWeb' @Entry @Component export struct WebHome { @State ascontroller: 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) } } }
新建 h5 页面 index.html
html<!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>在 Index 添加了添加跳转到 WebHome
WebHome 使用 AtomicServiceWeb 容器显示内容
鸿蒙页面传递数据到 h5 页面
通过 src 属性传递
h5 页面接收和处理
h5 页面调用元服务方法
html 中，如果需要调用元服务 API，可集成元服务 JS SDK，调用相关 API 进行访问
安装
npm install @atomicservice/asweb-sdk使用方法
es6
typescript
import has from "@atomicservice/asweb-sdk";
has.asWeb.getEnv({ callback: (err, res) => {} });umd
xml
<script src="../dist/asweb-sdk.umd.js"></script><script> has.asWeb.getEnv({ callback: (err, res) => { } });</script>更多方法
元服务发送网络请求
申请权限 在 AGC 平台上 把请求的域名填写到 白名单中 - 上线必须要做
在手机-设置-系统-应用-元服务豁免管控 打开 - 开发阶段也能发送请求
模拟器不受限制
总结
