HarmonyOS实战—影视类卡片应用

HarmonyOS实战

影视类卡片应用实战

在前面，博主详细介绍了HarmonyOS原子化服务的优点，通过卡片式操作，我们可以快速找到我们想要的功能模块。

而在实际的用户体验中，比如影视类用户，有这么一群人，他们只关注最近的影视剧，而不在乎以前的影视剧。

这种情况下，普通的视频应用功能太过多，往往并不方便这些用户的查找。我们可以通过原子化服务创建一个近一个月的影视剧服务，来满足这群用户。

这样，用户在鸿蒙手机上打开卡片就能快速浏览近一个月的视频，而不必去搜索框打字找寻，或者翻页查找，大大方便了用户的体验效果。（顺便去掉广告哦）

那么，今天博主就通过原子化服务开发一个影视剧类的App服务。

swiper选项卡推荐功能

首先，对于大多数的影视剧App来说，其顶部都有一个swiper组件，也就是自动浏览推荐窗口，推荐大家视频。

所以，我们需要通过swiper组件来实现影视剧的推荐。index.hml代码如下：

<div class="container">
    <swiper class="swiper" id="swiper" index="{
    { swiper_index }}" indicator="true" duration="1000" autoplay="true" loop="true">
        <div for="{
    {responseData.vipList}}" onclick="swiper_onClick({
    {$item}})" data="{
    {$item}}">
            <image class="swiper_image" src="{
    {$item.img_url}}"/>
            <text class="swiper_text">{
  {$item.title}}</text>
        </div>
    </swiper>
</div>

其中，有3个数据需要注意：

数据	意义
responseData.vipList	网络获取的JSON数据（下面会介绍网络数据的获取）
swiper_onClick	用户点击肯定是需要观看视频的，这是一个点击事件跳转到视频详情页面
autoplay与loop	自动循环播放swiper推荐

运行之后，显示的效果如下：

网络数据请求

在鸿蒙开发中，网络数据请求非常简单，主要会用到@system.fetch模块。所以在Js文件中，进行网络请求时，先导入该模块。（index.js）

import fetch from '@system.fetch';
export default {
   
    data: {
   
        title: "",
        url: "https://liyuanjing-1300376177.cos.ap-shanghai.myqcloud.com/viptopmodel.json",
        responseData: '正在加载中',
        swiper_index: 0,
    },
    //界面初始化网络JSON数据获取
    fetch: function () {
   
        var that = this;
        fetch.fetch({
   
            url: that.url,
            success: function (response) {
   
                console.info("网络请求成功");
                that.responseData = JSON.parse(response.data);
                console.info(that.responseData.vipList[0].title);
            },
            fail: function () {
   
                console.info("网络请求错误");
            }
        });
    },
    onInit() {
   
        this.fetch();
    }
}

如上面代码所示，获取网络数据的主要方法是fetch()。而因为界面首先肯定需要数据，所以必须在onInit()方法中就开始调用。

页面路由

当用户点击了swiper组件中的一个图片之后，肯定会跳转到该图片对应的视频，那么我们就需要用到鸿蒙页面路由的相关知识。示例如下（index.js）：

import router from '@system.router';
export default {
   
	//路由跳转
    jump_router:function(item){
   
        router.push({
   
            uri: 'pages/index/playvideo/playvideo',
            params: {
   
                data1: encodeURIComponent(item.img_url),
                data2: encodeURIComponent(item.mp4_url),
                data3: encodeURIComponent(item.title),
            },
        });
    },
}

如上面代码所示，我们通过router.push()进行路由的跳转。当然，这里也要用到路由跳转的模块，需要先导入。

同时，因为我们的视频播放组件<video>需要2个基本的参数，也就是视频链接与视频显示的封面图，所以我们需要传递3个数据：标题，图片链接，视频链接。

标题是跳转路由详情页面需要用到的数据，并不是<video>的数据，但同样也需要。

不过，我们这里并没有跳转路由，因为swiper组件的点击事件是swiper_onClick()，我们需要通过该函数来跳转路由。代码如下：

export default {
   
	//滑动模块点击事件
    swiper_onClick: function (item) {
   
        this.jump_router(item);
    },
}

这里，之所以把跳转路由的代码独立出来，是为了减少代码的冗余，后面的list列表以及grid网格都是上面的路由跳转代码。

list列表横向视频推荐

接着，我们需要实现横向的list视频列表。读者可以自行随便打开一个影视类App，下面跟着的是不是一个横向的视频推荐模块呢？具体效果如下：

在鸿蒙原子化服务开发中，也提供了list列表组件。我们可以直接通过它来实现该样式与功能。代码如下所示(index.hml)：

<div class="container">
	<!--上面的swiper代码-->
	<div style="flex-direction: row;height: 40px;">
        <text class="divi_text">猜你会追 ></