HarmonyOS实战—影视类卡片应用

目录

• HarmonyOS实战
  
• 
  
  
  
  • 影视类卡片应用实战
    
  • 
    
    
    
    • swiper选项卡推荐功能
      
    • 网络数据请求
      
    • 页面路由
      
    • list列表横向视频推荐
      
    • grid网格视频推荐
      
    • 样式文件（index.css）
      
       
    
  • 视频播放页面
    
  • 
    
    
    
    • 页面（pagevideo.hml）
      
    • 用户交互（pagevideo.js）
      
    • 界面样式（pagevideo.css）
      
       
    
  • 其他设置
    
  
  

HarmonyOS实战

影视类卡片应用实战

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

而在实际的用户体验中，比如影视类用户，有这么一群人，他们只关注最近的影视剧，而不在乎以前的影视剧。
这种情况下，普通的视频应用功能太过多，往往并不方便这些用户的查找。我们可以通过原子化服务创建一个近一个月的影视剧服务，来满足这群用户。

这样，用户在鸿蒙手机上打开卡片就能快速浏览近一个月的视频，而不必去搜索框打字找寻，或者翻页查找，大大方便了用户的体验效果。（顺便去掉广告哦）
那么，今天博主就通过原子化服务开发一个影视剧类的App服务。
swiper选项卡推荐功能

首先，对于大多数的影视剧App来说，其顶部都有一个swiper组件，也就是自动浏览推荐窗口，推荐大家视频。
所以，我们需要通过swiper组件来实现影视剧的推荐。index.hml代码如下：

1.     <swiper class="swiper" id="swiper" index="{{ swiper_index }}" indicator="true" duration="1000" autoplay="true" loop="true">
2.         {responseData.vipList}}" onclick="swiper_onClick({{$item}})" data="{{$item}}">
3.             <image class="swiper_image" src="{{$item.img_url}}"/>
4.             <text class="swiper_text">{{$item.title}}</text>
5.         
6.     </swiper>

复制代码

其中，有3个数据需要注意：
数据意义responseData.vipList网络获取的JSON数据（下面会介绍网络数据的获取）swiper_onClick用户点击肯定是需要观看视频的，这是一个点击事件跳转到视频详情页面autoplay与loop自动循环播放swiper推荐运行之后，显示的效果如下：

网络数据请求

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

1. import fetch from '@system.fetch';
2. export default {
3.     data: {
4.         title: "",
5.         url: "https://liyuanjing-1300376177.cos.ap-shanghai.myqcloud.com/viptopmodel.json",
6.         responseData: '正在加载中',
7.         swiper_index: 0,
8.     },
9.     //界面初始化网络JSON数据获取
10.     fetch: function () {
11.         var that = this;
12.         fetch.fetch({
13.             url: that.url,
14.             success: function (response) {
15.                 console.info("网络请求成功");
16.                 that.responseData = JSON.parse(response.data);
17.                 console.info(that.responseData.vipList[0].title);
18.             },
19.             fail: function () {
20.                 console.info("网络请求错误");
21.             }
22.         });
23.     },
24.     onInit() {
25.         this.fetch();
26.     }
27. }

复制代码

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

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

1. import router from '@system.router';
2. export default {
3.         //路由跳转
4.     jump_router:function(item){
5.         router.push({
6.             uri: 'pages/index/playvideo/playvideo',
7.             params: {
8.                 data1: encodeURIComponent(item.img_url),
9.                 data2: encodeURIComponent(item.mp4_url),
10.                 data3: encodeURIComponent(item.title),
11.             },
12.         });
13.     },
14. }

复制代码

如上面代码所示，我们通过router.push()进行路由的跳转。当然，这里也要用到路由跳转的模块，需要先导入。
同时，因为我们的视频播放组件需要2个基本的参数，也就是视频链接与视频显示的封面图，所以我们需要传递3个数据：标题，图片链接，视频链接。
标题是跳转路由详情页面需要用到的数据，并不是的数据，但同样也需要。
不过，我们这里并没有跳转路由，因为swiper组件的点击事件是swiper_onClick()，我们需要通过该函数来跳转路由。代码如下：

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

复制代码

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

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

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

1.        
2.        
3.         <text class="divi_text">猜你会追 ></text>
4.         <marquee class="divi_marquee">精彩的内容等着你来寻找</marquee>
5.    
6.     <list class="list">
7.         <list-item id="listItem" for="{{responseData.vipList}}" class="list_item" onclick="list_item_onclick({{$item}})" data="{{$item}}">
8.             <image class="list_item_image" src="{{$item.img_url}}"/>
9.             <text class="list_item_text">{{$item.title}}</text>
10.         </list-item>
11.     </list>

复制代码

这里的list列表很好理解，基本上与swiper组件的代码类似。需要特别注意的是我们list列表上面还有一个模块。
也就是横排文字推荐，左边的只是一个文本，而右边是一个横向滚动的文本组件。
这里的list列表同样需要通过list_item_onclick()方法进行路由页面的跳转。具体的代码如下所示(index.js)：

1. export default {
2.         //list列表点击事件
3.     list_item_onclick:function(item){
4.         this.jump_router(item);
5.     },
6. }

复制代码

因为上面的路由代码已经写了，所以这里实现起来就比较简单了，只需要定义一个函数，通过jump_router()方法调用即可。
   这里list列表还是使用的同一样Json数据，但原理是一样的，如果你有其他的视频接口数据，可以自行改变网址。
  grid网格视频推荐

有木有发现，主流的视频App，其首页基本都是一样的。先来一个swiper组件，再是一个横向的list列表，接着就是一个grid网格视频推荐。
所以，我们这里需要实现鸿蒙系统的网格效果，鸿蒙原子化服务开发给我们提供的网格组件是：grid-container。示例如下(index.hml)：

1.        
2.        
3.         <text class="divi_text">重磅推荐 ></text>
4.         <marquee class="divi_marquee">精彩的内容等着你来寻找</marquee>
5.    
6.     <grid-container for="{{responseData.vipList}}" columns="3" style="margin-top: 10px;">
7.         <grid-row if="{{parseInt($item.uid)%2==0}}" class="grid-row">
8.             <grid-col class="grid-col" span="2" onclick="grid_onclick({{$item}})">
9.                 <image class="grid-col_image" src="{{$item.img_url}}"/>
10.                 <text class="grid-col_text">{{$item.title}}</text>
11.             </grid-col>
12.             <grid-col class="grid-col" span="2" onclick="grid_onclick({{$item}})">
13.                 <image class="grid-col_image" src="{{$item.img_url}}" />
14.                 <text class="grid-col_text">{{$item.title}}</text>
15.             </grid-col>
16.         </grid-row>
17.     </grid-container>

复制代码

运行之后，效果如下所示：

对于鸿蒙的网格组件grid-container，使用的同样是上面的JSON数据，它的点击事件是grid_onclick()方法。实现代码如下（index.js）：

1. export default {
2.         //网格点击事件
3.     grid_onclick:function(item){
4.         this.jump_router(item);
5.     },
6. }

复制代码

到这里，我们的影视类卡片应用的主页基本上都实现完成了。当然，对于视频类App来说，这整个页面都是可以下拉刷新的。
这会用到refresh组件，实现起来其实很简单，无非就是再调用一次fetch()函数获取一次新的json数据即可。（下次实战讲解，本篇内容有点多）
样式文件（index.css）

当然，上面那么多代码之所以搭配起来是前文显示的效果，多亏了css文件的样式调配。这里，我们就直接上代码了：

1. .container {
2.     flex-direction: column;
3.     margin: 10px;
4. }
6. .divi_text{
7.     position: absolute;
8.     font-size: 20px;
9.     margin-top: 10px;
10.     color: darkorange;
11.     margin-left: 10px;
12.     left: 0;
13. }
15. .divi_marquee{
16.     width: 130px;
17.     position: absolute;
18.     right: 0;
19.     font-size: 20px;
20.     color: darkorange;
21.     margin-top: 10px;
22. }
24. .list {
25.     font-size: 40px;
26.     height: 100px;
27.     color: #000000;
28.     opacity: 0.9;
29.     flex-direction: row;
30. }
32. .list_item{
33.     flex-direction: column;
34.     align-content: center;
35.     margin-top: 10px;
36.     margin-right: 10px;
37. }
39. .list_item_text{
40.     font-size: 15px;
41.     color: red;
42.     margin-top: 5px;
43.     align-content: center;
44. }
46. .list_item_image{
47.     width: 150px;
48.     height: 75px;
49.     border-radius:5px;
50. }
52. .swiper{
53.     height: 200px;
54.     indicator-bottom: 20px;
55.     indicator-right: 30px;
56.     indicator-color: #cf2411;
57.     indicator-size: 14px;
58. }
60. .swiper_image{
61.     width: 100%;
62.     border-radius:25px;
63. }
65. .swiper_text{
66.     position:absolute;
67.     margin-bottom: 20px;
68.     margin-left: 10px;
69.     font-size: 20px;
70.     color: darkturquoise;
71.     left:0;
72.     bottom:0;
73. }
75. .grid-row{
76.     height:100px;
77.     margin-left: -15px;
78. }
80. .grid-col{
81.     flex-direction: column;
82.     display: flex;
83.     margin-right: 10px;
84.     margin-left: -10px;
85. }
86. .grid-col_text{
87.     font-size: 15px;
88.     color: red;
89. }
90. .grid-col_image{
91.     width: 150px;
92.     height: 75px;
93.     border-radius:5px;
94. }

复制代码

视频播放页面

主页我们已经完全实现了。下面，需要实现点击这些视频展示图片跳转的视频播放页面。我们先来看看其最终的效果图：

页面（pagevideo.hml）

这里，我们先剖析一下这个界面有哪些东西？

• 顶部的视频播放组件：
  
• Vip会员橙色按钮：
  
• 图像金字塔以及视频的简介：标题、评分、vip、播放量以及简介。
  
• 点赞，喜欢，下载，搜藏：4个。
  
• 专辑列表：
  
• 其他推荐列表：
  

既然，我们已经分析出来了界面的布局，那么直接上代码即可。示例如下：

1.     <video id='videoId' src='{{ mp4_url }}' muted='false' autoplay='false' poster='{{ url }}' controls="true"
2.            onprepared='preparedCallback' onstart='startCallback' onpause='pauseCallback' onfinish='finishCallback'
3.            onerror='errorCallback' onseeking='seekingCallback' onseeked='seekedCallback'
4.            ontimeupdate='timeupdateCallback' style="object-fit : fill; width : 100%; height : 250px;"
5.            onlongpress='change_fullscreenchange' onclick="change_start_pause"/>
6.    
7.         <button class="vip_button">VIP会员低至30元每季度，618狂欢进行中</button>
8.         <text class="text_title">{{ title }}</text>
9.         
10.             <text class="div_row_text">7.5分</text>
11.             <image class="div_row_image" src="../../../common/images/vip.png"/>
12.             <text class="div_row_text">2333.3万次播放 · 简介 ></text>
13.         
14.         
15.             <image class="div_row2_image" src="../../../common/images/dianzan.png"/>
16.             
17.                 <image class="div_row2_image" src="../../../common/images/like.png"/>
18.                 <image class="div_row2_image" src="../../../common/images/download.png"/>
19.                 <image class="div_row2_image" src="../../../common/images/share.png"/>
20.             
21.         
22.         <text style="font-size : 15px; font-weight : bold;margin-top: 10px;">专辑列表</text>
23.         
24.             <list class="list" divider="true">
25.                 <list-item for="{{responseData.vipList}}" class="list_item">
26.                     <image class="list_image" src="{{$item.img_url}}"/>
27.                     <text class="list_title">{{$item.title}}</text>
28.                 </list-item>
29.             </list>
30.         
31.    

复制代码

用户交互（pagevideo.js）

从上面的界面中，我们除了返现各种搭配的组件之外。还可以明显看到，专辑列表的视频推荐是从网络获取的，视频的播放交互，需要JS操作。
而且，最重要的是我们从前面主页传递过来的参数，如何获取呢？代码如下所示：

1. import fetch from '@system.fetch';
2. import router from '@system.router';
4. export default {
5.     data: {
6.         title: 'World',
7.         url: "",
8.         mp4_url: "",
9.         event: '',
10.         seekingtime: '',
11.         timeupdatetime: '',
12.         seekedtime: '',
13.         isStart: true,
14.         isfullscreenchange: false,
15.         duration: '',
16.         responseData:'正在加载中',
17.     },
18.     seekingCallback: function (e) {
19.         this.seekingtime = e.currenttime;
20.     },
21.     timeupdateCallback: function (e) {
22.         this.timeupdatetime = e.currenttime;
23.     },
24.     change_start_pause: function () {
25.         if (this.isStart) {
26.             this.$element('vedioId').pause();
27.             this.isStart = false;
28.         } else {
29.             this.$element('vedioId').start();
30.             this.isStart = true;
31.         }
32.     },
33.     change_fullscreenchange: function () { //全屏
34.         if (!this.isfullscreenchange) {
35.             this.$element('videoId').requestFullscreen({
36.                 screenOrientation: 'default'
37.             });
38.             this.isfullscreenchange = true;
39.         } else {
40.             this.$element('vedioId').exitFullscreen();
41.             this.isfullscreenchange = false;
42.         }
43.     },
44.     fetch: function () {
45.         var that = this;
46.         fetch.fetch({
47.             url: 'https://liyuanjing-1300376177.cos.ap-shanghai.myqcloud.com/viptopmodel.json',
48.             success: function (response) {
49.                 console.info("网络请求成功");
50.                 that.responseData = JSON.parse(response.data);
51.                 console.info(that.responseData.vipList[0].title);
52.             },
53.             fail: function () {
54.                 console.info("网络请求错误");
55.             }
56.         });
57.     },
58.     onInit() {
59.         this.url = decodeURIComponent(this.data1);
60.         this.mp4_url = decodeURIComponent(this.data2);
61.         this.title= decodeURIComponent(this.data3);
62.         this.fetch();
63.     }
64. }

复制代码

可以发现，鸿蒙开发获取参数非常简单，你怎么传递的参数，就是什么名字，这里就不在赘述了。
界面样式（pagevideo.css）

最后，就是我们的视频播放页面的界面样式。示例代码如下所示：

1. .div_list {
2.     flex-direction: column;
3.     margin: 10px;
4. }
6. .div_row {
7.     flex-direction: row;
8.     margin-top: 5px;
9. }
11. .div_row_text {
12.     font-size: 10px;
13.     font-family: sans-serif;
14.     color: darkgrey;
15. }
17. .div_row_image {
18.     width: 20px;
19.     height: 20px;
20.     margin-left: 10px;
21.     margin-right: 10px;
22. }
24. .div_row2 {
25.     flex-direction: row;
26.     position: absolute;
27.     right: 0;
28. }
30. .div_row2_image {
31.     width: 30px;
32.     height: 30px;
33.     margin-left: 10px;
34.     margin-right: 20px;
35.     margin-left: -2px;
36.     left: 0;
37. }
39. .text_title {
40.     font-size: 20px;
41.     font-family: sans-serif;
42.     font-weight: bold;
43.     margin-top: 10px;
44. }
46. .vip_button {
47.     background-color: darkorange;
48.     font-size: 20px;
49.     font-family: sans-serif;
50.     color: aqua;
51.     border-radius: 0px;
52.     box-shadow: 2px 2px 5px 2px #FF7F00;
53.     padding: 10px;
54. }
56. .container {
57.     display: flex;
58.     justify-content: center;
59.     align-items: center;
60.     left: 0px;
61.     top: 0px;
62.     width: 454px;
63.     height: 454px;
64. }
66. .list {
67.     width: 100%;
68.     margin-top: 10px;
69.     divider-color: #32CD99;
70. }
72. .list_item {
73.     width: 100%;
74.     flex-direction: row;
75.     margin-top: 5px;
76.     padding-bottom: 5px;
77. }
79. .list_title {
80.     text-align: center;
81.     height: 100px;
82.     font-size: 15px;
83.     font-weight: bold;
84.     color: coral;
85.     margin-left: 10px;
86. }
88. .list_image {
89.     width: 200px;
90.     height: 100px;
91.     border-radius: 5px;
92. }

复制代码

其他设置

默认应用是不支持网络请求的，也就是说，纯粹使用上面的代码。肯定会报错，那么我们如何赋予应用网络权限呢？
只需要在config.json文件中，添加如下代码即可：

1. "module": {
2.     "reqPermissions": [
3.       {
4.         "name": "ohos.permission.INTERNET"
5.       }
6.     ],
7.     "metaData": {
8.       "customizeData": [
9.         {
10.           "name": "hwc-theme",
11.           "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar"
12.         }
13.       ]
14.     },

复制代码

其中，reqPermissions是用于添加权限的，这里我们添加了ohos.permission.INTERNET网络权限。
还有默认应用创建都是有标题栏的，这里没有标题栏是因为博主设置了metaData样式，这里设置为无标题栏NoTitleBar。
本项目源代码文件下载：点击下载
本文正在参与“有奖征文 | HarmonyOS征文大赛”活动：
活动链接：https://marketing.csdn.net/p/ad3879b53f4b8b31db27382b5fc65bbc

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！