# 鸿蒙原生应用demo

**Repository Path**: zacks/arkts-ohos-demo

## Basic Information

- **Project Name**: 鸿蒙原生应用demo
- **Description**: 影院热映 demo。一个完整的元服务案例，这个案例高仿了豆瓣的小程序。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2024-12-07
- **Last Updated**: 2025-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 影院热映

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

## 简介

整个元服务分为 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` 三方库，以下是核心代码：

```ets
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)

```

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

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

`Request` 中的方法使用了泛型，这样可以根据传人类型自动反序列化，减少了样板代码量。
3. `components` 组件目录。这里存放各封装的小组件。本案例中包含了演职表、版权声明，海报列表，以及相关推荐共 4 个小组件。


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

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

```ets
export class AppInfo {
  logo: string = '';
  appName: string = '';
  appLinking: string = '';
  appId: string = '';
  desc: string = '';
  type: string = '';
}
```
`AppInfo` 是一个简单的应用信息类，包含 logo，应用名称，applink，描述和应用类型等信息。

## 应用截图

| 首页 | 我的 | 帮助 |
| ----------- | ----------- | ----------- |
| <img src="./.screenshot/img-1.jpg" width="200"> | <img src="./.screenshot/img-2.jpg" width="200"> | <img src="./.screenshot/img-3.jpg" width="200"> |
| <img src="./.screenshot/img-4.jpg" width="200"> | <img src="./.screenshot/img-5.jpg" width="200"> | |



## 注意事项

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


## 其他

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

## 完整代码

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

## 参考资料

- [鸿蒙原生开发手记：01-元服务开发](https://gitee.com/zacks/awesome-harmonyos-flutter/blob/master/%E9%B8%BF%E8%92%99%E5%8E%9F%E7%94%9F%E5%BC%80%E5%8F%91/%E9%B8%BF%E8%92%99%E5%8E%9F%E7%94%9F%E5%BC%80%E5%8F%91%E6%89%8B%E8%AE%B0%EF%BC%9A01-%E5%85%83%E6%9C%8D%E5%8A%A1%E5%BC%80%E5%8F%91.md)
- [鸿蒙原生开发手记：02-服务卡片开发](https://gitee.com/zacks/awesome-harmonyos-flutter/blob/master/%E9%B8%BF%E8%92%99%E5%8E%9F%E7%94%9F%E5%BC%80%E5%8F%91/%E9%B8%BF%E8%92%99%E5%8E%9F%E7%94%9F%E5%BC%80%E5%8F%91%E6%89%8B%E8%AE%B0%EF%BC%9A02-%E6%9C%8D%E5%8A%A1%E5%8D%A1%E7%89%87%E5%BC%80%E5%8F%91.md)
- [鸿蒙原生开发手记：03-元服务开发全流程](https://gitee.com/zacks/awesome-harmonyos-flutter/blob/master/%E9%B8%BF%E8%92%99%E5%8E%9F%E7%94%9F%E5%BC%80%E5%8F%91/%E9%B8%BF%E8%92%99%E5%8E%9F%E7%94%9F%E5%BC%80%E5%8F%91%E6%89%8B%E8%AE%B0%EF%BC%9A03-%E5%85%83%E6%9C%8D%E5%8A%A1%E5%BC%80%E5%8F%91%E5%85%A8%E6%B5%81%E7%A8%8B.md)
- [鸿蒙应用打包上架流程](https://gitee.com/zacks/awesome-harmonyos-flutter/blob/master/%E9%B8%BF%E8%92%99%20Flutter%20%E5%AE%9E%E6%88%98/%E9%B8%BF%E8%92%99Flutter%E5%AE%9E%E6%88%98%EF%BC%9A13-%E9%B8%BF%E8%92%99%E5%BA%94%E7%94%A8%E6%89%93%E5%8C%85%E4%B8%8A%E6%9E%B6%E6%B5%81%E7%A8%8B.md)