女人自慰AV免费观看内涵网,日韩国产剧情在线观看网址,神马电影网特片网,最新一级电影欧美,在线观看亚洲欧美日韩,黄色视频在线播放免费观看,ABO涨奶期羡澄,第一导航fulione,美女主播操b

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

鴻蒙版JS如何實現分布式仿抖音應用

OpenHarmony技術社區 ? 來源:鴻蒙技術社區 ? 作者:陳建朋 ? 2021-11-15 09:44 ? 次閱讀

之前大家看過了 Java 版的《HarmonyOS 分布式之仿抖音應用》,現在講講 JS 如何實現分布式仿抖音應用,通過 JS 方式開發視頻播放,分布式設備遷移,評論,通過 Java 和 JS 交互,獲取設備信息,選擇設備信息做分布式遷移。

功能:分布式遷移到不同設備,視頻進行評論,播放視頻,可以像抖音一樣切換視頻,可以點贊,分享等操作。

開發版本:sdk6,DevEco Studio3.0 Beta1。

主要代碼

①視頻播放

鴻蒙 js 中有專門【video】的組件,并且非常完善,可以直接使用:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-media-video-0000000000611764

<videoid='playerId{{$idx}}'src='{{$item.path}}'muted='false'autoplay='true'
controls="false"onprepared='preparedCallback'onstart='startCallback'onpause='pauseCallback'
onfinish='finishCallback'onerror='errorCallback'onseeking='seekingCallback'
onseeked='seekedCallback'
ontimeupdate='timeupdateCallback'style="object-fit:contain;width:100%;"
onlongpress='change_fullscreenchange'onclick="change_start_pause"loop='true'
starttime="0"
>
video>

js 代碼中視頻資源:

list:[{
path:"/common/video/video1.mp4"
},{
path:"/common/video/video2.mp4"
},{
path:"/common/video/video3.mp4"
},{
path:"/common/video/video4.mp4"
},{
path:"/common/video/video5.mp4"
},{
path:"/common/video/video6.mp4"
}]
②仿抖音視頻切換

有關視頻切換的開發 js 中也提供了對應的組件【swiper】,可以直接使用來進行視頻切換:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-swiper-0000000000611533



<swiperclass="swiper-content"id="swiper"index="{{player_index}}"
indicator="false"loop="true"digital="false"vertical="true"onchange="changeVideo">
<stackclass="stack-parent"for="list">
<divclass="videosource">

<videoid='playerId{{$idx}}'src='{{$item.path}}'muted='false'autoplay='true'
controls="false"onprepared='preparedCallback'onstart='startCallback'onpause='pauseCallback'
onfinish='finishCallback'onerror='errorCallback'onseeking='seekingCallback'
onseeked='seekedCallback'
ontimeupdate='timeupdateCallback'style="object-fit:contain;width:100%;"
onlongpress='change_fullscreenchange'onclick="change_start_pause"loop='true'
starttime="0"
>
video>
div>
stack>
swiper>

③評論功能添加

評論功能使用了鴻蒙 js 中了兩個組件【list】(負責列表展示) 和【input】(負責信息發送),可參見有關文檔。
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-list-0000000000611496

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-input-0000000000611673

評論功能有兩部分,評論列表和評論發送輸入框。

<divclass="pinglun"style="visibility:{{ifhidden}};">
<divstyle="height:32%;background-color:transparent;"onclick="hideenbg">
<text>text>
div>

<listclass="todo-wrapper"divider="true"style="divider-color:darkgrey;">

<list-itemfor="{{todolist}}"class="todo-item">
<divclass="photo">
<imageclass="image-set"src="/common/images/science6.png">image>
<textclass="todo-title"style="font-size:14fp;margin-left:10px;">{{$item.name}}
text>
div>
<textclass="todo-title"style="font-size:14fp;margin-top:5px;">{{$item.detail}}text>
list-item>
list>

<divclass="butt">

<inputid="input"class="input"type="text"value="{{content}}"maxlength="20"enterkeytype="send"
placeholder="{{placecontent}}"onchange="change"
onenterkeyclick="enterkeyClick">
input>
<buttonclass="last"onclick="sendmessage">發送button>
div>
div>

功能實現邏輯:

change(e){//監聽輸入框信息變化獲取信息
this.message=e.value;
console.log("message==="+this.message)
},

sendmessage(){//提交信息后組織數據刷新界面
this.todolist.push({
name:'王者',
detail:this.message,
})
this.content="";
this.message="";
},
④JS 和 Java 交互獲取設備信息 在實現分布式設備遷移的時候查找 js 沒有找到獲取設備信息的有關接口,所以考慮通過 js 和 Java 相互調用實現。通過 jsFA 調用 Java PA機制,實現數據的獲取和傳遞。 js 端實現如下:

重點:
  • Ability 類型,對應 PA 端不同的實現方式:0:Ability,1:Internal Ability。

  • syncOption PA 側請求消息處理同步/異步選項:0:同步方式,默認方式,1:異步方式。
initAction(code){
varactionData={};
actionData.firstNum=1024;
actionData.secondNum=2048;
varaction={};
action.bundleName="com.corecode.video.videoplayer";//包名
action.abilityName="com.corecode.video.videoplayer.DeviceInternalAbility";//包名+類名
action.messageCode=code;//消息編碼
action.data=actionData;//傳遞數據
action.abilityType=1;//ability類型
action.syncOption=1;//同步還是異步類型
returnaction;
},
getLevel:asyncfunction(){
try{
varaction=this.initAction(1001);
varresult=awaitFeatureAbility.callAbility(action);
console.info("result="+result);
this.deviceId=JSON.parse(JSON.parse(result).result);
console.log("deviceId=="+this.deviceId)
this.devicelist="visible";
}catch(pluginError){
console.error("getBatteryLevel:PluginError="+pluginError);
}
}

Java 端實現如下:

Java 端需要創建一個 ability 服務繼承 AceInternalAbility 具體是使用哪種類型,看上面的解釋。

創建后需要注冊,比如我創建的是 InternalAbility 這樣注冊:DeviceInternalAbility.register(this);

packagecom.corecode.video.videoplayer;
publicclassDeviceInternalAbilityextendsAceInternalAbility{
privatestaticfinalHiLogLabelTAG=newHiLogLabel(0,0,"DeviceInternalAbility");
privatestaticfinalintCONNECT_ABILITY=2000;
privatestaticfinalintDISCONNECT_ABILITY=2001;
privatestaticfinalintSEND_MSG=1001;
privatestaticfinalintSUCCESS_CODE=0;
privatestaticfinalintFAIL_CODE=-1;
privatestaticDeviceInternalAbilityINSTANCE;
privateStringselectDeviceId;

/**
*defaultconstructor
*
*@paramcontextabilitycontext
*/
publicDeviceInternalAbility(AbilityContextcontext){
super("com.corecode.video.videoplayer","com.corecode.video.videoplayer.DeviceInternalAbility");
}

publicDeviceInternalAbility(StringbundleName,StringabilityName){
super(bundleName,abilityName);
}

publicDeviceInternalAbility(StringabilityName){
super(abilityName);
}

/**
*setInternalAbilityHandlerforDistributeInternalAbilityinstance
*
*@paramcontextabilitycontext
*/
staticvoidregister(AbilityContextcontext){
INSTANCE=newDeviceInternalAbility(context);
INSTANCE.setInternalAbilityHandler((code,data,reply,option)->
INSTANCE.onRemoteRequest(code,data,reply,option));
}

/**
*destroyDistributeInternalAbilityinstance
*/
privatestaticvoidunregister(){
INSTANCE.destroy();
}

/**
*defaultdestructor
*/
privatevoiddestroy(){
}

/**
*handclickrequestfromjavascript
*
*@paramcodeACTION_CODE
*@paramdatadatasentfromjavascript
*@paramreplyreplyforjavascript
*@paramoptioncurrentlyexcessive
*@returnwhetherjavascriptclickeventiscorrectlyresponded
*/
privatebooleanonRemoteRequest(intcode,MessageParceldata,MessageParcelreply,MessageOptionoption){
MapreplyResult=newHashMap<>();
switch(code){
//sendmessagetoremotedevice,messagecontainscontrollercommandfromFA
caseSEND_MSG:{
ZSONObjectdataParsed=ZSONObject.stringToZSON(data.readString());
intmessage=dataParsed.getIntValue("message");
////SYNC
//if(option.getFlags()==MessageOption.TF_SYNC){
//reply.writeString(ZSONObject.toZSONString(result));
//}
//ASYNC
//返回結果當前僅支持String,對于復雜結構可以序列化為ZSON字符串上報
Mapresult=newHashMap();
result.put("result",MainAbility.getList());
MessageParcelresponseData=MessageParcel.obtain();
responseData.writeString(ZSONObject.toZSONString(result));
IRemoteObjectremoteReply=reply.readRemoteObject();
try{
remoteReply.sendRequest(0,responseData,MessageParcel.obtain(),newMessageOption());
}catch(RemoteExceptionexception){
returnfalse;
}finally{
responseData.reclaim();
}
break;
}
//toinvokeremotedevice'snewsShareabilityandsendnewsurlwetransfer
caseCONNECT_ABILITY:{
ZSONObjectdataParsed=ZSONObject.stringToZSON(data.readString());
selectDeviceId=dataParsed.getString("deviceId");
break;
}
//whencontrollerFAwenttodestroylifeCycle,disconnectwithremotenewsShareability
caseDISCONNECT_ABILITY:{
unregister();
break;
}
default:
HiLog.error(TAG,"messageCodenothandleproperlyinphonedistributeInternalAbility");
}
returntrue;
}

privatevoidassembleReplyResult(intcode,MapreplyResult,Objectcontent,MessageParcelreply){
replyResult.put("code",code);
replyResult.put("content",content);
reply.writeString(ZSONObject.toZSONString(replyResult));
}
}

js 調用后會進入 Java 的 onRemoteRequest 函數進行數據解析和組織,然后通過如下接口將需要的結果回傳給 js 做界面展示和操作。

remoteReply.sendRequest(0,responseData,MessageParcel.obtain(),newMessageOption());

獲取設備信息:

List<DeviceInfo>deviceInfos=DeviceManager.getDeviceList(DeviceInfo.FLAG_GET_ONLINE_DEVICE);

⑤分布式遷移

鴻蒙中分布式遷移真的是做到了強大,在 js 中只需要四個函數就能完成分布式遷移。

onSaveData(saveData){//數據保存到savedData中進行遷移。
vardata={
list:this.list,
player_index:this.player_index,
};
Object.assign(saveData,data)
},
onRestoreData(restoreData){//收到遷移數據,恢復。
console.info('====onRestoreData'+JSON.stringify(restoreData))
this.list=restoreData.list
this.player_index=restoreData.player_index

this.$element('swiper').swipeTo({
index:this.player_index
});

},
onCompleteContinuation(code){//遷移完成
console.log("onCompleteContinuation==="+code)
},
onStartContinuation(){//遷移開始
returntrue;
},

遷移:上面的四個有關函數設置好后執行下面的接口就能實現分布式遷移了。

continueVideoAbility:asyncfunction(){
letconti=awaitFeatureAbility.continueAbility();
}
⑥權限

需要加上需要的權限:

"reqPermissions":[
{
"reason":"",
"usedScene":{
"ability":[
"MainAbility"
],
"when":"inuse"
},
"name":"ohos.permission.DISTRIBUTED_DATASYNC"
},
{
"name":"ohos.permission.DISTRIBUTED_DEVICE_STATE_CHANGE"
},
{
"name":"ohos.permission.GET_DISTRIBUTED_DEVICE_INFO"
},
{
"name":"ohos.permission.GRT_BUNDLE_INFO"
},
{
"name":"ohos.permission.INTERNET"
}
]

源碼地址【 分布式仿抖音視頻】:

https://gitee.com/dot_happydz_admin/video-player

責任編輯:haq
聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 應用
    +關注

    關注

    2

    文章

    439

    瀏覽量

    34435
  • 鴻蒙系統
    +關注

    關注

    183

    文章

    2639

    瀏覽量

    67735
  • HarmonyOS
    +關注

    關注

    79

    文章

    2055

    瀏覽量

    32176

原文標題:鴻蒙版“抖音”,體驗賊好!

文章出處:【微信號:gh_834c4b3d87fe,微信公眾號:OpenHarmony技術社區】歡迎添加關注!文章轉載請注明出處。

收藏 人收藏

    評論

    相關推薦
    熱點推薦

    分布式光伏電力問題層出不窮?安科瑞分布式光伏運維系統來“救場”

    一、分布式光伏電力運維,痛點大揭秘? ? 分布式光伏作為實現綠色能源轉型的關鍵一環,近年來在我國得到了迅猛發展。國家能源局數據顯示,截至 2023 年底,中國分布式光伏電站累計并網容量
    的頭像 發表于 05-07 17:14 ?174次閱讀
    <b class='flag-5'>分布式</b>光伏電力問題層出不窮?安科瑞<b class='flag-5'>分布式</b>光伏運維系統來“救場”

    分布式光伏如何實現防逆流

    ,對規劃建設新型能源體系、達成“雙碳”目標具有重要意義。 針對分布式光伏政策提倡就地消納,不允許并網,對于新上的分布式光伏需要設置防逆流管理,那我們應當在哪里監視呢? 分布式光伏發電系統的并網點,是指
    的頭像 發表于 03-25 16:03 ?208次閱讀
    <b class='flag-5'>分布式</b>光伏如何<b class='flag-5'>實現</b>防逆流

    分布式光伏如何實現防逆流?

    分布式光伏如何實現防逆流
    的頭像 發表于 03-24 13:31 ?213次閱讀
    <b class='flag-5'>分布式</b>光伏如何<b class='flag-5'>實現</b>防逆流?

    分布式云化數據庫有哪些類型

    分布式云化數據庫有哪些類型?分布式云化數據庫主要類型包括:關系型分布式數據庫、非關系型分布式數據庫、新SQL分布式數據庫、以列方式存儲數據、
    的頭像 發表于 01-15 09:43 ?405次閱讀

    基于ptp的分布式系統設計

    在現代分布式系統中,精確的時間同步對于確保數據一致性、系統穩定性和性能至關重要。PTP(Precision Time Protocol)是一種網絡協議,用于在分布式系統中實現高精度的時間同步
    的頭像 發表于 12-29 10:09 ?469次閱讀

    HarmonyOS Next 應用元服務開發-分布式數據對象遷移數據文件資產遷移

    設備文件訪問實現文件的遷移,難以獲取文件同步完成的時間。為了保證更高的成功率,文件的遷移不建議繼續通過該方式實現,推薦使用分布式數據對象攜帶資產的方式。開發者此前通過跨設備文件訪問實現
    發表于 12-24 10:11

    HarmonyOS Next 應用元服務開發-分布式數據對象遷移數據權限與基礎數據

    設備文件訪問實現文件的遷移,難以獲取文件同步完成的時間。為了保證更高的成功率,文件的遷移不建議繼續通過該方式實現,推薦使用分布式數據對象攜帶資產的方式。開發者此前通過跨設備文件訪問實現
    發表于 12-24 09:40

    分布式通信的原理和實現高效分布式通信背后的技術NVLink的演進

    大型模型的大小已經超出了單個 GPU 的范圍。所以就需要實現跨多個 GPU 的模型訓練,這種訓練方式就涉及到了分布式通信和 NVLink。 當談及分布式通信和 NVLink 時,我們進入了一個引人入勝且不斷演進的技術領域,下面我
    的頭像 發表于 11-18 09:39 ?1154次閱讀
    <b class='flag-5'>分布式</b>通信的原理和<b class='flag-5'>實現</b>高效<b class='flag-5'>分布式</b>通信背后的技術NVLink的演進

    分布式光纖測溫解決方案

    分布式光纖測溫解決方案
    的頭像 發表于 11-12 01:02 ?500次閱讀
    <b class='flag-5'>分布式</b>光纖測溫解決方案

    解決電網逆流難題,實現分布式光伏發電全部自發自用

    2024年10月9日,國家能源局綜合司發布了《分布式光伏發電開發建設管理辦法(征求意見稿)》,意見稿規定了戶用分布式光伏、一般工商業分布式光伏以及大型工商業分布式光伏的發電上網模式,當
    的頭像 發表于 10-31 08:09 ?1639次閱讀
    解決電網逆流難題,<b class='flag-5'>實現</b><b class='flag-5'>分布式</b>光伏發電全部自發自用

    分布式光纖測溫是什么?應用領域是?

    分布式光纖測溫是一種先進的溫度測量技術,它利用光纖的拉曼散射原理進行溫度監測。以下是對分布式光纖測溫的詳細介紹: 一、基本原理 分布式光纖測溫的原理基于光纖的拉曼散射效應。當光纖某處的溫度發生變化
    的頭像 發表于 10-24 15:30 ?1109次閱讀
    <b class='flag-5'>分布式</b>光纖測溫是什么?應用領域是?

    分布式光纖聲波傳感技術的工作原理

    分布式光纖聲波傳感技術(Distributed Acoustic Sensing,DAS)是一種利用光纖作為傳感元件,實現對沿光纖路徑上的環境參數進行連續分布式測量的技術。
    的頭像 發表于 10-18 14:50 ?2611次閱讀
    <b class='flag-5'>分布式</b>光纖聲波傳感技術的工作原理

    分布式輸電線路故障定位中的分布式是指什么

    的全面覆蓋。這些監測點之間通過無線網絡進行數據互聯,形成一個分布式的監測系統; 三相覆蓋:對于三相輸電線路,分布式故障定位系統會在每相上都安裝相應的監測裝置,以實現對三相導線的全面監控。 二、技術特點 行波測距
    的頭像 發表于 10-16 11:39 ?626次閱讀
    <b class='flag-5'>分布式</b>輸電線路故障定位中的<b class='flag-5'>分布式</b>是指什么

    鴻蒙跨端實踐-JS虛擬機架構實現

    類似的框架,我們需要自行實現以確保核心基礎能力的完整。 鴻蒙虛擬機的開發經歷了從最初 ArkTs2V8 到 JSVM + Roma新架構方案 。在此過程中,我們實現了完整的鴻蒙版的“J
    的頭像 發表于 09-30 14:42 ?2896次閱讀
    <b class='flag-5'>鴻蒙</b>跨端實踐-<b class='flag-5'>JS</b>虛擬機架構<b class='flag-5'>實現</b>

    鴻蒙開發管理:ohos.account.distributedAccount 分布式帳號管理

    獲取分布式帳號單實例對象。
    的頭像 發表于 07-08 10:03 ?440次閱讀
    <b class='flag-5'>鴻蒙</b>開發管理:ohos.account.distributedAccount <b class='flag-5'>分布式</b>帳號管理