鸿蒙HarmonyOS NEXT开发，使用router跳转传值实现影片详情（八）

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
                })

在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. 在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 = ''
}

4.运行效果图