鸿蒙原生开发手记:04-一个完整元服务案例

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
注册配置 MSE Nacos/ZooKeeper,118元/月
云原生网关 MSE Higress,422元/月
简介: 鸿蒙原生开发手记:04-一个完整元服务案例

影院热映

分享一个完整的元服务案例,这个案例高仿了豆瓣的小程序。

简介

整个元服务分为 4-5 个页面,首页为列表页,展示了当前影院热门的电影,点开是一个详情介绍页,里面有影片详情,演职表,相关影片推荐等,热门海报。打开海报是一个完整的海报展示页,点开可以产看大图。
另外,还有一个关于我们的介绍页。

设计

元服务没有使用底部页签,而是把关于我们放置在了页面底部,以较为委婉的方式进行展示。

代码

  1. 查看 entry/src/main/etc/pages/ 目录,整个应用分为了四个页面。
    其路由在 entry/src/main/resources/base/profile/main_pages.json 中配置,路由名与文件名一一对应。
    main_pages.json 所在地目录中,可以看到一个 form_config.json文件,这个用来配置服务卡片,在此按下不表。

页面中多使用行列布局,各种间距优先使用 Blank() 来指定。

在 Album 页面中,使用了网格布局,点击其中一张图片时,会播放幻灯片,这里使用了 @lyb/media-preview 三方库,以下是核心代码:

Grid() {
    ForEach(this.items, (item: Photo, index: number) => {
      GridItem() {
        Image(item.image.normal.url)
          .width('100%')
          .height(140)
          .objectFit(ImageFit.Cover)
          .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 1.1 })
          .visibility(index == this.index ? Visibility.Hidden : Visibility.Visible)
          .onClick((event) => {
            this.options
              .setInitIndex(index)
              .setMedias(this.getPreviewResources())
              .setIndicator(false)
            MediaPreview.open(this.getUIContext(), this.options)
          })
      }
    })
  }
  .columnsTemplate('1fr 1fr 1fr')
  .columnsGap(2)
  .rowsGap(2)
  .scrollBar(BarState.Off)
  1. common 目录存放一些全局变量,如 Constants.ets 文件,这里使用静态变量。另外还有请求类的简单封装,同样使用静态类作为单例。

为了让导入代码更简洁,同时也 “高内聚低耦合”,使用了 index 文件来导出这个目录下得类和方法。

Request 中的方法使用了泛型,这样可以根据传人类型自动反序列化,减少了样板代码量。

  1. components 组件目录。这里存放各封装的小组件。本案例中包含了演职表、版权声明,海报列表,以及相关推荐共 4 个小组件。

Copyright 是一个简单的小组件,显示在页脚。

@Component
export struct Copyright {
  build() {
    Row() {
      Image($r('app.media.nutpi')).width(32)
      Blank().width(8)
      Text('坚果派出品').fontWeight(FontWeight.Bold).fontColor(Color.Gray)
    }.justifyContent(FlexAlign.Center)
    .width('100%')
    .onClick((event) => {
      router.pushUrl({ url: 'pages/About' })
    })
  }
}
4. `quickactions/pages/QuickActionCard.ets` 为服务卡片的页面,这里描述了卡片的 UI,通过 Formlink 监听和触发点击事件

```ets
 FormLink({
      action: this.ACTION_TYPE,
      abilityName: this.ABILITY_NAME,
      params: {
        action: this.MESSAGE
      }
    }) {
      Row() {
        Text('影院热映').fontSize(14)
          .fontColor($r('app.color.card_label'))
        Image($r('app.media.icon'))
          .width(32)
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .height(this.FULL_HEIGHT_PERCENT)
      .width('100%')
      .padding({
        top: 10,
        left: 12,
        right: 12,
        bottom: 10
      })
      .backgroundColor($r('app.color.background_color'))
    }

在上面的代码中,描述了一个行布局,左侧为图标,右侧为应用名称。

5.viewmodels 为视图数据模型。本案例共 5 个模型,分别是 AppInfoCelebrities, Movie, Photos, Relative.

export class AppInfo {
  logo: string = '';
  appName: string = '';
  appLinking: string = '';
  appId: string = '';
  desc: string = '';
  type: string = '';
}

AppInfo 是一个简单的应用信息类,包含 logo,应用名称,applink,描述和应用类型等信息。

应用截图

首页 我的 帮助
1.jpeg img2.jpg img3.jpg
img4.jpg img5.jpg

注意事项

  1. 打开元服务豁免管控:系统-开发者选项-开发中元服务豁免管控

其他

关于应用创建、服务卡片、打包签名、上架审核等,可以查看往期文章,或下方的参考资料。

完整代码

完整的代码见代码仓库
https://gitee.com/zacks/arkts-ohos-demo

参考资料

目录
相关文章
|
2月前
|
开发框架 人工智能 安全
鸿蒙HarmonyOS应用开发 | 「鸿蒙技术分享」HarmonyOS NEXT元服务卡片实战体验
HarmonyOS NEXT的发布对华为及整个行业都产生了深远的影响。它不仅展示了华为的技术实力,还敏锐地把握了市场需求。同时,吸引了更多的开发者和合作伙伴加入鸿蒙生态体系,共同推动鸿蒙生态的繁荣发展。
278 20
鸿蒙HarmonyOS应用开发 | 「鸿蒙技术分享」HarmonyOS NEXT元服务卡片实战体验
|
2月前
|
存储 JSON 数据库
鸿蒙元服务项目实战:备忘录内容编辑开发
富文本内容编辑我们直接使用RichEditor组件即可,最重要的就是参数,value: RichEditorOptions,通过它,我们可以用来设置样式,和获取最后的富文本内容,这一点是很重要的。
鸿蒙元服务项目实战:备忘录内容编辑开发
|
2月前
|
存储 开发者 API
鸿蒙元服务项目实战:备忘录UI页面开发
UI页面绘制没什么好说的,就是组件的位置摆放,和组件的显示逻辑,有很多的属性并没有文章记录,大家可以去仓库中查看即可,文章中用到了我的一个标题栏组件,如果大家不想用,可以使用自己写的即可。
鸿蒙元服务项目实战:备忘录UI页面开发
|
2月前
|
存储 API
鸿蒙元服务项目实战:终结篇之备忘录搜索功能实现
开发元服务,有很多的限制性因素,比如包的大小限制,相关API限制,所以,我们在实际开发的时候,具体Api能否使用,还需要去官网查看一下,目前,针对当前这个小项目,总结了几个小问题,大家在开发的过程中可以作为参考。
鸿蒙元服务项目实战:终结篇之备忘录搜索功能实现
|
2月前
|
存储 数据库
鸿蒙元服务项目实战:备忘录实现列表展示
前两章的内容,我们已经实现了UI还有编辑页面的所有的逻辑,这篇文章,我们着重概述下列表展示,毕竟有数据了,如何分列并且友好的展示出来,这是最重要的,毕竟每一个备忘录都需要一个指定的入口。
鸿蒙元服务项目实战:备忘录实现列表展示
|
2月前
|
搜索推荐 小程序 物联网
基于HarmonyOS 5.0的元服务:技术架构、应用场景与未来发展【探讨】
鸿蒙OS 5.0推出的元服务(Super Service)是一种创新的服务架构,旨在提供无缝的跨设备体验。它具备无感知启动、跨设备共享和智能推送等特点,适用于智能家居、车载系统、即时通讯等场景。与传统应用及微信小程序相比,元服务更轻量、跨平台能力强,且无需下载安装。未来,元服务将通过AI增强智能化,并扩展到更多行业,如智慧医疗、智能零售等,推动物联网和智慧城市的发展。然而,其发展仍面临平台依赖、隐私安全等挑战。
419 4
基于HarmonyOS 5.0的元服务:技术架构、应用场景与未来发展【探讨】
|
3月前
|
小程序 测试技术 API
鸿蒙原生开发手记:03-元服务开发全流程(开发元服务,只需要看这一篇文章)
本文详细介绍元服务的开发及上架全流程,涵盖元服务的特点、创建项目、服务卡片、签名打包、开发测试及上架审核等环节,帮助开发者轻松掌握从零开始开发并发布元服务的全过程。元服务以其轻量、免安装、易于使用等特点,成为未来服务提供的重要形式。
156 13
鸿蒙原生开发手记:03-元服务开发全流程(开发元服务,只需要看这一篇文章)
|
3月前
|
JSON JavaScript 前端开发
harmony-chatroom 自研纯血鸿蒙OS Next 5.0聊天APP实战案例
HarmonyOS-Chat是一个基于纯血鸿蒙OS Next5.0 API12实战开发的聊天应用程序。这个项目使用了ArkUI和ArkTS技术栈,实现了类似微信的消息UI布局、输入框光标处插入文字、emoji表情图片/GIF动图、图片预览、红包、语音/位置UI、长按语音面板等功能。
275 2
|
3月前
|
Dart 小程序 API
鸿蒙原生开发手记:01-元服务开发
元服务是鸿蒙系统中的一种轻量级应用形态,无需下载即可直接运行,类似于微信小程序但更轻量。使用原生开发,性能和体验更优。创建元服务需使用 DevEco 工具,支持深色模式和服务卡片功能,开发测试和上架流程详见相关文档。
170 0
鸿蒙原生开发手记:01-元服务开发
|
4月前
一大波女生、男生适用的最新鸿蒙练手案例来袭
一大波女生、男生适用的最新鸿蒙练手案例来袭
69 0
一大波女生、男生适用的最新鸿蒙练手案例来袭