论坛 › 鸿蒙 › HarmonyOS Next 简单上手元服务开发

王海鱼 发表于 2024-12-18 04:10:45

HarmonyOS Next 简单上手元服务开发

HarmonyOS Next 简单上手元服务开发

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

https://img-blog.csdnimg.cn/img_convert/cb2a6b6d33ff3a4dbfc8344bbf5a5bb1.png
元服务开发旅程

https://img-blog.csdnimg.cn/img_convert/431253efc4e2c37c9c007b9c5e15e7c1.png
在AGC平台上新建一个项目

链接
一个项目可以多个应用
https://img-blog.csdnimg.cn/img_convert/b353921c3881321c0001ac4771ec5de2.png
AGC新建一个元服务应用

https://img-blog.csdnimg.cn/img_convert/64fbeedc0f78d213f28494a18338839a.png
新建一个本地元服务项目

https://img-blog.csdnimg.cn/img_convert/c08e9f36ecb6f49479b00c5b99223296.png
如果乐成在AGC平台上新建过元服务，那么这里会主动显示
https://img-blog.csdnimg.cn/img_convert/f1878794a643454787059d08a99fdc8a.png
修改元服务名称

https://img-blog.csdnimg.cn/img_convert/2da0837c63ff24bf86ce5a0072c24a00.png
修改元服务图标

紧张，上架审核很严谨
https://img-blog.csdnimg.cn/img_convert/360ed4ae6419143ae50783f9458c7977.png

[*] 先本身下载随意一张图片
[*] 使用画图工具 图像属性 修改 1024px
https://img-blog.csdnimg.cn/img_convert/de85914a3df9d563ca7237fc24aa3692.gif
[*] 使用开发工具中 Image Asset 来制作图片
https://img-blog.csdnimg.cn/img_convert/863a84ec65d0cd14f54f4f54ffea4c85.png
https://img-blog.csdnimg.cn/img_convert/acc0f421b0afaf74ee564a380457b014.png
新增元服务卡片

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

https://img-blog.csdnimg.cn/img_convert/c56e3ed53f6d03c5766ea19e842c331d.png
https://img-blog.csdnimg.cn/img_convert/de9e0f1287b16c7ff79d83c75124b5ae.png
元服务开发中收到的限定

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

https://img-blog.csdnimg.cn/img_convert/53c757a7deb089ab66f70889104fb8a6.png
元服务项目总巨细 一样平常是10M，特别环境可以申请20M

服务卡片最多16张

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

服务卡片不能使用call变乱

AtomicServiceTabs

实现tab切换和标题设置
https://img-blog.csdnimg.cn/img_convert/f2fa6085533320981b2010ac881259c0.png
// 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

路由管理
https://img-blog.csdnimg.cn/img_convert/14cd67a487b3b625579be1dbc993a7a2.gif
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
https://img-blog.csdnimg.cn/img_convert/f684c285baa9d5ad43520953d382e754.png
<!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
https://img-blog.csdnimg.cn/img_convert/f9eddf7e47108aef73ff0e52ba88ac1d.png
[*] WebHome 使用 AtomicServiceWeb 容器显示内容
https://img-blog.csdnimg.cn/img_convert/9cca5d18e5bb2be36b7d1483c733548b.gif
鸿蒙页面传递数据到h5页面

通过 src属性传递
https://img-blog.csdnimg.cn/img_convert/ca3febc1138572efc9df3fb30ae2e3f4.png
h5页面吸收和处理

https://img-blog.csdnimg.cn/img_convert/35ec8ee0cf5a87db4421e166707624ea.png
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>
更多方法

https://img-blog.csdnimg.cn/img_convert/16e0e5eba00fd4da50d54758c9b5b438.png
元服务发送网络请求


[*] 申请权限 在AGC平台上 把请求的域名填写到 白名单中 - 上线必须要做
https://img-blog.csdnimg.cn/img_convert/2c55f7b30eb63d7dbbcc13a6bc6c0867.png
[*] 在手机-设置-体系-应用-元服务豁免管控 打开 - 开发阶段也能发送请求
       模仿器不受限定
总结

https://img-blog.csdnimg.cn/img_convert/23ff9a5ea1b0bf0d1ff09f91886485fa.png
元服务上架

待续。。。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

查看完整版本: HarmonyOS Next 简单上手元服务开发