基于HarmonyOS Next的休闲娱乐应用开发实战

一、项目规划与核心功能

我们将打造一款影乐时光应用，专为休闲娱乐场景设计，包含以下功能：

影院热映电影轮播展示
沉浸式电影详情页（含预告片播放）
个性化收藏系统
影院位置地图导航
动态主题切换

二、核心技术实现

1. 电影海报轮播（ArkTS + Swiper）

// components/MovieCarousel.ets
@Component
struct MovieBanner {
  @Prop movieData: Movie // 接收电影数据
  
  build() {
    Stack() {
      // 电影海报
      Image(this.movieData.poster)
        .width('100%')
        .height(200)
        .objectFit(ImageFit.Cover)
      
      // 电影标题层
      Column() {
        Text(this.movieData.title)
          .fontSize(20)
          .fontColor(Color.White)
          .margin({ bottom: 8 })
        
        // 评分标签
        Row() {
          Image($r('app.media.ic_star'))
            .width(16)
          Text(this.movieData.rating.toString())
            .fontColor('#FFC107')
        }
      }
      .alignItems(HorizontalAlign.Start)
      .padding(16)
      .position({ x: 0, y: 140 })
    }
  }
}

@Entry
@Component
struct HomePage {
  @State currentIndex: number = 0
  @State movieList: Movie[] = [
    { id: 1, title: '星际探索', rating: 8.5, poster: $r('app.media.movie1') },
    { id: 2, title: '时光旅人', rating: 7.9, poster: $r('app.media.movie2') }
  ]

  build() {
    Column() {
      // 轮播图区域
      Swiper() {
        ForEach(this.movieList, (movie: Movie) => {
          MovieBanner({ movieData: movie })
            .onClick(() => this.navigateToDetail(movie.id))
        })
      }
      .autoPlay(true) // 自动播放
      .interval(3000) // 3秒切换
      .indicator(true) // 显示指示点
      .onChange(index => this.currentIndex = index)
    }
  }

  private navigateToDetail(movieId: number) {
    // 跳转到详情页实现
  }
}

2. 影院地图导航（Geolocation + MapKit）

// pages/CinemaMap.ets
import geolocation from **********'
import mapkit from **********'

@Entry
@Component
struct CinemaMapPage {
  @State currentLocation: Location = { latitude: 0, longitude: 0 }
  @State cinemas: Cinema[] = [
    { id: 1, name: '万达影城', location: { latitude: 39.9042, longitude: 116.4074 } }
  ]

  aboutToAppear() {
    // 获取用户当前位置
    geolocation.getCurrentLocation((err, data) => {
      if (!err) {
        this.currentLocation = {
          latitude: data.latitude,
          longitude: data.longitude
        }
      }
    })
  }

  build() {
    Column() {
      // 地图容器
      Map() {
        // 用户位置标记
        MapMarker({ coordinate: this.currentLocation })
          .icon($r('app.media.ic_my_location'))
        
        // 影院位置标记
        ForEach(this.cinemas, (cinema: Cinema) => {
          MapMarker({
            coordinate: cinema.location,
            title: cinema.name
          })
          .onClick(() => this.showCinemaDetail(cinema))
        })
      }
      .width('100%')
      .height('80%')
    }
  }

  private showCinemaDetail(cinema: Cinema) {
    // 显示影院详情弹窗
  }
}

3. 电影收藏功能（Preferences + 数据绑定）

// utils/FavoriteManager.ets
import preferences from **********'

const FAV_KEY = 'user_favorites'

export async function toggleFavorite(movieId: number) {
  const favorites = await getFavorites()
  const newFavorites = favorites.includes(movieId)
    ? favorites.filter(id => id !== movieId)
    : [...favorites, movieId]
  
  saveFavorites(newFavorites)
  return newFavorites
}

async function saveFavorites(ids: number[]) {
  const prefs = await preferences.getPreferences(globalThis.context, 'movieData')
  await prefs.put(FAV_KEY, JSON.stringify(ids))
  await prefs.flush()
}

export async function getFavorites(): Promise<number[]> {
  const prefs = await preferences.getPreferences(globalThis.context, 'movieData')
  const data = await prefs.get(FAV_KEY, '[]')
  return JSON.parse(data as string)
}

// 在详情页使用
@Component
struct FavoriteButton {
  private movieId: number
  @State isFavorite: boolean = false

  aboutToAppear() {
    this.movieId = router.getParams()?.['id']
    getFavorites().then(ids => {
      this.isFavorite = ids.includes(this.movieId)
    })
  }

  build() {
    Button(this.isFavorite ? '已收藏' : '收藏')
      .icon(this.isFavorite ? $r('app.media.ic_favorite_filled') : $r('app.media.ic_favorite'))
      .onClick(async () => {
        this.isFavorite = !this.isFavorite
        await toggleFavorite(this.movieId)
      })
  }
}

4. 视频预览功能（Video组件）

// components/MovieTrailer.ets
@Component
struct TrailerPlayer {
  @Prop videoUrl: string
  @State isPlaying: boolean = false

  build() {
    Column() {
      Video({
        src: this.videoUrl,
        currentProgress: 0,
        controller: VideoController
      })
      .width('100%')
      .height(200)
      .autoPlay(false)
      .controls(true)
      
      // 自定义播放按钮
      Button(this.isPlaying ? '暂停' : '播放')
        .onClick(() => {
          this.isPlaying = !this.isPlaying
          VideoController.start() // 控制视频播放
        })
    }
  }
}

三、AppGallery Connect集成

1. 云端电影数据同步

// services/MovieService.ets
import agconnect from '@hw-agconnect/api'
import '@hw-agconnect/cloud'

export class MovieService {
  // 获取热映电影
  static async getNowPlaying(): Promise<Movie[]> {
    try {
      const result = await agconnect.cloud().callFunction({
        name: 'getMovies',
        params: { type: 'now_playing' }
      })
      return result.getValue()?.data || []
    } catch (err) {
      console.error('云端数据获取失败')
      return []
    }
  }
  
  // 提交用户评论
  static async submitComment(movieId: number, content: string) {
    await agconnect.cloud().callFunction({
      name: 'addComment',
      params: { movieId, content }
    })
  }
}

2. 用户认证服务

// utils/AuthUtil.ets
import agconnect from '@hw-agconnect/api'
import '@hw-agconnect/auth'

export async function loginWithEmail(email: string, password: string) {
  try {
    const user = await agconnect.auth().signIn(email, password)
    console.info('登录成功:', user.uid)
    return true
  } catch (err) {
    console.error('登录失败:', err.message)
    return false
  }
}

export async function getCurrentUser() {
  return agconnect.auth().currentUser
}

四、界面优化技巧

骨架屏加载效果

// 列表加载状态
if (this.isLoading) {
  ForEach([1,2,3], (item) => {
    SkeletonView()
      .height(120)
      .margin({ bottom: 10 })
  })
} else {
  // 实际内容
}

交互动画实现

Button('查看详情')
  .onClick(() => {
    animateTo({
      duration: 300,
      curve: Curve.EaseOut
    }, () => {
      this.cardScale = 0.95 // 点击缩放效果
    })
  })

主题动态切换

// 全局主题控制器
@StorageProp('isDarkMode') isDarkMode: boolean

build() {
  Column() {
    // 内容区域
  }
  .backgroundColor(this.isDarkMode ? '#1A1A1A' : '#FFFFFF')
}