HarmonyOSJS 分散機能 - 学習ノート

[[420496]]
詳細については、以下をご覧ください。
51CTOとHuaweiが共同で構築したHongmengテクノロジーコミュニティ
https://harmonyos..com

序文

JS には分散機能もあります。今回は、JSの分散プルアップと分散マイグレーションを2つの小さなプロジェクトで紹介します♪(∇*)

文章

これは公式サイトから見つけたFAライフサイクルにおける分散APIの位置づけ図です。図の onStartContinuation()、onSaveData(OBJECT)、onRestoreData(OBJECT)、onCompleteContinuation(code) はすべて分散機能インターフェースです。

プロジェクトに対して同じ操作を実行します:

1. DevEco Studio 2.1リリースをインストールして構成する

DevEco Studio 2.1 リリースのダウンロード、DevEco Studio 2.1 リリースのインストール

2. 空のJava電話アプリケーションを作成する

DevEco Studio が正常にダウンロードされインストールされたら、DevEco Studio を開き、左上隅の [ファイル] をクリックし、[新規] をクリックして [新しいプロジェクト] を選択し、[空の機能 (Java)] オプションを選択して、[次へ] ボタンをクリックします。

分散プルアップの場合、ファイルにDistributrd1という名前を付けます。分散移行の場合、ファイルに Distributrd2 という名前を付け（ファイル名に中国語や特殊文字を含めることはできません。含めるとプロジェクトファイルが正常に作成されません）、保存パスを選択し、API5 を選択し、デバイスとして Phone をチェックして、最後に [完了] ボタンをクリックします。

3. 準備

アプリケーション上部のタブバーを削除するには、entry>src>main>config.json ファイルの下部にある "launchType": "standard" の後に次のコードを追加します。

config.json コードの一部:

 「名前」 : 「com.test.distributed1.MainAbility」 、
 "アイコン" : "$media:icon" ,
 "説明" : "$string:mainability_description" ,
 "ラベル" : "$string:entry_MainAbility" ,
 「タイプ」 : 「ページ」 、
 「起動タイプ」 : 「標準」 、
 「メタデータ」 : {
 「カスタマイズデータ」 : [
            {
 「名前」 : 「hwc-テーマ」 、
 「値」 : 「androidhwext:style/Theme.Emui.Light.NoTitleBar」 、
 "余分な" ： ""  
            }
          ]
        }
      }
    ]、
 "js" : [
      {
 「ページ」 : [
 「ページ/インデックス/インデックス」  
        ]、
 「名前」 : 「デフォルト」 、
 「ウィンドウ」 :{
 "デザイン幅" : 720,
 "autoDesignWidth" : true  
        }
      }
    ]
  }
 }

4. 権限を追加する

config.json に権限を追加します。

 「必要な権限」 : [
    {
 「名前」 : 「ohos.permission.DISTRIBUTED_DATASYNC」  
    }
  ]、

MainAbility.java で権限を動的に適用します。

パブリッククラスMainAbilityはAceAbilityを拡張します{
    @オーバーライド
パブリックvoid onStart(インテント インテント) {
        super.onStart(インテント); 
 
        // 権限を動的に決定する
        （検証SelfPermission（ "ohos.permission.DISTRIBUTED_DATASYNC" ） != IBundleManager.PERMISSION_GRANTED）{
            // アプリケーションに権限が付与されていません
            （ 「ohos.permission.DISTRIBUTED_DATASYNC」という権限を要求する場合）{
                // ポップアップ認証を申請することは可能ですか (初めての申請またはユーザーが禁止を選択しておらず、プロンプトが表示されない場合)
                requestPermissionsFromUser(新しい文字列[]{ "ohos.permission.DISTRIBUTED_DATASYNC" }, 0);
            }
        }
    } 
 
    @オーバーライド
パブリックボイドonStop() {
        スーパーのonStop();
    }
 }

分散プルアップ

レンダリング

1. インターフェースレイアウトを実装する

index.hml に次のコードを記述します。

クラスセレクタ名が btn である 2 つのボタンコンポーネントを追加し、それぞれにクリックイベントを追加します。ボタン上のテキストはそれぞれ「Add 1」と「Pull up」になります。

 <div クラス = "コンテナ" >
    <テキストクラス= "タイトル" >
        {{ タイトル }}
    </テキスト>
    <button class= "btn" onclick= "plus" >1 を追加</button>
    <button class= "btn" onclick= "distributed" >プルアップ</button>
 </div>

index.css に次のコードを記述します。

クラスセレクターボタンを追加し、その属性値を変更します。

 。容器 {
    flex-direction:列;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
 } 
 
 。タイトル {
    フォントサイズ: 40px;
    色: #000000;
    不透明度: 0.9;
 } 
 
 .btn{
    高さ: 60px;
    幅: 100ピクセル;
    フォントサイズ: 40px;
    背景色: アクアマリン;
    マージン: 10px;
 }

2. 分散プルアップを実装する

index.js に次のコードを記述します。

分散起動を使用すると、ローカルまたはリモートの FA を起動し、起動時にパラメータを渡すことができます。ボタンクリックイベント distribution() を追加して、コールバック結果なしで FeatureAbility.startAbility(OBJECT) メソッドを通じて FA を開始し、リモートまたはローカルの FA を明示的に開始できるようにします。

OBJECT は RequestParams 型のパラメータで、必須の bundleName (起動するパッケージ名。abilityName と一緒に使用する必要があります。大文字と小文字が区別されます)、abilityName (起動するアビリティ名。大文字と小文字が区別されます)、オプションの entity (呼び出す FA が属するエンティティリスト。未記入の場合は、デフォルトですべてのエンティティリストが検索されます。action と一緒に使用する必要があります)、action (パッケージ名とアビリティ名を指定せずに、action 値を渡すことで、Operation の他のプロパティに従ってアプリケーションを起動できます)、deviceType (デフォルト 0: ローカルデバイスとリモートデバイスから起動する FA を選択します。1: ローカルデバイスから FA を起動します。条件を満たす FA が複数ある場合は、ユーザーがデバイスを選択するためのポップアップボックスが表示されます)、data (相手に渡すパラメータを指定します。シリアル化する必要があります)、flag (FA をプルアップする際の設定スイッチ。インストールするかどうかなど)、url (プルアップ時に開くページの URL を指定します) が含まれます。 FA。デフォルトではホームページが直接開きます。

エクスポートデフォルト{
    データ： {
        タイトル: "0"  
    },
    初期化() { 
         
    },
    分散(){
        ターゲット = {
            バンドル名: "com.test.distributed1" 、
            能力名: "com.test.distributed1.MainAbility"  
        };
        結果を FeatureAbility.startAbility(target); とします。
    },
 }

3. データ転送による分散プルアップを実装する

グローバル変数 sum を定義し、0 に初期化します。ボタンクリックイベント plus() を追加して、plus 1 関数を実装します。

FeatureAbility.startAbility(OBJECT) にパラメータデータを追加し、sum をインスタンス化します。

data に設定されているすべてのフィールドはピア FA の this の下で直接取得できるため、ライフサイクルイベント onInit() で this.number を通じて値が取得されます。

 var合計= 0; 
 
エクスポートデフォルト{
    データ： {
        タイトル: "0"  
    },
    初期化() {
合計= this.number;
        this.title =合計;
    },
    分散(){
        アクションデータ = {
            数:合計 
        };
        ターゲット = {
            バンドル名: "com.test.distributed1" 、
            能力名: "com.test.distributed1.MainAbility" 、
            データ: アクションデータ
        };
        結果を FeatureAbility.startAbility(target); とします。
    },
    プラス（）{
合計++;
        this.title =合計;
    }
 }

分散移行

レンダリング

1. インターフェースレイアウトを実装する

Distributed2 という空の JS Phone アプリケーションを作成します。

index.hml に次のコードを記述します。

クラスセレクタ名が btn である 2 つのボタンコンポーネントを追加し、それぞれにクリックイベントを追加します。ボタン上のテキストはそれぞれ「Add 1」と「Migrate」になります。

 <div クラス = "コンテナ" >
    <テキストクラス= "タイトル" >
        {{ タイトル }}
    </テキスト>
    <button class= "btn" onclick= "plus" >1 を追加</button>
    <button class= "btn" onclick= "distributed" >プルアップ</button>
 </div>

index.css に次のコードを記述します。

クラスセレクターボタンを追加し、その属性値を変更します。

 。容器 {
    flex-direction:列;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
 } 
 
 。タイトル {
    フォントサイズ: 40px;
    色: #000000;
    不透明度: 0.9;
 } 
 
 .btn{
    高さ: 60px;
    幅: 100ピクセル;
    フォントサイズ: 40px;
    背景色: アクアマリン;
    マージン: 10px;
 }

2. 分散移行の実装

index.js に次のコードを記述します。

分散移行では、アクティブな移行インターフェースと一連のページライフサイクルコールバックが提供され、指定されたデバイスへのローカルサービスのシームレスな移行がサポートされます。ボタンクリックイベント distribution() を追加して、FeatureAbility.continueAbility() メソッドを通じて FA 移行をアクティブに実行します。

このうち、onStartContinuation() は、FA が移行を開始するときのコールバックです。このコールバックでは、アプリケーションは現在の状態に基づいて移行するかどうかを決定できます。戻り値はブール型です。 true は移行が許可されることを意味し、false は移行が許可されないことを意味します。

onSaveData(OBJECT) はステータスデータを保存するためのコールバックです。開発者は、ターゲットデバイスに移行するデータをパラメーターオブジェクトに入力する必要があります。パラメータはシリアル化できるカスタムデータです。

onRestoreData(OBJECT) は、移行を開始するときに onSaveData メソッドによって保存されたデータを復元するためのコールバックです。アプリケーション状態のオブジェクトを復元するために使用されます。データと構造は onSaveData によって決定されます。

onCompleteContinuation(code) は移行完了のコールバックであり、呼び出し側でトリガーされ、ターゲットデバイスへのアプリケーション移行の結果を示します。パラメータは移行の結果です。 0: 成功、-1: 失敗。

エクスポートデフォルト{
    データ： {
        タイトル: "0"  
    },
    onStartContinuation() { // 現在の状態が移行に適しているかどうかを判断します
        console.info( "onStartContinuation が呼び出されました。移行に適しています" );
戻る 真実;
    }, 
 
    onCompleteContinuation(code) { // 移行操作が完了し、コードが結果を返します
        if(コード == 0){
            console.info( "onCompleteContinuation(code) が呼び出され、移行が成功しました" );
        }そうでない場合(コード == -1){
            console.info( "onCompleteContinuation(code) が呼び出されましたが、移行に失敗しました" );
        }
    },
    onSaveData(saveData) { // データは移行のために savedData に保存されます。
        console.info( "onSaveData(saveData) が呼び出されます" );
    },
    onRestoreData(restoreData) { // 移行データを受信して復元します。
        console.info( "onRestoreData(restoreData) が呼び出されます" );
    },
    分散(){
        結果を FeatureAbility.continueAbility() とします。
    }
 }

3. データ転送による分散移行の実装

番号が 0 のシリアル化された continueAbilityData を定義します。ボタンクリックイベント plus() を追加して、plus 1 関数を実装します。

onSaveData(saveData) 関数で、移行のためにシリアル化された continueAbilityData を savedData に保存します。 onRestoreData(restoreData) 関数で移行されたデータを表示します。

エクスポートデフォルト{
    データ： {
        タイトル: "0" ,
        継続能力データ: {
            番号: 0
        }
    },
    onStartContinuation() { // 現在の状態が移行に適しているかどうかを判断します
        console.info( "onStartContinuation が呼び出されました。移行に適しています" );
戻る 真実;
    }, 
 
    onCompleteContinuation(code) { // 移行操作が完了し、コードが結果を返します
        if(コード == 0){
            console.info( "onCompleteContinuation(code) が呼び出され、移行が成功しました" );
        }そうでない場合(コード == -1){
            console.info( "onCompleteContinuation(code) が呼び出されましたが、移行に失敗しました" );
        }
    },
    onSaveData(saveData) { // データは移行のために savedData に保存されます。
        var データ = this.continueAbilityData;
        オブジェクト.assign(saveData, データ)
        console.info( "onSaveData(saveData) が呼び出されます" );
    },
    onRestoreData(restoreData) { // 移行データを受信して復元します。
        this.continueAbilityData = restoreData;
        this.title = this.continueAbilityData.number;
        console.info( "onRestoreData(restoreData) が呼び出されます" );
    },
    分散(){
        結果を FeatureAbility.continueAbility() とします。
    },
    プラス（）{
        this.continueAbilityData.number++;
        this.title = this.continueAbilityData.number;
    }
 }

最後に

このプロジェクトは長期間にわたって更新されます。私たちも、このプロジェクトをご覧になっている皆様も、Hongmengとともに成長し、強くなっていくことを願っています。来年3月には深セン大学のキャンパス内のカポックの花が満開になる予定だ。その時までに、洪蒙は良くなるでしょう。あなたと私がこの花の開花を共有できれば幸いです。

記事に関連する添付ファイルをダウンロードするには、以下のリンクをクリックしてください。

配布1.zip

配布2.zip

詳細については、以下をご覧ください。

51CTOとHuaweiが共同で構築したHongmengテクノロジーコミュニティ

https://harmonyos..com

<<: Alibaba第2回インタビュー：Redis分散ロックの有効期限が切れたが、業務が完了していない場合はどうすればよいですか？

>>: 分散アプリケーションを簡単に作成