0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

如何用所学的鸿蒙知识做一个小应用

OpenHarmony技术社区 来源:鸿蒙技术社区 作者:狼哥Army 2021-10-19 09:23 次阅读

今时今日,不管是大人,还是小孩,都喜欢刷视频,生活中刷视频的 APP 也多得是,如:抖音,快手,视频号,今日头条,火山…数也不数不清了。

然而华为论坛鸿蒙版块搞活动,做一个属于自己的视频应用,说真的,看到这个活动我很开心,又可以用所学的鸿蒙知识来做一个小应用了!

看了小提示,都是 JS 组件来实现的,当我看到分布式也可以用 JS 来写时,当时觉得 JS 也太强大了,因为之前写的 Demo 都是用 Java 来写分布式的。

本人工作也是从事 Java 后台开发,对于 JS 前端知识,也就是入门级水平,然后就在想是用 Java 来写这个视频应用,还是用 JS 来写呢。

通过看了 JS 参考 API 实例后,决定使用 JS 来写,简单易懂,同时也希望现在还在观望鸿蒙应用开发的前端开发人员,不要怕自己不会 Java 开发,而一直在观望,没有踏出第一步来写 Demo。

我写的这个视频应用取名为“爱视频 ,99% 是用 JS 前端知识完成的,只有 1% 的 Java 代码是复制过来的,也就是动态授权代码,所以希望还在观望的前端开发者,就从这个爱视频 APP 开始你们的第一个鸿蒙应用吧!

实现效果

创建工程

在这当作你已经安装好最新版本 DevEco-Studio 开发工具,点击 File→New→New Project…弹出 Create HarmonyOS Project 窗口。

这里我选择空白 JS 模板创建,写界面还是 JS 比较方便些,对于有一定前端知识的小伙伴来说。

主界面开发

在展示源代码之前,先介绍一下使用到了 JS 哪些组件:

  • 滑动容器(swiper)

  • 视频播放(video)

  • 可滑动面板(panel)

  • 列表组件(list)

  • 图片组件(image)

  • 文本组件(text)

  • 交互式组件(input)

  • 按钮组件(button)

通过查看 JS API 参考文档,就可以做出你喜欢的视频应用了。

先介绍简单的1% Java 代码,如果之前做过分布式 Demo,直接复制过来就可以使用:

Java 代码:
publicclassMainAbilityextendsAceAbility{
@Override
publicvoidonStart(Intentintent){
super.onStart(intent);
//动态判断权限
if(verifySelfPermission("ohos.permission.DISTRIBUTED_DATASYNC")!=IBundleManager.PERMISSION_GRANTED){
//应用未被授予权限
if(canRequestPermission("ohos.permission.DISTRIBUTED_DATASYNC")){
//是否可以申请弹框授权(首次申请或者用户未选择禁止且不再提示)
requestPermissionsFromUser(newString[]{"ohos.permission.DISTRIBUTED_DATASYNC"},0);
}
}
}

@Override
publicvoidonStop(){
super.onStop();
}
}

HML 代码(重要界面布局文件):

<divclass="container">
<swiperclass="swiper"id="swiper"index="{{continueAbilityData.currentIndex}}"indicator="false"loop="true"digital="false"vertical="true"onchange="changeSwiper">
<divclass="swiperContent">
<videoid='videoOne'src='{{continueAbilityData.videoList[0]}}'muted='false'autoplay='true'ontimeupdate='timeupdateCallback'style="object-fit:fill;width:100%;height:100%;"controls="false"onclick="change_start_pause_one"loop='true'starttime='{{ontinueAbilityData.timeupdatetime}}'>video>
div>
<divclass="swiperContent">
<videoid='videoTwo'src='{{continueAbilityData.videoList[1]}}'muted='false'autoplay='false'ontimeupdate='timeupdateCallback'style="object-fit:fill;width:100%;height:100%;"controls="false"onclick="change_start_pause_two"loop='true'starttime='{{ontinueAbilityData.timeupdatetime}}'>video>
div>
<divclass="swiperContent">
<videoid='videoThree'src='{{continueAbilityData.videoList[2]}}'muted='false'autoplay='false'ontimeupdate='timeupdateCallback'style="object-fit:fill;width:100%;height:100%;"controls="false"onclick="change_start_pause_three"loop='true'starttime='{{continueAbilityData.timeupdatetime}}'>video>
div>
swiper>
<divclass="btn-footer">
<imageclass="comment-iconicon"src="/common/army_icon.jpg">image>
<textclass="footer-label">#HarmonyOS挑战赛第二期#text>
<imageclass="comment-icon"src="/common/share.png"onclick="tryContinueAbility">image>
<imageclass="comment-icon"src="/common/bxs-message.png"onclick="showPanel">image>
div>
<panelid="simplepanel"type="foldable"mode="half"miniheight="400px">
<divclass="panel-div">
<listclass="todo-wrapper">
<list-itemfor="{{continueAbilityData.todolist}}"class="todo-item">
<imageclass="todo-icon"src="/common/avatar04.png">image>
<textclass="todo-title">{{$item.title}}text>
list-item>
list>
<divclass="inner-btn">
<inputid="input"class="input"type="text"value="{{continueAbilityData.comment}}"maxlength="20"enterkeytype="send"placeholder="请输入评论内容"onchange="changeValue"onenterkeyclick="enterkeyClick"style="margin-right:10px;">input>
<buttontype="capsule"value="关闭"onclick="closePanel">button>
div>
div>
panel>
div>

JS 代码(重要逻辑代码,各组件事件):

//@ts-nocheck
importappfrom'@system.app';
exportdefault{
data:{
img:"resources/media/pic_tv.png",
continueAbilityData:{
currentIndex:0,
videoList:[
"/common/000001.mp4",
"/common/000002.mp4",
"/common/000003.mp4"
],
timeupdatetime:2,
isStart:true,
todolist:[
{title:'HDC2021活动门票进行中'},
{title:'我期待HarmonyOS生态越来越完善'},
{title:'HarmonyOS你值得拥有'}],
comment:''
}
},
onInit(){
},
changeSwiper(e){
console.info("onRestoreData:changeSwiper");
this.switchPlay(e.index);
},
switchPlay(index){
console.info("onRestoreData:onShow<>"+index);
this.continueAbilityData.currentIndex=index;
if(index==0){
this.$element('videoOne').start();
this.$element('videoTwo').pause();
this.$element('videoThree').pause();
console.info("onRestoreData:videoOne<>start"+this.$element('videoOne').starttime);
}elseif(index==1){
this.$element('videoOne').pause();
this.$element('videoTwo').start();
this.$element('videoThree').pause();
console.info("onRestoreData:videoTwo<>start"+this.$element('videoTwo').starttime);
}elseif(index==2){
this.$element('videoOne').pause();
this.$element('videoTwo').pause();
this.$element('videoThree').start();
console.info("onRestoreData:videoThree<>start"+this.$element('videoThree').starttime);
}
},

//流转事件
tryContinueAbility:asyncfunction(){
//应用进行迁移
letresult=awaitFeatureAbility.continueAbility();
console.info("result:"+JSON.stringify(result));
},
onStartContinuation(){
//判断当前的状态是不是适合迁移
console.info("onStartContinuation");
returntrue;
},
onCompleteContinuation(code){
//迁移操作完成,code返回结果
console.info("CompleteContinuation:code="+code);
app.terminate();

},
onSaveData(saveData){
//数据保存到savedData中进行迁移。
vardata=this.continueAbilityData;
console.info("onSaveData:"+JSON.stringify(data));
Object.assign(saveData,data)
},
onRestoreData(restoreData){
console.info("onRestoreData:"+JSON.stringify(restoreData));
//收到迁移数据,恢复。
this.continueAbilityData=restoreData;

varcurrentIndex=this.continueAbilityData.currentIndex;
varcurrentTime=this.continueAbilityData.timeupdatetime;

this.$element('videoOne').pause();
this.$element('videoTwo').pause();
this.$element('videoThree').pause();

this.$element('videoOne').starttime=currentTime;
this.$element('videoTwo').starttime=currentTime;
this.$element('videoThree').starttime=currentTime;

this.switchPlay(currentIndex);
},

//评论事件
showPanel(){
this.$element('simplepanel').show()
},
closePanel(){
this.$element('simplepanel').close()
},
changeValue(e){
this.continueAbilityData.comment=e.value;
},
enterkeyClick(e){
this.continueAbilityData.todolist.push({title:this.continueAbilityData.comment});
this.continueAbilityData.comment="";
},
timeupdateCallback:function(e){this.continueAbilityData.timeupdatetime=e.currenttime;},
change_start_pause_one:function(){
if(this.continueAbilityData.isStart){
this.$element('videoOne').pause();
this.continueAbilityData.isStart=false;
}else{
this.$element('videoOne').start();
this.continueAbilityData.isStart=true;
}
},
change_start_pause_two:function(){
if(this.continueAbilityData.isStart){
this.$element('videoTwo').pause();
this.continueAbilityData.isStart=false;
}else{
this.$element('videoTwo').start();
this.continueAbilityData.isStart=true;
}
},
change_start_pause_three:function(){
if(this.continueAbilityData.isStart){
this.$element('videoThree').pause();
this.continueAbilityData.isStart=false;
}else{
this.$element('videoThree').start();
this.continueAbilityData.isStart=true;
}
}
}

CSS 代码(重要化妆技术):

.container{
width:100%;
height:100%;
flex-direction:column;
}

.img{
object-fit:cover;
background-color:#808080;
}

.swiper{
flex-direction:column;
align-content:center;
align-items:center;
width:100%;
height:100%;
background-color:black;
}
.swiperContent{
height:100%;
justify-content:center;
background-color:black;
}

.btn-footer{
height:60px;
line-height:60px;
width:100%;
background-color:black;
flex-direction:row;
}
.footer-label{
font-size:16px;
color:white;
padding-top:0px;
flex-weight:1;
line-height:20px;
}
.comment-icon{
width:32px;
height:32px;
margin:8px;
}
.icon{
border-radius:16px;
}

.panel-div{
flex-direction:column;
align-content:center;
align-items:center;
width:100%;
height:100%;
}
.inner-btn{
height:70px;
padding:10px;
}
.todo-wrapper{
width:100%;
height:100%;
}
.todo-item{
width:100%;
height:30px;
padding-left:10px;
padding-right:10px;
}
.todo-icon{
width:16px;
height:16px;
margin-top:10px;
margin-right:10px;
}
.todo-title{
width:100%;
height:100%;
text-align:left;
font-size:14fp;
}

代码就写到此了,不要忘记了 config.json 文件的权限配置哦,在 module 下添加:

"reqPermissions":[
{
"name":"ohos.permission.DISTRIBUTED_DATASYNC"
}
]

总结

说实存的,当看到这个活动时间才几天时,感觉时间不太够用,要滑动视频,要评论功能,要分布式的,加上都是用空闲时间来做的,然而当深入去理解相关组件用法后,发现应该一天时间就可以了。

有兴趣的小伙伴可以下载源码查看,项目代码写得还不算靓仔,很多为了实现效果,都是 Hardcode 的。

有空可以把重复代码抽出来,视频源也可以放到服务器上,然后就可以更愉快的刷更多视频了,源码同步到 gitee 码云,项目素材没有上传,自行添加。

源码在这:

https://gitee.com/army16/qin-hong-jun-video

责任编辑:haq
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • APP
    APP
    +关注

    关注

    33

    文章

    1568

    浏览量

    72365
  • 鸿蒙系统
    +关注

    关注

    183

    文章

    2634

    浏览量

    66203
  • HarmonyOS
    +关注

    关注

    79

    文章

    1967

    浏览量

    30003

原文标题:做一个鸿蒙版仿抖音APP!

文章出处:【微信号:gh_834c4b3d87fe,微信公众号:OpenHarmony技术社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    如何使用合宙的DTU+业务云平台,做一个温湿度传感器数据采集项目?

    使用合宙的DTU+业务云平台,做一个温湿度传感器数据采集项目,超详细教程。
    的头像 发表于 09-18 11:11 355次阅读
    如何使用合宙的DTU+业务云平台,<b class='flag-5'>做一个</b>温湿度传感器数据采集项目?

    何用TLC2272C做一个耳机的功放?

    需要用TLC2272C做一个耳机的功放,请提供下典型应用的例子,谢谢
    发表于 09-06 06:37

    何用OPA615做一个脉冲信号的峰值保持电路?

    求助 ,想用OPA615做一个脉冲信号的峰值保持电路 有没有电路图什么的或者相关的资料
    发表于 08-27 07:50

    鸿蒙开发就业前景到底怎么样?

    有帮助,我想邀请大家帮我三小忙: 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。 关注小编,同时可以期待后续文章ing?,不定期分享原创知识。 更多鸿蒙最新技术知识点,请关
    发表于 05-09 17:37

    36岁了还有必要转行鸿蒙开发吗?

    的是 5G 时代,那个万物都能互联的时代。 鸿蒙的市场需求有多大? 目前很多企业都纷纷开始设置鸿蒙的岗位,想提前步布局鸿蒙。根据些招聘网
    发表于 05-09 17:01

    鸿蒙的1万理由,北京中关村现大幅鸿蒙海报

    。学鸿蒙,可以收获新的技能、更高的薪酬、还有更多荣誉。 据悉,目前已有超过4000APP启动了鸿蒙原生应用开发,已有23家985高校、46家211高校已开设或即将开设HarmonyOS相关课程
    发表于 05-08 20:31

    实锤!腾讯终于拥抱鸿蒙生态,微信鸿蒙原生版本即将上线

    一个,也是唯手机操作系统有多么的喜欢。 最后 如果大家觉得这篇内容对学习鸿蒙开发有帮助,我想邀请大家帮我三
    发表于 04-30 21:14

    腾讯突然宣布,微信鸿蒙版要来了!

    、网易游戏、云闪付、中国移动、建设银行….. 等大波知名APP已加入鸿蒙原生应用开发,还有近 1000 应用正在沟通中。 不过,有不少细心网友发现,官宣适配鸿蒙的众多APP中,迟迟
    发表于 04-30 19:34

    鸿蒙OS崛起,鸿蒙应用开发工程师成市场新宠

    应用的形态也在发生着翻天覆地的变化。作为全球领先的移动操作系统和智能终端制造商,华为公司自主研发的鸿蒙OS应运而生,致力于构建的分布式操作系统,为各行各业的应用开发带来全新的可
    发表于 04-29 17:32

    做一个TC23X单片机的Bootloader程序需要准备哪些方面的知识

    各位,问下,上位机用现成的,做一个TC23X单片机的Bootloader程序需要准备哪些方面的知识?需要看数据手册的哪些章节?还有能否给
    发表于 02-18 08:33

    鸿蒙开发【设备开发基础知识

    鸿蒙开发基础知识讲解
    的头像 发表于 01-29 18:44 945次阅读
    <b class='flag-5'>鸿蒙</b>开发【设备开发基础<b class='flag-5'>知识</b>】

    电商巨头拥抱鸿蒙生态

    鸿蒙生态未来可期近日,鸿蒙生态圈又发布令人振奋的消息:京东正式适配原生鸿蒙操作系统!这是继支付宝、微信之后,又
    的头像 发表于 01-17 08:32 701次阅读
    又<b class='flag-5'>一</b>电商巨头拥抱<b class='flag-5'>鸿蒙</b>生态

    功德+1,用小安派-Eyes-S1做一个电子木鱼

    2024积德累功,心想事成!接下来 看看如何用小安派-Eyes-S1做一个电子木鱼 。 01、GUI-Guider 页面设计 先新建工程。 直接进入 UI 设计界面,这里用到了两
    的头像 发表于 01-16 14:33 682次阅读
    功德+1,用小安派-Eyes-S1<b class='flag-5'>做一个</b>电子木鱼

    何用小安派-Eyes-S1做一个电子木鱼?

    2024年的第篇教程来了,本篇学习如何添加LVGL事件,并制作完成电子木鱼(小美苦苦哀求,我略微出手而已)。祝大家2024积德累功,心想事成!接下来看看如何用小安派-Eyes-S
    的头像 发表于 01-13 15:18 965次阅读
    如<b class='flag-5'>何用</b>小安派-Eyes-S1<b class='flag-5'>做一个</b>电子木鱼?

    何用BUCK电路简单实现可靠的负电源?

    何用BUCK电路简单实现可靠的负电源?
    的头像 发表于 12-05 15:12 761次阅读
    如<b class='flag-5'>何用</b>BUCK电路简单实现<b class='flag-5'>一</b><b class='flag-5'>个</b>可靠的负电源?