HarmonyOS鸿蒙Next仿华为浏览器视频应用

HarmonyOS鸿蒙Next仿华为浏览器视频应用 话不多说，先来看看效果图~

1、视频播放

2、滑动切换视频

下滑

上滑

3、评论功能

添加评论

查看评论

4、分布式视频流转

下面我打算分以下五个方面来讲讲如何利用鸿蒙的js组件实现以上的功能。

另外，本篇帖子不会拘泥于一步步手把手教你如何码代码，更多的是告诉你可行的方法和思想。（主要是最近时间比较紧…如果有哪个步骤有啥问题的可以在评论区留言，我看到了就会回复的哈！）

emmmmm，还有就是我之前一直是用Java来编写HarmonyOS应用的，这次来尝试下用js写应用。文中难免会存在一些问题的，也欢迎来评论区指正呀！

一、模板的选择

工欲善其事，必先利其器。选择一个好的模板能够让我们更好，更快地完成任务

如上图，默认模板中有两个关于视频的

两个模板我都看了，左边是js的，右边是Java的，两个模板都写的很好，直接把分布式视频流转的数据传输都给写了。但是，右边的模板更倾向于单个视频的播放，而这次的挑战赛是需要滑动切换视频，而且我觉得更多地是想让大家多了解和使用容器类组件，比如list。于是我就选择了News Share Ability模板

二、修改模板

主要修改以下几个文件

1. news.json存放的是数据的路径啥的，主要修改里面的title_image和title_video，修改成相应文件的路径即可

2. newsimages和newsvideo存放的是资源文件

   分别是视频的预览图和视频文件

3. commonlib是手机和电视端的公共文件夹，在这里就不得不夸一夸鸿蒙啦，分布式真的很方便，一套代码，多个终端，突破了硬件的限制！！！

三、实现滑动切换视频

通过list的scroll事件可以实时获取滑动的位移和方向，进而可以通过监听滑动距离来进行视频的切换

scrollfunc(msg) {
    if (msg.scrollY > 20*this.scrollDown && this.currentPlaying >= 0){
        this.scrollDown++;
        if (this.currentPlaying+1 < this.videoCounts){
            this.$element("video"+this.currentPlaying).pause();
            this.controlShow.splice(this.currentPlaying, 1, false);
            this.$element("video"+(this.currentPlaying+1)).start(this.currentPlaying+1);
        }
    }else if(msg.scrollY < -20*this.scrollUp && this.currentPlaying >= 0){
        this.scrollUp++;
        if (this.currentPlaying-1 >=0){
            this.$element("video"+this.currentPlaying).pause();
            this.controlShow.splice(this.currentPlaying, 1, false);
            this.$element("video"+(this.currentPlaying-1)).start(this.currentPlaying-1);
        }
    }
},

list官方文档：harmonyos应用开发-服务开发-JS API参考-手机、平板、智慧屏和智能穿戴开发-组件-容器组件-list

四、实现评论功能

这个其实没啥太大的难度，主要需要掌握的就是UI界面的绘制，代码逻辑很简单

index.hml

<div class="container-comments" id="container-comments" show="{{ isShowComments }}" onclick="hideComments()">
    <div class="container-comments-list">
        <text class="comments-header">全部评论</text>
        <list id="commentslist" class="comments-list">
            <list-item for="{{ comments }}" id="comments{{$idx}}">
                <div class="comments-list-item-small">
                    <text class="comment-text">{{ $item }}</text>
                </div>
            </list-item>
        </list>
        <div class="container-input">
            <input class="comment-input" id="comments-input" value="{{ inputValue }}" onchange="updateValue()">
            <text class="comment-key" onclick="update()" focusable="true">发表</text>
        </div>
    </div>
</div>

index.js

showComments(idx) {
    this.isShowComments = true;
    this.commentsID = idx;
    this.comments = this.commentsList[idx];
},
hideComments() {
    this.isShowComments = false;
    this.commentsID = -1;
},
update() {
    if (this.inputValue != ""){
        this.comments.push(this.inputValue);
        this.inputValue = "";
        this.commentsList[this.commentsID] = this.comments;
        this.$element("comment-input").blur();
    }
},
updateValue(e) {
    this.inputValue = e.text;
},

index.css

.container-comments-list {
    align-self: flex-end;
    border-radius: 0px 0px 25px 25px;
    height: 70%;
    width: 100%;
    background-color: #ffffff;
}
.comments-header {
    align-self: flex-start;
    position: absolute;
    text-align: left;
    margin-left: 25px;
    margin-top: 25px;
    font-size: 24fp;
    height: 35px;
}
.comments-list {
    position: absolute;
    margin-top: 60px;
    height: 100%;
    margin-left: 25px;
    margin-bottom: 50px;
}
.comment-text {
    position: absolute;
    font-size: 18fp;
    text-align: left;
    width: 95%;
}
.comments-list-item-small {
    align-content: flex-start;
    margin-top: 12px;
    flex-direction: column;
    width: 100%;
    height: 28px;
}
.container-input {
    align-self: flex-end;
    height: 50px;
    width: 100%;
    background-color: #ffffff;
}
.comment-input {
    height: 40px;
    width: 80%;
    margin-left: 10%;
    align-self: center;
    background-color: #e7e5e5;
}
.comment-key {
    height: 40px;
    font-size: 18px;
    text-align: center;
    align-self: center;
    margin-left: 4px;
    margin-right: 10%;
}

效果图：

因为时间比较紧，界面可能不是很好看，多多包涵呐！

五、分布式视频流转

因为我也是刚接触分布式，也是正在学习中…所以，在这方面说不了太多

官方文档写得非常好，也很详细！codelabs老好用了！

Codelabs：Codelabs_华为尖端技术_编码体验-华为开发者联盟 (huawei.com)

官方文档：harmonyos应用开发-服务开发-JS API参考-手机、平板、智慧屏和智能穿戴开发-接口-分布式能力-分布式迁移

另外，还有个好消息的是，模板都帮你把分布式写好了，你只需要根据需求去修改就行啦！

最后总结一下如何开发：

1、挑选合适的模板来进行开发

我记得上次有个活动就是让你体验模板开发的，就是把官方自带的模板拼接到你的应用里

这大大节省了开发时间，也不用在浪费心力去写一些通用的页面了

体验了之后，再也不想自己从empty模板开始写了，哈哈哈哈

每次要写新的页面都会先去看看，有没有相关类似功能的模板

2、参考官方文档学习相关组件的使用方法

官方文档写的很详细，也很全面，与其盲目地百度，不如好好阅读下官方文档。（当然也有很多BUG和遗漏，比如前段时间我就一直为Java版的服务卡片适配深色模式烦恼呢）

也可以去看看Codelabs里面有没有相关的示例

如果实在没看懂或者没找到的话，可以来论坛问问，或者提交工单（亲测好用，当天回复）

因为时间关系，我可能没有做的那么完善，能少整就不折腾了（比如，有些变量名用的还是news，评论区太简陋了等等），大家多多包涵呐！

有啥问题或想法，欢迎评论区留言呀~

官方文档：harmonyos应用开发-服务开发-JS API参考-概述

Codelabs：Codelabs_华为尖端技术_编码体验-华为开发者联盟 (huawei.com)

(本文原创，转载请标明出处和原文链接)