[[420496]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

前言

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部分代碼：

"name": "com.test.distributed1.MainAbility", 
        "icon": "$media:icon", 
        "description": "$string:mainability_description", 
        "label": "$string:entry_MainAbility", 
        "type": "page", 
        "launchType": "standard", 
        "metaData": { 
          "customizeData": [ 
            { 
              "name": "hwc-theme", 
              "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar", 
              "extra": "" 
            } 
          ] 
        } 
      } 
    ], 
    "js": [ 
      { 
        "pages": [ 
          "pages/index/index" 
        ], 
        "name": "default", 
        "window": { 
          "designWidth": 720, 
          "autoDesignWidth": true 
        } 
      } 
    ] 
  } 
} 

4. 添加權限

在config.json中添加權限。

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

 在MainAbility.java中動態申請權限。

public class MainAbility extends AceAbility { 
    @Override 
    public void onStart(Intent intent) { 
        super.onStart(intent); 
 
        // 動態判斷權限 
        if (verifySelfPermission("ohos.permission.DISTRIBUTED_DATASYNC") != IBundleManager.PERMISSION_GRANTED) { 
            // 應用未被授予權限 
            if (canRequestPermission("ohos.permission.DISTRIBUTED_DATASYNC")) { 
                // 是否可以申請彈框授權(首次申請或者用戶未選擇禁止且不再提示) 
                requestPermissionsFromUser(new String[]{"ohos.permission.DISTRIBUTED_DATASYNC"}, 0); 
            } 
        } 
    } 
 
    @Override 
    public void onStop() { 
        super.onStop(); 
    } 
} 

分布式拉起

效果圖

1. 實現界面布局

在index.hml中編寫以下代碼。

添加兩個button組件，類選擇器名均為btn，分別添加一個單擊事件，按鈕上的文本分別為“加1”和“拉起”。

<div class="container"> 
    <text class="title"> 
        {{ title }} 
    </text> 
    <button class="btn" onclick="plus">加1</button> 
    <button class="btn" onclick="distributed">拉起</button> 
</div> 

在index.css中編寫以下代碼。

添加類選擇器btn，并修改其屬性值。

.container { 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
} 
 
.title { 
    font-size: 40px; 
    color: #000000; 
    opacity: 0.9; 
} 
 
.btn { 
    height: 60px; 
    width: 100px; 
    font-size: 40px; 
    background-color: aquamarine; 
    margin: 10px; 
} 

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。默認直接打開首頁)。

export default { 
    data: { 
        title: "0" 
    }, 
    onInit() { 
         
    }, 
    distributed(){ 
        let target = { 
            bundleName: "com.test.distributed1", 
            abilityName: "com.test.distributed1.MainAbility" 
        }; 
        let result = FeatureAbility.startAbility(target); 
    }, 
} 

3. 實現帶數據傳遞的分布式拉起

定義一個全局變量sum，并初始化為0。添加一個按鈕點擊事件plus()實現加1功能。

在FeatureAbility.startAbility(OBJECT)中添加一個參數data并實例化sum。

因為所有在data中設置的字段，在對端FA中均可以直接在 this下拿到，所以在生命周期事件onInit()中通過this.number取得該值。

var sum = 0; 
 
export default { 
    data: { 
        title: "0" 
    }, 
    onInit() { 
        sum = this.number; 
        this.title = sum; 
    }, 
    distributed(){ 
        let actionData = { 
            number: sum 
        }; 
        let target = { 
            bundleName: "com.test.distributed1", 
            abilityName: "com.test.distributed1.MainAbility", 
            data: actionData 
        }; 
        let result = FeatureAbility.startAbility(target); 
    }, 
    plus(){ 
        sum++; 
        this.title = sum; 
    } 
} 

分布式遷移

效果圖

1. 實現界面布局

創建一個名為Distributed2的Empty JS Phone空應用。

在index.hml中編寫以下代碼。

添加兩個button組件，類選擇器名均為btn，分別添加一個單擊事件，按鈕上的文本分別為“加1”和“遷移”。

<div class="container"> 
    <text class="title"> 
        {{ title }} 
    </text> 
    <button class="btn" onclick="plus">加1</button> 
    <button class="btn" onclick="distributed">拉起</button> 
</div> 

在index.css中編寫以下代碼。

添加類選擇器btn，并修改其屬性值。

.container { 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
} 
 
.title { 
    font-size: 40px; 
    color: #000000; 
    opacity: 0.9; 
} 
 
.btn { 
    height: 60px; 
    width: 100px; 
    font-size: 40px; 
    background-color: aquamarine; 
    margin: 10px; 
} 

2. 實現分布式遷移

在index.js中編寫以下代碼。

分布式遷移提供了一個主動遷移接口及一系列頁面生命周期回調，以支持將本地業務無縫遷移到指定設備中。添加按鈕點擊事件distributed()通過FeatureAbility.continueAbility()方法主動進行FA遷移的入口。

其中onStartContinuation()為FA發起遷移時的回調，在此回調中應用可以根據當前狀態決定是否遷移。返回值為Boolean類型，true表示允許進行遷移，false表示不允許遷移。

onSaveData(OBJECT)為保存狀態數據的回調，開發者需要往參數對象中填入需遷移到目標設備上的數據。參數為可被序列化的自定義數據。

onRestoreData(OBJECT)為恢復發起遷移時onSaveData方法保存的數據的回調，用于恢復應用狀態的對象，其中的數據及結構由onSaveData決定。

onCompleteContinuation(code)為遷移完成的回調，在調用端被觸發，表示應用遷移到目標設備上的結果。參數為遷移完成的結果。0：成功，-1：失敗。

export default { 
    data: { 
        title: "0" 
    }, 
    onStartContinuation() { // 判斷當前的狀態是不是適合遷移 
        console.info("onStartContinuation被調用,適合遷移"); 
        return true; 
    }, 
 
    onCompleteContinuation(code) { // 遷移操作完成，code返回結果 
        if(code == 0){ 
            console.info("onCompleteContinuation(code)被調用,遷移成功"); 
        } else if(code == -1){ 
            console.info("onCompleteContinuation(code)被調用,遷移失敗"); 
        } 
    }, 
    onSaveData(saveData) { // 數據保存到savedData中進行遷移。 
        console.info("onSaveData(saveData)被調用"); 
    }, 
    onRestoreData(restoreData) { // 收到遷移數據，恢復。 
        console.info("onRestoreData(restoreData)被調用"); 
    }, 
    distributed(){ 
        let result =  FeatureAbility.continueAbility(); 
    } 
} 

3. 實現帶數據傳遞的分布式遷移

定義一個序列化continueAbilityData，其中的number為0。添加一個按鈕點擊事件plus()實現加1功能。

在onSaveData(saveData)函數中將序列化continueAbilityData保存到savedData中進行遷移。在onRestoreData(restoreData)函數中將遷移的數據顯示出來。

export default { 
    data: { 
        title: "0", 
        continueAbilityData: { 
            number: 0 
        } 
    }, 
    onStartContinuation() { // 判斷當前的狀態是不是適合遷移 
        console.info("onStartContinuation被調用,適合遷移"); 
        return true; 
    }, 
 
    onCompleteContinuation(code) { // 遷移操作完成，code返回結果 
        if(code == 0){ 
            console.info("onCompleteContinuation(code)被調用,遷移成功"); 
        } else if(code == -1){ 
            console.info("onCompleteContinuation(code)被調用,遷移失敗"); 
        } 
    }, 
    onSaveData(saveData) { // 數據保存到savedData中進行遷移。 
        var data = this.continueAbilityData; 
        Object.assign(saveData, data) 
        console.info("onSaveData(saveData)被調用"); 
    }, 
    onRestoreData(restoreData) { // 收到遷移數據，恢復。 
        this.continueAbilityData = restoreData; 
        this.title = this.continueAbilityData.number; 
        console.info("onRestoreData(restoreData)被調用"); 
    }, 
    distributed(){ 
        let result =  FeatureAbility.continueAbility(); 
    }, 
    plus(){ 
        this.continueAbilityData.number++; 
        this.title = this.continueAbilityData.number; 
    } 
} 

寫在最后

本項目會長期更新 ，希望隨著鴻蒙一同成長變強的既有我們，也有正在看著這個項目的你。明年3月，深大校園內的木棉花會盛開，那時，鴻蒙也會變的更好，愿這花開，有你我的一份。

文章相關附件可以點擊下面的原文鏈接前往下載

Distributed1.zip

Distributed2.zip

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com