HarmonyOS Next 简单上手元服务开发
万物互联时代，人均持有设备量不断攀升，设备种类和使用场景更加多样，使得应用开发、应用入口变得更加复杂。在此背景下，应用提
供方和用户迫切需要一种新的服务提供方式，使应用开发更简单、服务（如听音乐、打车等）的获取和使用更便捷。为此，HarmonyOS
除支持传统的需要安装的应用（以下简称传统应用）外，还支持更加方便快捷的免安装的应用，即元服务。
元服务是HarmonyOS提供的一种轻量应用程序形态，具备秒开直达，纯净清爽；服务相伴，恰合时宜；即用即走，账号相随；一体两
面，嵌入运行；原生智能，全域搜索；高效开发，生而可信等特征。
元服务可独立上架、分发、运行，独立实现业务闭环，可大幅提升信息与服务的获取效率。
元服务和应用的的区别
元服务开发旅程
在AGC平台上新建一个项目
一个项目可以多个应用
AGC新建一个元服务应用
新建一个本地元服务项目
如果成功在AGC平台上新建过元服务，那么这里会自动显示
修改元服务名称
修改元服务图标
重要，上架审核很严谨
-
先自己下载随意一张图片
-
使用画图工具 图像属性 修改 1024px
-
使用开发工具中 Image Asset 来制作图片
新增元服务卡片
Win模拟器 不支持新增元服务的卡片
新建卡片
元服务开发中收到的限制
每一个包大小不能超过2M
元服务项目总大小 一般是10M，特殊情况可以申请20M
服务卡片最多16张
服务卡片不能随意通过卡片跳转其他其他应用或者元服务
服务卡片不能使用call事件
AtomicServiceTabs
// 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容器
-
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
<!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
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>
更多方法
元服务发送网络请求
-
申请权限 在AGC平台上 把请求的域名填写到 白名单中 - 上线必须要做
-
在手机-设置-系统-应用-元服务豁免管控 打开 - 开发阶段也能发送请求
模拟器不受限制
总结
