HarmonyOS Next 简单上手元服务开发

HarmonyOS Next 简单上手元服务开发

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

元服务开发旅程

在AGC平台上新建一个项目

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

AGC新建一个元服务应用

新建一个本地元服务项目

---

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

修改元服务名称

修改元服务图标

紧张，上架审核很严谨

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

新增元服务卡片

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

元服务开发中收到的限定

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

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

服务卡片最多16张

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

服务卡片不能使用call变乱

AtomicServiceTabs

实现tab切换和标题设置

1. // Index.ets
2. import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI';
4. @Entry
5. @Component
6. struct Index {
7.   @State message: string = '首页';
8.   @State currentIndex: number = 0;
10.   @Builder
11.   tabContent1() {
12.     Column().width('100%').height('100%').alignItems(HorizontalAlign.Center).backgroundColor('#00CB87')
13.   }
15.   @Builder
16.   tabContent2() {
17.     Column().width('100%').height('100%').backgroundColor('#007DFF')
18.   }
20.   @Builder
21.   tabContent3() {
22.     Column().width('100%').height('100%').backgroundColor('#FFBF00')
23.   }
25.   build() {
26.     Stack() {
27.       AtomicServiceTabs({
28.         tabContents: [
29.           () => {
30.             this.tabContent1()
31.           },
32.           () => {
33.             this.tabContent2()
34.           },
35.           () => {
36.             this.tabContent3()
37.           }
38.         ],
39.         tabBarOptionsArray: [
40.           new TabBarOptions($r('sys.media.ohos_ic_public_phone'), '绿色', Color.Black, Color.Blue),
41.           new TabBarOptions($r('sys.media.ohos_ic_public_location'), '蓝色', Color.Black, Color.Blue),
42.           new TabBarOptions($r('sys.media.ohos_ic_public_more'), '黄色', Color.Black, Color.Blue)
43.         ],
44.         tabBarPosition: TabBarPosition.BOTTOM,
45.         barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'),
47.       })
49.     }.height('100%')
50.   }
51. }

复制代码

AtomicServiceNavigation

路由管理

Index

1. // Index.ets
2. import {
3.   AtomicServiceNavigation,
4.   NavDestinationBuilder,
5.   AtomicServiceTabs,
6.   TabBarOptions,
7.   TabBarPosition
8. } from '@kit.ArkUI';
9. import { HomeView } from '../views/HomeView';
11. export interface IParam {
12.   id: number
13. }
15. @Entry
16. @Component
17. struct Index {
18.   @StorageProp("safeTop")
19.   safeTop: number = 0
20.   @StorageProp("safeBottom")
21.   safeBottom: number = 0
22.   @State message: string = '主题';
23.   // 页面跳转
24.   @Provide("pathStack")
25.   pathStack: NavPathStack = new NavPathStack();
27.   @Builder
28.   navigationContent() {
29.     Button("内容")
30.       .onClick(() => {
31.         const param: IParam = { id: 100 }
32.         this.pathStack.pushPathByName("HomeView", param)
33.       })
34.   }
36.   @Builder
37.   // 路由页面映射的  以前 navNavigation 修改配置文件！！！
38.   pageMap(name: string) {
39.     if (name === 'HomeView') {
40.       HomeView()
41.     }
42.   }
44.   build() {
45.     Row() {
46.       Column() {
47.         // navNavigation 类似
48.         AtomicServiceNavigation({
49.           // 容器内直接显示的内容
50.           navigationContent: () => {
51.             this.navigationContent()
52.           },
53.           // 标题！！
54.           title: this.message,
55.           //
56.           titleOptions: {
57.             backgroundColor: '#fff',
58.             isBlurEnabled: false
59.           },
60.           // 路由页面映射
61.           navDestinationBuilder: this.pageMap,
62.           navPathStack: this.pathStack,
63.           mode: NavigationMode.Stack
64.         })
65.       }
66.       .width('100%')
67.     }
68.     .height('100%')
69.     .padding({
70.       top: this.safeTop,
71.       bottom: this.safeBottom
72.     })
73.   }
74. }

复制代码

HomeView

1. import { IParam } from "../pages/Index"
2. import { promptAction } from "@kit.ArkUI"
4. @Component
5. export struct HomeView {
6.   @Consume("pathStack")
7.   pathStack: NavPathStack
9.   aboutToAppear() {
10.     const param = this.pathStack.getParamByName("HomeView").pop() as IParam
11.     promptAction.showToast({ message: `${param.id}` })
12.   }
14.   build() {
15.     NavDestination() {
16.       Column() {
17.         Text("homeView")
18.           .fontSize(50)
19.       }
20.       .width("100%")
21.       .height("100%")
22.       .justifyContent(FlexAlign.Center)
23.     }
24.   }
25. }

复制代码

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>
  14.   
  15. </body>
  16. </html>

  复制代码
• 在Index 添加了添加跳转到 WebHome
  
  
  
  
• WebHome 使用 AtomicServiceWeb 容器显示内容
  
  
  
  

鸿蒙页面传递数据到h5页面

通过 src属性传递

h5页面吸收和处理

h5页面调用元服务方法

html中，如果必要调用元服务API，可集成元服务JS SDK，调用相干API进行访问
安装

1. npm install @atomicservice/asweb-sdk

复制代码

使用方法

es6

1. import has from '@atomicservice/asweb-sdk';has.asWeb.getEnv({  callback: (err, res) => {  }});

复制代码

umd

1. <script src="../dist/asweb-sdk.umd.js"></script><script>  has.asWeb.getEnv({    callback: (err, res) => {    }  });</script>

复制代码

更多方法

元服务发送网络请求

• 申请权限 在AGC平台上 把请求的域名填写到 白名单中 - 上线必须要做
  
  
  
  
• 在手机-设置-体系-应用-元服务豁免管控 打开 - 开发阶段也能发送请求
         模仿器不受限定
  

总结

元服务上架

待续。。。

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