鸿蒙HarmonyOS NEXT入门，使用router跳转传值实现影片详情（八）_harmony next 参数跳转

1. 涉及到的技术点

1. 路由router的使用
2. router如何跳转传值
3. axios的使用

2.官方文档指南

1. router的使用：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-routing-V5
2. axios的使用：鸿蒙HarmonyOS NEXT入门，使用axios获取网络影片数据（四）

3. demo具体代码实现

1. 在第四集中，通过axios实现了首页的影票列表数据：鸿蒙HarmonyOS NEXT入门，使用axios获取网络影片数据（四）
2. 在这个基础上把列表加一个点击事件跳转到详情，如下图所示：

router的简单使用，带参数跳转

 router.pushUrl({
                  url: 'pages/MovieDetailsPage',
                  params:item
                })
1
2
3
4

在router.pushUrl中，增加params字段，用来传递参数，可以传递一个对象，也可以传递一个stirng类型字段

3. 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182

1. 在aboutToAppear()生命函数中，通过router.getParams()来获取跳转传值
2. 在aboutToAppear()生命函数中，调用getMovieDetail()来获取影片详情

4. 数据实体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 = ''
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4.运行效果图