HarmonyOSJS分布式能力—學習筆記
前言
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月，深大校園內的木棉花會盛開，那時，鴻蒙也會變的更好，愿這花開，有你我的一份。
文章相關附件可以點擊下面的原文鏈接前往下載
