影院热映
分享一个完整的元服务案例，这个案例高仿了豆瓣的小程序。
简介
整个元服务分为 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 文件来导出这个目录下得类和方法。
Request 中的方法使用了泛型，这样可以根据传人类型自动反序列化，减少了样板代码量。
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 个模型，分别是 AppInfo，Celebrities, Movie, Photos, Relative.
export class AppInfo {
logo: string = '';
appName: string = '';
appLinking: string = '';
appId: string = '';
desc: string = '';
type: string = '';
}
AppInfo 是一个简单的应用信息类，包含 logo，应用名称，applink，描述和应用类型等信息。
应用截图
| 首页 | 我的 | 帮助 |
|---|---|---|
 |
 |
 |
 |
 |
注意事项
- 打开元服务豁免管控：系统-开发者选项-开发中元服务豁免管控
其他
关于应用创建、服务卡片、打包签名、上架审核等，可以查看往期文章，或下方的参考资料。
完整代码
完整的代码见代码仓库
https://gitee.com/zacks/arkts-ohos-demo
