HarmonyOS Next 简单上手元服务开发

万物互联时代,人均持有设备量不断攀升,设备种类和使用场景更加多样,使得应用开发、应用入口变得更加复杂。在此背景下,应用提

供方和用户迫切需要一种新的服务提供方式,使应用开发更简单、服务(如听音乐、打车等)的获取和使用更便捷。为此,HarmonyOS

除支持传统的需要安装的应用(以下简称传统应用)外,还支持更加方便快捷的免安装的应用,即元服务。

元服务是HarmonyOS提供的一种轻量应用程序形态,具备秒开直达,纯净清爽;服务相伴,恰合时宜;即用即走,账号相随;一体两

面,嵌入运行;原生智能,全域搜索;高效开发,生而可信等特征。

元服务可独立上架、分发、运行,独立实现业务闭环,可大幅提升信息与服务的获取效率。

元服务和应用的的区别

image-20241124191141178

元服务开发旅程

image-20241124191156792

在AGC平台上新建一个项目

链接

一个项目可以多个应用

image-20241124191241104

AGC新建一个元服务应用

image-20241124191300505

新建一个本地元服务项目

image-20241124191643071


如果成功在AGC平台上新建过元服务,那么这里会自动显示

image-20241124191744693

修改元服务名称

image-20241124191327227

修改元服务图标

重要,上架审核很严谨

image-20241124191343134

  1. 先自己下载随意一张图片

  2. 使用画图工具 图像属性 修改 1024px

    PixPin_2024-11-24_19-15-16

  3. 使用开发工具中 Image Asset 来制作图片

image-20241124191814129

image-20241124192132959

新增元服务卡片

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

新建卡片

image-20241124192208171

image-20241124192221915

元服务开发中收到的限制

每一个包大小不能超过2M

image-20241124192250939

元服务项目总大小 一般是10M,特殊情况可以申请20M

服务卡片最多16张

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

服务卡片不能使用call事件

AtomicServiceTabs

实现tab切换和标题设置

image-20241124192911325

// 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

路由管理

PixPin_2024-11-24_19-32-52

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后续将不再支持registerJavaScriptProxyrunJavaScript等接口。若需要Web组件加载的网页中调用元服务原生页面

的对象方法,可通过JS SDK提供的接口获取相关数据。若JS SDK接口无法满足需求,还可通过传参的方式,元服务原生页面执行对象方法

后获取结果,将结果传递给Web组件加载的网页中。

在元服务内,仅能使用AtomicServiceWeb组件显示Web页面,且需要配置业务域名。

请参考:AtomicServiceWeb组件参考配置业务域名

基本使用

  1. 新建了组件WebHome 用来显示 AtomicServiceWeb容器

    1. 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)
          }
        }
      }
      
  2. 新建h5页面 index.html

    image-20241124193502932

    <!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>
    
  3. 在Index 添加了添加跳转到 WebHome

    image-20241124193524156

  4. WebHome 使用 AtomicServiceWeb 容器显示内容

    PixPin_2024-11-24_19-40-02

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

通过 src属性传递

image-20241124194101296

h5页面接收和处理

image-20241124194121169

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>

更多方法

image-20241124194443319

元服务发送网络请求

  1. 申请权限 在AGC平台上 把请求的域名填写到 白名单中 - 上线必须要做

    image-20241124194529204

  2. 在手机-设置-系统-应用-元服务豁免管控 打开 - 开发阶段也能发送请求

    模拟器不受限制

总结

image-20241124194617678

作者

作者:万少

链接:https://link.juejin.cn/?target=https%3A%2F%2Fwww.nutpi.net%2F

來源:坚果派 著作权归作者所有。

商业转载请联系作者获得授权,非商业转载请注明出处。

元服务上架

待续。。。

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐