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

作者：星释

2024-12-26
浙江
本文字数：1899 字
阅读完需：约 6 分钟

影院热映

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

简介

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

设计

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

代码

查看 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)

复制代码

common 目录存放一些全局变量，如 Constants.ets 文件，这里使用静态变量。另外还有请求类的简单封装，同样使用静态类作为单例。

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

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

@Componentexport 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' })    })  }}```

复制代码

quickactions/pages/QuickActionCard.ets 为服务卡片的页面，这里描述了卡片的 UI，通过 Formlink 监听和触发点击事件

 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 个模型，分别是 AppInfo，Celebrities, Movie, Photos, Relative.

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

复制代码

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