鸿蒙版JS如何实现分布式仿抖音应用
之前大家看过了 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
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
③评论功能添加
评论功能使用了鸿蒙 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 评论功能有两部分，评论列表和评论发送输入框。
{{ $item.name }}
{{ $item.detail }} 发送
功能实现逻辑：
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) { var actiondata = {}; actiondata.firstnum = 1024; actiondata.secondnum = 2048; var action = {}; 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;//同步还是异步类型 return action; }, getlevel: async function () { try { var action = this.initaction(1001); var result = await featureability.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 : plugin error = + pluginerror); } }
java 端实现如下：
java 端需要创建一个 ability 服务继承 aceinternalability 具体是使用哪种类型，看上面的解释。
创建后需要注册，比如我创建的是 internalability 这样注册：deviceinternalability.register(this);
package com.corecode.video.videoplayer;public class deviceinternalability extends aceinternalability { private static final hiloglabel tag = new hiloglabel(0, 0, deviceinternalability); private static final int connect_ability = 2000; private static final int disconnect_ability = 2001; private static final int send_msg = 1001; private static final int success_code = 0; private static final int fail_code = -1; private static deviceinternalability instance; private string selectdeviceid; /** * default constructor * * @param context ability context */ public deviceinternalability(abilitycontext context) { super(com.corecode.video.videoplayer, com.corecode.video.videoplayer.deviceinternalability); } public deviceinternalability(string bundlename, string abilityname) { super(bundlename, abilityname); } public deviceinternalability(string abilityname) { super(abilityname); } /** * setinternalabilityhandler for distributeinternalability instance * * @param context ability context */ static void register(abilitycontext context) { instance = new deviceinternalability(context); instance.setinternalabilityhandler((code, data, reply, option) -> instance.onremoterequest(code, data, reply, option)); } /** * destroy distributeinternalability instance */ private static void unregister() { instance.destroy(); } /** * default destructor */ private void destroy() { } /** * hand click request from javascript * * @param code action_code * @param data data sent from javascript * @param reply reply for javascript * @param option currently excessive * @return whether javascript click event is correctly responded */ private boolean onremoterequest(int code, messageparcel data, messageparcel reply, messageoption option) { map replyresult = new hashmap(); switch (code) { // send message to remote device, message contains controller command from fa case send_msg: { zsonobject dataparsed = zsonobject.stringtozson(data.readstring()); int message = dataparsed.getintvalue(message);// // sync// if (option.getflags() == messageoption.tf_sync) {// reply.writestring(zsonobject.tozsonstring(result));// } // async // 返回结果当前仅支持string，对于复杂结构可以序列化为zson字符串上报 map result = new hashmap(); result.put(result, mainability.getlist()); messageparcel responsedata = messageparcel.obtain(); responsedata.writestring(zsonobject.tozsonstring(result)); iremoteobject remotereply = reply.readremoteobject(); try { remotereply.sendrequest(0, responsedata, messageparcel.obtain(), new messageoption()); } catch (remoteexception exception) { return false; } finally { responsedata.reclaim(); } break; } // to invoke remote device's newsshare ability and send news url we transfer case connect_ability: { zsonobject dataparsed = zsonobject.stringtozson(data.readstring()); selectdeviceid = dataparsed.getstring(deviceid); break; } // when controller fa went to destroy lifecycle, disconnect with remote newsshare ability case disconnect_ability: { unregister(); break; } default: hilog.error(tag, messagecode not handle properly in phone distributeinternalability); } return true; } private void assemblereplyresult(int code, map replyresult, object content, messageparcel reply) { replyresult.put(code, code); replyresult.put(content, content); reply.writestring(zsonobject.tozsonstring(replyresult)); }}
js 调用后会进入 java 的 onremoterequest 函数进行数据解析和组织，然后通过如下接口将需要的结果回传给 js 做界面展示和操作。
remotereply.sendrequest(0, responsedata, messageparcel.obtain(), new messageoption());
获取设备信息：
list deviceinfos = devicemanager.getdevicelist(deviceinfo.flag_get_online_device);
⑤分布式迁移 鸿蒙中分布式迁移真的是做到了强大，在 js 中只需要四个函数就能完成分布式迁移。
onsavedata(savedata) { // 数据保存到saveddata中进行迁移。 var data = { 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() {//迁移开始 return true; },
迁移：上面的四个有关函数设置好后执行下面的接口就能实现分布式迁移了。
continuevideoability: async function () {let conti = await featureability.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
求一种SEANTEC光伏储能系统热管理解决方案
曙光天津市政务云平台获得商用密评认证
UCOS-II操作系统在ZEVIO1020上移植过程的主要步骤详解
音箱功率参数的秘密
国芯思辰|高灵敏度霍尔开关AH503可用于汽车天窗，替代HAL1503
鸿蒙版JS如何实现分布式仿抖音应用
物联网将如何协助治理城市空气污染
详细分析光学相控阵LiDAR
这款多功能旗舰无线串口模块，你可以完全信任它！
常见的仪器仪表原理：温度仪表/压力仪表/流量仪表
功率二极管是什么
iPhone8什么时候上市？iPhone8最新消息：iPhone8即将发布六大升级汇总，史无前例值得期待
任正非：华为永远不会出售手机业务
移动通信网络行业发生了一起重大事故
半导体产业库存下降 厂商不看好市场前景
NB-IoT物联网智能温湿度监测系统的特点
【服务器数据恢复】Hp服务器raid磁盘阵列数据恢复案例
地物光谱仪应该如何正确操作？-莱森光学
光纤开关与光电开关区别
光圣RF连接器将往军用、医疗高端应用发展
功能：分布式迁移到不同设备，视频进行评论，播放视频，可以像抖音一样切换视频，可以点赞，分享等操作。
开发版本：sdk6，deveco studio3.0 beta1。
主要代码
①视频播放 鸿蒙 js 中有专门【video】的组件，并且非常完善，可以直接使用：
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-media-video-0000000000611764
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
③评论功能添加
评论功能使用了鸿蒙 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 评论功能有两部分，评论列表和评论发送输入框。
{{ $item.name }}
{{ $item.detail }} 发送
功能实现逻辑：
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) { var actiondata = {}; actiondata.firstnum = 1024; actiondata.secondnum = 2048; var action = {}; 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;//同步还是异步类型 return action; }, getlevel: async function () { try { var action = this.initaction(1001); var result = await featureability.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 : plugin error = + pluginerror); } }
java 端实现如下：
java 端需要创建一个 ability 服务继承 aceinternalability 具体是使用哪种类型，看上面的解释。
创建后需要注册，比如我创建的是 internalability 这样注册：deviceinternalability.register(this);
package com.corecode.video.videoplayer;public class deviceinternalability extends aceinternalability { private static final hiloglabel tag = new hiloglabel(0, 0, deviceinternalability); private static final int connect_ability = 2000; private static final int disconnect_ability = 2001; private static final int send_msg = 1001; private static final int success_code = 0; private static final int fail_code = -1; private static deviceinternalability instance; private string selectdeviceid; /** * default constructor * * @param context ability context */ public deviceinternalability(abilitycontext context) { super(com.corecode.video.videoplayer, com.corecode.video.videoplayer.deviceinternalability); } public deviceinternalability(string bundlename, string abilityname) { super(bundlename, abilityname); } public deviceinternalability(string abilityname) { super(abilityname); } /** * setinternalabilityhandler for distributeinternalability instance * * @param context ability context */ static void register(abilitycontext context) { instance = new deviceinternalability(context); instance.setinternalabilityhandler((code, data, reply, option) -> instance.onremoterequest(code, data, reply, option)); } /** * destroy distributeinternalability instance */ private static void unregister() { instance.destroy(); } /** * default destructor */ private void destroy() { } /** * hand click request from javascript * * @param code action_code * @param data data sent from javascript * @param reply reply for javascript * @param option currently excessive * @return whether javascript click event is correctly responded */ private boolean onremoterequest(int code, messageparcel data, messageparcel reply, messageoption option) { map replyresult = new hashmap(); switch (code) { // send message to remote device, message contains controller command from fa case send_msg: { zsonobject dataparsed = zsonobject.stringtozson(data.readstring()); int message = dataparsed.getintvalue(message);// // sync// if (option.getflags() == messageoption.tf_sync) {// reply.writestring(zsonobject.tozsonstring(result));// } // async // 返回结果当前仅支持string，对于复杂结构可以序列化为zson字符串上报 map result = new hashmap(); result.put(result, mainability.getlist()); messageparcel responsedata = messageparcel.obtain(); responsedata.writestring(zsonobject.tozsonstring(result)); iremoteobject remotereply = reply.readremoteobject(); try { remotereply.sendrequest(0, responsedata, messageparcel.obtain(), new messageoption()); } catch (remoteexception exception) { return false; } finally { responsedata.reclaim(); } break; } // to invoke remote device's newsshare ability and send news url we transfer case connect_ability: { zsonobject dataparsed = zsonobject.stringtozson(data.readstring()); selectdeviceid = dataparsed.getstring(deviceid); break; } // when controller fa went to destroy lifecycle, disconnect with remote newsshare ability case disconnect_ability: { unregister(); break; } default: hilog.error(tag, messagecode not handle properly in phone distributeinternalability); } return true; } private void assemblereplyresult(int code, map replyresult, object content, messageparcel reply) { replyresult.put(code, code); replyresult.put(content, content); reply.writestring(zsonobject.tozsonstring(replyresult)); }}
js 调用后会进入 java 的 onremoterequest 函数进行数据解析和组织，然后通过如下接口将需要的结果回传给 js 做界面展示和操作。
remotereply.sendrequest(0, responsedata, messageparcel.obtain(), new messageoption());
获取设备信息：
list deviceinfos = devicemanager.getdevicelist(deviceinfo.flag_get_online_device);
⑤分布式迁移 鸿蒙中分布式迁移真的是做到了强大，在 js 中只需要四个函数就能完成分布式迁移。
onsavedata(savedata) { // 数据保存到saveddata中进行迁移。 var data = { 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() {//迁移开始 return true; },
迁移：上面的四个有关函数设置好后执行下面的接口就能实现分布式迁移了。
continuevideoability: async function () {let conti = await featureability.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
求一种SEANTEC光伏储能系统热管理解决方案
曙光天津市政务云平台获得商用密评认证
UCOS-II操作系统在ZEVIO1020上移植过程的主要步骤详解
音箱功率参数的秘密
国芯思辰|高灵敏度霍尔开关AH503可用于汽车天窗，替代HAL1503
鸿蒙版JS如何实现分布式仿抖音应用
物联网将如何协助治理城市空气污染
详细分析光学相控阵LiDAR
这款多功能旗舰无线串口模块，你可以完全信任它！
常见的仪器仪表原理：温度仪表/压力仪表/流量仪表
功率二极管是什么
iPhone8什么时候上市？iPhone8最新消息：iPhone8即将发布六大升级汇总，史无前例值得期待
任正非：华为永远不会出售手机业务
移动通信网络行业发生了一起重大事故
半导体产业库存下降 厂商不看好市场前景
NB-IoT物联网智能温湿度监测系统的特点
【服务器数据恢复】Hp服务器raid磁盘阵列数据恢复案例
地物光谱仪应该如何正确操作？-莱森光学
光纤开关与光电开关区别
光圣RF连接器将往军用、医疗高端应用发展