如何用所學的鴻蒙知識做一個小應用
今時今日，不管是大人，還是小孩，都喜歡刷視頻，生活中刷視頻的 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
聲明：本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人，不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用，如有內容侵權或者其他違規問題，請聯系本站處理。
舉報投訴
-
APP
+關注
關注
33文章
1592瀏覽量
75985 -
鴻蒙系統
+關注
關注
183文章
2642瀏覽量
69828 -
HarmonyOS
+關注
關注
80文章
2153瀏覽量
36037
原文標題：做一個鴻蒙版仿抖音APP！
文章出處：【微信號：gh_834c4b3d87fe，微信公眾號：OpenHarmony技術社區】歡迎添加關注！文章轉載請注明出處。
發布評論請先 登錄
相關推薦
熱點推薦
開源鴻蒙技術大會2025丨以智能化為主旋律，擘畫開源鴻蒙下一個五年發展技術藍圖
，與來自學術界和產業界的專家們共同回顧開源鴻蒙五年來走過的非凡歷程，發布了開源鴻蒙6.0版本，并展望面向未來的智能終端操作系統關鍵技術創新方向，呼吁與會專家以智能化發展為主旋律，共同擘畫開源鴻蒙下
開源鴻蒙城市技術沙龍武漢站圓滿落幕
” 在武漢洪山區圓滿落幕。本次活動匯聚社區專家、高校學者、企業開發者，圍繞 “經驗資產化、知識開源化、能力可復用”的核心目標展開深度討論，為開源鴻蒙生態注入知識動能，打造了一場兼具深度
開源鴻蒙人才培養賦能課程共建正式啟動
近日，2025開放原子開源生態大會開源鴻蒙主題演講在北京國家會議中心隆重舉辦。會上，開源鴻蒙人才培養賦能課程共建正式啟動，該項目旨在推動開源鴻蒙技術在高校教育和產業生態中的深入應用，構建權威、系統的人才能力評價體系，形成開放共享
鴻蒙發展歷程
【HarmonyOS 5】鴻蒙發展歷程 ##鴻蒙開發能力 ##HarmonyOS SDK應用服務##鴻蒙金融類應用 （金融理財# 一、鴻蒙
鴻蒙5開發寶藏案例分享---一多開發實例（地圖導航）
案例！最近在肝鴻蒙項目時意外發現了這個地圖導航的\"一多\"開發實例，簡直像發現新大陸！這就帶大家沉浸式體驗這個超實用的開發模板~
? 先劃重點：這個案例完美演示了如何用一套代碼搞定
發表于 06-03 16:17
鴻蒙5開發寶藏案例分享---一多開發實例（即時通訊）
?鴻蒙\"一多\"開發寶藏指南：原來官方案例還能這么玩！?
大家好呀！我是剛在鴻蒙開發路上踩完坑的某不知名碼農，今天要給大家分享一個重大發現
發表于 06-03 16:01
首款鴻蒙筆記本電腦發布，生活辦公有小藝開啟智慧新體驗
終端領域的又一次突破性創新。小藝作為全場景的系統級智能體，此次在鴻蒙電腦上的AI智慧體驗更是邁入了一個新臺階，無處不在的全新交互、不斷拓展的個人知識
鴻蒙電腦拿什么和Windows競爭
5月8日，在鴻蒙電腦技術與生態溝通會上，鴻蒙操作系統（HarmonyOS 5）首次在電腦端亮相;這是華為首款鴻蒙電腦正式亮相。同時華為智慧辦公將升級為鴻蒙辦公。
DevEco Studio AI輔助開發工具兩大升級功能 鴻蒙應用開發效率再提升
開發者的喜愛。
應廣大開發者的需求建議，我們最近又對CodeGenie進行了一次升級，不僅針對DeepSeek-R1新增支持鴻蒙知識RAG能力，還上線了代碼解釋功能，持續拓展AI在輔助鴻蒙
發表于 04-18 14:43
功德+1，用小安派-Eyes-S1做一個電子木魚
2024積德累功，心想事成！接下來看看如何用小安派-Eyes-S1做一個電子木魚。01GUI-Guider頁面設計先新建一個工程。直接進入UI設計界面，這里用到了兩
DevEco Studio 聯合小藝接入 DeepSeek,步驟更簡單開發鴻蒙更專業
完成后，打開 DevEco Studio，創建一個新的鴻蒙應用項目，選擇適合的模板（如 Empty Ability）。
2、下載并安裝 CodeGenie 工具
如果你安裝的是官網最新的 DevEco
發表于 03-13 15:11
【「極速探索HarmonyOS NEXT 」閱讀體驗】 一本書開啟了鴻蒙開發的整個生態資源
點時間，從百度云盤中下載到了一下內容，如圖：
這是書內容相關的PPT文檔的目錄：
這是相關源代碼的目錄：
它們補充了書中所有的描述的內容，使我對學習鴻蒙知識有了一
發表于 03-06 11:44
工商網監
評論