HarmonyOSJS分布式能力—学习笔记

HarmonyOSJS分布式能力—学习笔记

作者：木棉花HOS 2021-08-30 18:36:33

开发

前端

分布式

OpenHarmony JS也是具有分布式能力的，本文就以两个小项目来分享JS的分布式拉起和分布式迁移♪(∇*),分布式拉起允许拉起一个本地或远程的FA，拉起时可以传递参数。

创新互联公司客户idc服务中心，提供IDC机房托管、成都服务器、成都主机托管、成都双线服务器等业务的一站式服务。通过各地的服务中心，我们向成都用户提供优质廉价的产品以及开放、透明、稳定、高性价比的服务，资深网络工程师在机房提供7*24小时标准级技术保障。

想了解更多内容，请访问：

51CTO和华为官方合作共建的鸿蒙技术社区

前言

JS也是具有分布式能力的，本文就以两个小项目来分享JS的分布式拉起和分布式迁移(∇*)

正文

这是从官网中找到的分布式API在FA生命周期中的位置图，图中的onStartContinuation()、onSaveData(OBJECT)、onRestoreData(OBJECT)和onCompleteContinuation(code)均为分布式能力接口

项目相同的操作：

1. 安装和配置DevEco Studio 2.1 Release

DevEco Studio 2.1 Release下载、DevEco Studio 2.1 Release安装

2. 创建一个Empty Java Phone应用

DevEco Studio下载安装成功后，打开DevEco Studio，点击左上角的File，点击New，再选择New Project，选择Empty Ability(Java)选项，点击Next按钮。

分布式拉起将文件命名为Distributrd1，分布式迁移将文件命名为Distributrd2(文件名不能出现中文或者特殊字符，否则将无法成功创建项目文件)，选择保存路径，选择API5，设备勾选Phonet，最后点击Finish按钮。

3. 准备工作

在entry>src>main>config.json文件中最下方"launchType": "standard"的后面添加以下代码，这样就可以实现去掉应用上方的标签栏了。

config.json部分代码：

  
 
 
 
    
   
  
  
  
  1. "name": "com.test.distributed1.MainAbility",
    2. 
   
  
  
  
  2.         "icon": "$media:icon",
    3. 
   
  
  
  
  3.         "description": "$string:mainability_description",
    4. 
   
  
  
  
  4.         "label": "$string:entry_MainAbility",
    5. 
   
  
  
  
  5.         "type": "page",
    6. 
   
  
  
  
  6.         "launchType": "standard",
    7. 
   
  
  
  
  7.         "metaData": {
    8. 
   
  
  
  
  8.           "customizeData": [
    9. 
   
  
  
  
  9.             {
    10. 
   
  
  
  
  10.               "name": "hwc-theme",
    11. 
   
  
  
  
  11.               "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar",
    12. 
   
  
  
  
  12.               "extra": ""
    13. 
   
  
  
  
  13.             }
    14. 
   
  
  
  
  14.           ]
    15. 
   
  
  
  
  15.         }
    16. 
   
  
  
  
  16.       }
    17. 
   
  
  
  
  17.     ],
    18. 
   
  
  
  
  18.     "js": [
    19. 
   
  
  
  
  19.       {
    20. 
   
  
  
  
  20.         "pages": [
    21. 
   
  
  
  
  21.           "pages/index/index"
    22. 
   
  
  
  
  22.         ],
    23. 
   
  
  
  
  23.         "name": "default",
    24. 
   
  
  
  
  24.         "window": {
    25. 
   
  
  
  
  25.           "designWidth": 720,
    26. 
   
  
  
  
  26.           "autoDesignWidth": true
    27. 
   
  
  
  
  27.         }
    28. 
   
  
  
  
  28.       }
    29. 
   
  
  
  
  29.     ]
    30. 
   
  
  
  
  30.   }
    31. 
   
  
  
  
  31. }
    32.

4. 添加权限

在config.json中添加权限。

  
 
 
 
    
   
  
  
  
  1. "reqPermissions": [
    2. 
   
  
  
  
  2.     {
    3. 
   
  
  
  
  3.       "name": "ohos.permission.DISTRIBUTED_DATASYNC"
    4. 
   
  
  
  
  4.     }
    5. 
   
  
  
  
  5.   ],
    6.

 在MainAbility.java中动态申请权限。

  
 
 
 
    
   
  
  
  
  1. public class MainAbility extends AceAbility {
    2. 
   
  
  
  
  2.     @Override
    3. 
   
  
  
  
  3.     public void onStart(Intent intent) {
    4. 
   
  
  
  
  4.         super.onStart(intent);
    5. 
   
  
  
  
  5. 
   
  
  
  
  6.         // 动态判断权限
    7. 
   
  
  
  
  7.         if (verifySelfPermission("ohos.permission.DISTRIBUTED_DATASYNC") != IBundleManager.PERMISSION_GRANTED) {
    8. 
   
  
  
  
  8.             // 应用未被授予权限
    9. 
   
  
  
  
  9.             if (canRequestPermission("ohos.permission.DISTRIBUTED_DATASYNC")) {
    10. 
   
  
  
  
  10.                 // 是否可以申请弹框授权(首次申请或者用户未选择禁止且不再提示)
    11. 
   
  
  
  
  11.                 requestPermissionsFromUser(new String[]{"ohos.permission.DISTRIBUTED_DATASYNC"}, 0);
    12. 
   
  
  
  
  12.             }
    13. 
   
  
  
  
  13.         }
    14. 
   
  
  
  
  14.     }
    15. 
   
  
  
  
  15. 
   
  
  
  
  16.     @Override
    17. 
   
  
  
  
  17.     public void onStop() {
    18. 
   
  
  
  
  18.         super.onStop();
    19. 
   
  
  
  
  19.     }
    20. 
   
  
  
  
  20. }
    21.

分布式拉起

效果图

1. 实现界面布局

在index.hml中编写以下代码。

添加两个button组件，类选择器名均为btn，分别添加一个单击事件，按钮上的文本分别为“加1”和“拉起”。

  
 
 
 
    
   
  
  
  
    2. 
   
  
  
  
  2.     
    3. 
   
  
  
  
  3.         {{ title }}
    4. 
   
  
  
  
  4.     
    5. 
   
  
  
  
  5.     加1
    6. 
   
  
  
  
  6.     拉起
    7.

在index.css中编写以下代码。

添加类选择器btn，并修改其属性值。

  
 
 
 
    
   
  
  
  
  1. .container {
    2. 
   
  
  
  
  2.     flex-direction: column;
    3. 
   
  
  
  
  3.     justify-content: center;
    4. 
   
  
  
  
  4.     align-items: center;
    5. 
   
  
  
  
  5. }
    6. 
   
  
  
  
  6. 
   
  
  
  
  7. .title {
    8. 
   
  
  
  
  8.     font-size: 40px;
    9. 
   
  
  
  
  9.     color: #000000;
    10. 
   
  
  
  
  10.     opacity: 0.9;
    11. 
   
  
  
  
  11. }
    12. 
   
  
  
  
  12. 
   
  
  
  
  13. .btn {
    14. 
   
  
  
  
  14.     height: 60px;
    15. 
   
  
  
  
  15.     width: 100px;
    16. 
   
  
  
  
  16.     font-size: 40px;
    17. 
   
  
  
  
  17.     background-color: aquamarine;
    18. 
   
  
  
  
  18.     margin: 10px;
    19. 
   
  
  
  
  19. }
    20.

2. 实现分布式拉起

在index.js中编写以下代码。

分布式拉起允许拉起一个本地或远程的FA，拉起时可以传递参数。添加按钮点击事件distributed()通过FeatureAbility.startAbility(OBJECT)方法拉起一个FA，无回调结果，允许以显式的方式，拉起远程或本地的FA。

其中OBJECT为RequestParams类型的参数，包含必填的bundleName(要启动的包名。需和abilityName配合使用，区分大小写)、abilityName(要启动的ability名，区分大小写)和选填的entities(希望被调起的FA所归属的实体列表，如果不填，默认查找所有实体列表。需配合action使用)、action(在不指定包名及ability名的情况下，可以通过传入action值从而根据Operation的其他属性启动应用)、deviceType(默认0: 从本地以及远端设备中选择要启动的FA。1: 从本地设备启动FA。有多个FA满足条件的情况下，将弹框由用户选择设备)、data(指定要传递给对方的参数，需要可被序列化)、flag(拉起FA时的配置开关，如是否免安装等)、url(拉起FA时，指定打开的页面的url。默认直接打开首页)。

  
 
 
 
    
   
  
  
  
  1. export default {
    2. 
   
  
  
  
  2.     data: {
    3. 
   
  
  
  
  3.         title: "0"
    4. 
   
  
  
  
  4.     },
    5. 
   
  
  
  
  5.     onInit() {
    6. 
   
  
  
  
  6.         
    7. 
   
  
  
  
  7.     },
    8. 
   
  
  
  
  8.     distributed(){
    9. 
   
  
  
  
  9.         let target = {
    10. 
   
  
  
  
  10.             bundleName: "com.test.distributed1",
    11. 
   
  
  
  
  11.             abilityName: "com.test.distributed1.MainAbility"
    12. 
   
  
  
  
  12.         };
    13. 
   
  
  
  
  13.         let result = FeatureAbility.startAbility(target);
    14. 
   
  
  
  
  14.     },
    15. 
   
  
  
  
  15. }
    16.

3. 实现带数据传递的分布式拉起

定义一个全局变量sum，并初始化为0。添加一个按钮点击事件plus()实现加1功能。

在FeatureAbility.startAbility(OBJECT)中添加一个参数data并实例化sum。

因为所有在data中设置的字段，在对端FA中均可以直接在 this下拿到，所以在生命周期事件onInit()中通过this.number取得该值。

  
 
 
 
    
   
  
  
  
  1. var sum = 0;
    2. 
   
  
  
  
  2. 
   
  
  
  
  3. export default {
    4. 
   
  
  
  
  4.     data: {
    5. 
   
  
  
  
  5.         title: "0"
    6. 
   
  
  
  
  6.     },
    7. 
   
  
  
  
  7.     onInit() {
    8. 
   
  
  
  
  8.         sum = this.number;
    9. 
   
  
  
  
  9.         this.title = sum;
    10. 
   
  
  
  
  10.     },
    11. 
   
  
  
  
  11.     distributed(){
    12. 
   
  
  
  
  12.         let actionData = {
    13. 
   
  
  
  
  13.             number: sum
    14. 
   
  
  
  
  14.         };
    15. 
   
  
  
  
  15.         let target = {
    16. 
   
  
  
  
  16.             bundleName: "com.test.distributed1",
    17. 
   
  
  
  
  17.             abilityName: "com.test.distributed1.MainAbility",
    18. 
   
  
  
  
  18.             data: actionData
    19. 
   
  
  
  
  19.         };
    20. 
   
  
  
  
  20.         let result = FeatureAbility.startAbility(target);
    21. 
   
  
  
  
  21.     },
    22. 
   
  
  
  
  22.     plus(){
    23. 
   
  
  
  
  23.         sum++;
    24. 
   
  
  
  
  24.         this.title = sum;
    25. 
   
  
  
  
  25.     }
    26. 
   
  
  
  
  26. }
    27.

分布式迁移

效果图

1. 实现界面布局

创建一个名为Distributed2的Empty JS Phone空应用。

在index.hml中编写以下代码。

添加两个button组件，类选择器名均为btn，分别添加一个单击事件，按钮上的文本分别为“加1”和“迁移”。

  
 
 
 
    
   
  
  
  
    2. 
   
  
  
  
  2.     
    3. 
   
  
  
  
  3.         {{ title }}
    4. 
   
  
  
  
  4.     
    5. 
   
  
  
  
  5.     加1
    6. 
   
  
  
  
  6.     拉起
    7.

在index.css中编写以下代码。

添加类选择器btn，并修改其属性值。

  
 
 
 
    
   
  
  
  
  1. .container {
    2. 
   
  
  
  
  2.     flex-direction: column;
    3. 
   
  
  
  
  3.     justify-content: center;
    4. 
   
  
  
  
  4.     align-items: center;
    5. 
   
  
  
  
  5. }
    6. 
   
  
  
  
  6. 
   
  
  
  
  7. .title {
    8. 
   
  
  
  
  8.     font-size: 40px;
    9. 
   
  
  
  
  9.     color: #000000;
    10. 
   
  
  
  
  10.     opacity: 0.9;
    11. 
   
  
  
  
  11. }
    12. 
   
  
  
  
  12. 
   
  
  
  
  13. .btn {
    14. 
   
  
  
  
  14.     height: 60px;
    15. 
   
  
  
  
  15.     width: 100px;
    16. 
   
  
  
  
  16.     font-size: 40px;
    17. 
   
  
  
  
  17.     background-color: aquamarine;
    18. 
   
  
  
  
  18.     margin: 10px;
    19. 
   
  
  
  
  19. }
    20.

2. 实现分布式迁移

在index.js中编写以下代码。

分布式迁移提供了一个主动迁移接口及一系列页面生命周期回调，以支持将本地业务无缝迁移到指定设备中。添加按钮点击事件distributed()通过FeatureAbility.continueAbility()方法主动进行FA迁移的入口。

其中onStartContinuation()为FA发起迁移时的回调，在此回调中应用可以根据当前状态决定是否迁移。返回值为Boolean类型，true表示允许进行迁移，false表示不允许迁移。

onSaveData(OBJECT)为保存状态数据的回调，开发者需要往参数对象中填入需迁移到目标设备上的数据。参数为可被序列化的自定义数据。

onRestoreData(OBJECT)为恢复发起迁移时onSaveData方法保存的数据的回调，用于恢复应用状态的对象，其中的数据及结构由onSaveData决定。

onCompleteContinuation(code)为迁移完成的回调，在调用端被触发，表示应用迁移到目标设备上的结果。参数为迁移完成的结果。0：成功，-1：失败。

  
 
 
 
    
   
  
  
  
  1. export default {
    2. 
   
  
  
  
  2.     data: {
    3. 
   
  
  
  
  3.         title: "0"
    4. 
   
  
  
  
  4.     },
    5. 
   
  
  
  
  5.     onStartContinuation() { // 判断当前的状态是不是适合迁移
    6. 
   
  
  
  
  6.         console.info("onStartContinuation被调用,适合迁移");
    7. 
   
  
  
  
  7.         return true;
    8. 
   
  
  
  
  8.     },
    9. 
   
  
  
  
  9. 
   
  
  
  
  10.     onCompleteContinuation(code) { // 迁移操作完成，code返回结果
    11. 
   
  
  
  
  11.         if(code == 0){
    12. 
   
  
  
  
  12.             console.info("onCompleteContinuation(code)被调用,迁移成功");
    13. 
   
  
  
  
  13.         } else if(code == -1){
    14. 
   
  
  
  
  14.             console.info("onCompleteContinuation(code)被调用,迁移失败");
    15. 
   
  
  
  
  15.         }
    16. 
   
  
  
  
  16.     },
    17. 
   
  
  
  
  17.     onSaveData(saveData) { // 数据保存到savedData中进行迁移。
    18. 
   
  
  
  
  18.         console.info("onSaveData(saveData)被调用");
    19. 
   
  
  
  
  19.     },
    20. 
   
  
  
  
  20.     onRestoreData(restoreData) { // 收到迁移数据，恢复。
    21. 
   
  
  
  
  21.         console.info("onRestoreData(restoreData)被调用");
    22. 
   
  
  
  
  22.     },
    23. 
   
  
  
  
  23.     distributed(){
    24. 
   
  
  
  
  24.         let result =  FeatureAbility.continueAbility();
    25. 
   
  
  
  
  25.     }
    26. 
   
  
  
  
  26. }
    27.

3. 实现带数据传递的分布式迁移

定义一个序列化continueAbilityData，其中的number为0。添加一个按钮点击事件plus()实现加1功能。

在onSaveData(saveData)函数中将序列化continueAbilityData保存到savedData中进行迁移。在onRestoreData(restoreData)函数中将迁移的数据显示出来。

  
 
 
 
    
   
  
  
  
  1. export default {
    2. 
   
  
  
  
  2.     data: {
    3. 
   
  
  
  
  3.         title: "0",
    4. 
   
  
  
  
  4.         continueAbilityData: {
    5. 
   
  
  
  
  5.             number: 0
    6. 
   
  
  
  
  6.         }
    7. 
   
  
  
  
  7.     },
    8. 
   
  
  
  
  8.     onStartContinuation() { // 判断当前的状态是不是适合迁移
    9. 
   
  
  
  
  9.         console.info("onStartContinuation被调用,适合迁移");
    10. 
   
  
  
  
  10.         return true;
    11. 
   
  
  
  
  11.     },
    12. 
   
  
  
  
  12. 
   
  
  
  
  13.     onCompleteContinuation(code) { // 迁移操作完成，code返回结果
    14. 
   
  
  
  
  14.         if(code == 0){
    15. 
   
  
  
  
  15.             console.info("onCompleteContinuation(code)被调用,迁移成功");
    16. 
   
  
  
  
  16.         } else if(code == -1){
    17. 
   
  
  
  
  17.             console.info("onCompleteContinuation(code)被调用,迁移失败");
    18. 
   
  
  
  
  18.         }
    19. 
   
  
  
  
  19.     },
    20. 
   
  
  
  
  20.     onSaveData(saveData) { // 数据保存到savedData中进行迁移。
    21. 
   
  
  
  
  21.         var data = this.continueAbilityData;
    22. 
   
  
  
  
  22.         Object.assign(saveData, data)
    23. 
   
  
  
  
  23.         console.info("onSaveData(saveData)被调用");
    24. 
   
  
  
  
  24.     },
    25. 
   
  
  
  
  25.     onRestoreData(restoreData) { // 收到迁移数据，恢复。
    26. 
   
  
  
  
  26.         this.continueAbilityData = restoreData;
    27. 
   
  
  
  
  27.         this.title = this.continueAbilityData.number;
    28. 
   
  
  
  
  28.         console.info("onRestoreData(restoreData)被调用");
    29. 
   
  
  
  
  29.     },
    30. 
   
  
  
  
  30.     distributed(){
    31. 
   
  
  
  
  31.         let result =  FeatureAbility.continueAbility();
    32. 
   
  
  
  
  32.     },
    33. 
   
  
  
  
  33.     plus(){
    34. 
   
  
  
  
  34.         this.continueAbilityData.number++;
    35. 
   
  
  
  
  35.         this.title = this.continueAbilityData.number;
    36. 
   
  
  
  
  36.     }
    37. 
   
  
  
  
  37. }
    38.

写在最后

本项目会长期更新 ，希望随着鸿蒙一同成长变强的既有我们，也有正在看着这个项目的你。明年3月，深大校园内的木棉花会盛开，那时，鸿蒙也会变的更好，愿这花开，有你我的一份。

文章题目：HarmonyOSJS分布式能力—学习笔记
URL分享：http://www.gawzjz.com/qtweb2/news37/3287.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

小程序开发知识

行业网站建设

成都酒店服定制　　 　网站建设　　 　成都网站推广　　 　网上商城开发　　 　香港机房服务器托管　　 　成都网站建设　　 　迷你发光字　　 　乐山托管服务器　　 　添翼二手车鉴定评估　　 　德阳电信机房　　 　成都网站排名　　 　西部信息服务器托管　　 　东电技服　　 　成都服务器托管　　 　成都展柜厂　　 　南充网站制作　　 　手机网站制作　　 　德信企业管理　　 　成都电信服务器托管　　 　安卓开发