1. 涉及到的技术点
- 路由router的使用
- router如何跳转传值
- axios的使用
2.官方文档指南
- router的使用:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-routing-V5
- axios的使用:鸿蒙HarmonyOS NEXT入门,使用axios获取网络影片数据(四)
3. demo具体代码实现
- 在第四集中,通过axios实现了首页的影票列表数据:鸿蒙HarmonyOS NEXT入门,使用axios获取网络影片数据(四)
- 在这个基础上把列表加一个点击事件跳转到详情,如下图所示:
router的简单使用,带参数跳转
router.pushUrl({
url: 'pages/MovieDetailsPage',
params:item
})
在router.pushUrl中,增加params字段,用来传递参数,可以传递一个对象,也可以传递一个stirng类型字段
- MovieDetailsPage 影片详情页
import { router } from '@kit.ArkUI';
import axios, { AxiosError, AxiosResponse } from '@ohos/axios';
import { MovieDetailsInfo } from '../entity/MovieDetailsInfo';
import { MovieInfoItem } from '../entity/MovieInfo';
@Entry
@Component
struct MovieDetailsPage {
@State params: MovieInfoItem | null = null
@State movieDetailsInfo: MovieDetailsInfo = {
r: 0,
subject: null
}
//主演
@State actors: string = ''
//类型
@State types: string = ''
aboutToAppear(): void {
//获取跳转传值
this.params = router.getParams() as MovieInfoItem
//获取影片详情数据
this.getMovieDetail()
}
/**
* 获取影片详情数据
*/
getMovieDetail() {
axios<string, AxiosResponse<string>, null>({
method: "get",
url: 'https://movie.douban.com/j/subject_abstract',
params: {
subject_id: this.params?.id
}
}).then((res: AxiosResponse) => {
this.movieDetailsInfo = res.data
//拼接主演信息
let result: string = ''
this.movieDetailsInfo.subject?.actors.forEach((item: string, index: number) => {
result += item + "/"
})
this.actors = result.substring(0, result.length - 1)
//拼接电影类型信息
let result2: string = ''
this.movieDetailsInfo.subject?.types.forEach((item: string, index: number) => {
result2 += item + "/"
})
this.types = result2.substring(0, result2.length - 1)
}).catch((error: AxiosError) => {
console.error(error.message);
})
}
build() {
Column() {
Row() {
Image($r('app.media.img_back')).width(26).onClick(() => {
router.back()
})
//标题栏
Text('电影详情')
.fontSize(21)
.fontWeight(600)
}
.width('100%')
RelativeContainer() {
//背景色
Column() {
}
.height(180)
.linearGradient({
angle: 90,
colors: [[0x724451, 0.2], [0x392f59, 1], [0x392f59, 0.5]]
})
.alignRules({
left: { anchor: '__container__', align: HorizontalAlign.Start },
right: { anchor: '__container__', align: HorizontalAlign.End }
})
.id('rel1')
Row() {
//图片
Row() {
Image(this.params?.cover)
.width(150)
.height(188)
.padding(8)
}
.height(188)
.backgroundColor(Color.White)
.margin(10)
.id('rel2')
Column() {
Text(this.params?.title).fontSize(20).fontColor(Color.White).fontWeight(500)
Text(this.types).fontColor(Color.White).margin({ top: 10 }).fontSize(13)
Text(`${this.movieDetailsInfo.subject?.region} / ${this.movieDetailsInfo.subject?.duration}`).fontSize(13)
.fontColor(Color.White)
.margin({ top: 10 })
Text(`主演 ${this.actors}`)
.fontColor(Color.White)
.margin({ top: 6 })
.textOverflow({
overflow: TextOverflow.Clip
})
.maxLines(2)
.fontSize(12)
.lineHeight(18)
Row() {
Text(this.params?.rate).fontSize(30).fontColor('#ffb400').margin({ top: 10 })
Text('分').padding({ bottom: 4, left: 2 }).fontColor(Color.White)
}.alignItems(VerticalAlign.Bottom)
}
.margin({ top: 16 })
.alignItems(HorizontalAlign.Start)
}.alignItems(VerticalAlign.Top)
}.height(210)
.width('100%')
.margin({ top: 16 })
Row() {
}.backgroundColor('#f5f5f5').width('100%').height(10)
Column() {
Row() {
Image($r('app.media.img_avatar')).width(24)
Text(this.movieDetailsInfo.subject?.short_comment?.author).fontColor('#999').fontSize(12).margin({ left: 10 })
}.width('100%')
Text(this.movieDetailsInfo.subject?.short_comment?.content)
.width('100%')
.fontSize(12)
.lineHeight(20)
.fontColor('#666')
}.margin(10)
Blank()
Row() {
Button('立即购票', { type: ButtonType.Normal })
.backgroundColor('#e22418')
.borderRadius(4)
.width('100%')
.onClick(() => {
router.pushUrl({
url: 'pages/CinemaListPage',
params:{
movie_title:this.params?.title
}
})
})
}
.width('100%')
.padding(20)
}
.height('100%')
.width('100%')
}
}
1. 在aboutToAppear()生命函数中,通过router.getParams()来获取跳转传值
2. 在aboutToAppear()生命函数中,调用getMovieDetail()来获取影片详情
- 数据实体MovieDetailsInfo,SubjectDTO,CommentInfo
在项目ets下新建entity文件夹,存放数据实体类,如下图所示:
export class MovieDetailsInfo {
r: number = 0
subject: SubjectDTO | null = null
}
export class SubjectDTO {
episodes_count: string = ''
duration: string = ''
region: string = ''
actors: Array<string> = []
types: Array<string> = []
short_comment: CommentInfo | null = null
}
export class CommentInfo {
content: string = ''
author: string = ''
}