HarmonyOS Native Development Notes: 04-A Complete Meta-Service Case

#harmonyos #harmony

Cinema Hot Screening

Share a complete meta-service case, which is a high imitation of Douban's mini program.

Introduction

The entire meta-service is divided into 4-5 pages. The homepage is a list page, which shows the popular movies in the current theater. Clicking it is a detailed introduction page, which contains movie details, cast list, related movie recommendations, and popular posters. Opening the poster is a complete poster display page, and you can click it to see a large picture.
In addition, there is an introduction page about us.

Design

The meta-service does not use the bottom tab, but places the about us at the bottom of the page, showing it in a more euphemistic way.

Code

Check the entry/src/main/etc/pages/ directory, and the entire application is divided into four pages. Its routes are configured in entry/src/main/resources/base/profile/main_pages.json, and the route name corresponds to the file name one by one. In the directory where main_pages.json is located, you can see a form_config.json file, which is used to configure the service card. I will not discuss it here.

The page mostly uses row and column layout, and various spacings are specified by using Blank() first.

In the Album page, a grid layout is used. When you click on one of the images, a slideshow will be played. The @lyb/media-preview third-party library is used here. The following is the core code:

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)

The common directory stores some global variables, such as the Constants.ets file, where static variables are used. There is also a simple encapsulation of the request class, which also uses a static class as a singleton.

In order to make the import code more concise and "high cohesion and low coupling", an index file is used to export the classes and methods in this directory.

The methods in Request use generics, so that they can be automatically deserialized according to the passed type, reducing the amount of boilerplate code.

components component directory. This is where the encapsulated widgets are stored. This case contains 4 widgets: cast list, copyright statement, poster list, and related recommendations.

Copyright is a simple widget that is displayed in the footer.

@Component
export struct Copyright {
build() {
Row() {
Image($r('app.media.nutpi')).width(32)
Blank().width(8)
Text('Nutpi').fontWeight(FontWeight.Bold).fontColor(Color.Gray)
}.justifyContent(FlexAlign.Center)
.width('100%')
.onClick((event) => {
router.pushUrl({ url: 'pages/About' })
})
}
}```

quickactions/pages/QuickActionCard.ets is the page for serving cards. Here, the UI of the card is described. Click events are monitored and triggered through Formlink


typescript
FormLink({
action: this.ACTION_TYPE,
abilityName: this.ABILITY_NAME,
params: {
action: this.MESSAGE
}
}) {
Row() {
Text('Hot Movies in Theaters').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'))
}

In the above code, a row layout is described, with an icon on the left and the application name on the right.

5.viewmodels is the view data model. This case has 5 models, namely AppInfo, Celebrities, Movie, Photos, Relative.


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

AppInfo is a simple application information class, including logo, application name, applink, description and application type.