HarmonyOSJS 分散機能 - 学習ノート

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 コードの一部:

  1.  「名前」 : 「com.test.distributed1.MainAbility」 、
  2.  "アイコン" : "$media:icon" ,
  3.  "説明" : "$string:mainability_description" ,
  4.  "ラベル" : "$string:entry_MainAbility" ,
  5.  「タイプ」 : 「ページ」 、
  6.  「起動タイプ」 : 「標準」 、
  7.  「メタデータ」 : {
  8.  「カスタマイズデータ」 : [
  9.             {
  10.  「名前」 : 「hwc-テーマ」 、
  11.  「値」 : 「androidhwext:style/Theme.Emui.Light.NoTitleBar」 、
  12.  "余分な" ： ""  
  13.             }
  14.           ]
  15.         }
  16.       }
  17.     ]、
  18.  "js" : [
  19.       {
  20.  「ページ」 : [
  21.  「ページ/インデックス/インデックス」  
  22.         ]、
  23.  「名前」 : 「デフォルト」 、
  24.  「ウィンドウ」 :{
  25.  "デザイン幅" : 720,
  26.  "autoDesignWidth" : true  
  27.         }
  28.       }
  29.     ]
  30.   }
  31.  }

4. 権限を追加する

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

  1.  「必要な権限」 : [
  2.     {
  3.  「名前」 : 「ohos.permission.DISTRIBUTED_DATASYNC」  
  4.     }
  5.   ]、

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

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

分散プルアップ

レンダリング

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

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

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

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

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

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

  1.  。容器 {
  2.     flex-direction:列;
  3.     コンテンツの中央揃え: 中央;
  4.     アイテムの位置を中央揃えにします。
  5.  } 
  6.  
  7.  。タイトル {
  8.     フォントサイズ: 40px;
  9.     色: #000000;
  10.     不透明度: 0.9;
  11.  } 
  12.  
  13.  .btn{
  14.     高さ: 60px;
  15.     幅: 100ピクセル;
  16.     フォントサイズ: 40px;
  17.     背景色: アクアマリン;
  18.     マージン: 10px;
  19.  }

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。デフォルトではホームページが直接開きます。

  1. エクスポートデフォルト{
  2.     データ： {
  3.         タイトル: "0"  
  4.     },
  5.     初期化() { 
  6.          
  7.     },
  8.     分散(){
  9.         ターゲット = {
  10.             バンドル名: "com.test.distributed1" 、
  11.             能力名: "com.test.distributed1.MainAbility"  
  12.         };
  13.         結果を FeatureAbility.startAbility(target); とします。
  14.     },
  15.  }

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

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

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

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

  1.  var合計= 0; 
  2.  
  3. エクスポートデフォルト{
  4.     データ： {
  5.         タイトル: "0"  
  6.     },
  7.     初期化() {
  8. 合計= this.number;
  9.         this.title =合計;
  10.     },
  11.     分散(){
  12.         アクションデータ = {
  13.             数:合計 
  14.         };
  15.         ターゲット = {
  16.             バンドル名: "com.test.distributed1" 、
  17.             能力名: "com.test.distributed1.MainAbility" 、
  18.             データ: アクションデータ
  19.         };
  20.         結果を FeatureAbility.startAbility(target); とします。
  21.     },
  22.     プラス（）{
  23. 合計++;
  24.         this.title =合計;
  25.     }
  26.  }

分散移行

レンダリング

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

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


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

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

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

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

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

  1.  。容器 {
  2.     flex-direction:列;
  3.     コンテンツの中央揃え: 中央;
  4.     アイテムの位置を中央揃えにします。
  5.  } 
  6.  
  7.  。タイトル {
  8.     フォントサイズ: 40px;
  9.     色: #000000;
  10.     不透明度: 0.9;
  11.  } 
  12.  
  13.  .btn{
  14.     高さ: 60px;
  15.     幅: 100ピクセル;
  16.     フォントサイズ: 40px;
  17.     背景色: アクアマリン;
  18.     マージン: 10px;
  19.  }

2. 分散移行の実装

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

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

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

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

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

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

  1. エクスポートデフォルト{
  2.     データ： {
  3.         タイトル: "0"  
  4.     },
  5.     onStartContinuation() { // 現在の状態が移行に適しているかどうかを判断します
  6.         console.info( "onStartContinuation が呼び出されました。移行に適しています" );
  7. 戻る 真実;
  8.     }, 
  9.  
  10.     onCompleteContinuation(code) { // 移行操作が完了し、コードが結果を返します
  11.         if(コード == 0){
  12.             console.info( "onCompleteContinuation(code) が呼び出され、移行が成功しました" );
  13.         }そうでない場合(コード == -1){
  14.             console.info( "onCompleteContinuation(code) が呼び出されましたが、移行に失敗しました" );
  15.         }
  16.     },
  17.     onSaveData(saveData) { // データは移行のために savedData に保存されます。
  18.         console.info( "onSaveData(saveData) が呼び出されます" );
  19.     },
  20.     onRestoreData(restoreData) { // 移行データを受信して​​復元します。
  21.         console.info( "onRestoreData(restoreData) が呼び出されます" );
  22.     },
  23.     分散(){
  24.         結果を FeatureAbility.continueAbility() とします。
  25.     }
  26.  }

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

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

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

  1. エクスポートデフォルト{
  2.     データ： {
  3.         タイトル: "0" ,
  4.         継続能力データ: {
  5.             番号: 0
  6.         }
  7.     },
  8.     onStartContinuation() { // 現在の状態が移行に適しているかどうかを判断します
  9.         console.info( "onStartContinuation が呼び出されました。移行に適しています" );
  10. 戻る 真実;
  11.     }, 
  12.  
  13.     onCompleteContinuation(code) { // 移行操作が完了し、コードが結果を返します
  14.         if(コード == 0){
  15.             console.info( "onCompleteContinuation(code) が呼び出され、移行が成功しました" );
  16.         }そうでない場合(コード == -1){
  17.             console.info( "onCompleteContinuation(code) が呼び出されましたが、移行に失敗しました" );
  18.         }
  19.     },
  20.     onSaveData(saveData) { // データは移行のために savedData に保存されます。
  21.         var データ = this.continueAbilityData;
  22.         オブジェクト.assign(saveData, データ)
  23.         console.info( "onSaveData(saveData) が呼び出されます" );
  24.     },
  25.     onRestoreData(restoreData) { // 移行データを受信して​​復元します。
  26.         this.continueAbilityData = restoreData;
  27.         this.title = this.continueAbilityData.number;
  28.         console.info( "onRestoreData(restoreData) が呼び出されます" );
  29.     },
  30.     分散(){
  31.         結果を FeatureAbility.continueAbility() とします。
  32.     },
  33.     プラス（）{
  34.         this.continueAbilityData.number++;
  35.         this.title = this.continueAbilityData.number;
  36.     }
  37.  }

最後に

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

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

配布1.zip

配布2.zip

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

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

https://harmonyos..com

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

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

推薦する

中国電子クラウドは、フルスタックの信頼できるコンピューティングで数千の業界を支援する専用クラウドCECSTACKをリリースしました。

2021年4月26日、第4回デジタル中国建設サミットの機会に、中国電子クラウドは福州で「未来のクラウ...

日々の話題：「大物」テンセントビデオがなぜ今、こんな厄介な立場にあるのか？

A5ウェブマスターネットワーク（www.admin5.com）は3月27日、近年、YoukuとTud...

低価格≠高コストパフォーマンス。分散ルーターを購入する際に知っておくべきこと

インターネットで話題となった新しい「分散ルーティング システム」の登場により、WiFi ワイヤレス ...

Baiduは映画トラフィックキーワードの使用スキルの分析を知っています

昨今、キーワードの使い方は多様化していますが、最終的な目標はやはりトラフィックです。人気映画の検索イ...

サーバー、ストレージ、ネットワーク仮想化の実装と適用

[[317466]]仮想化技術は、データセンターに不可欠な技術の 1 つになっています。では、仮想化...

DingTalk が「Circles」をリリース、ソーシャル精神は健在か?

過去2日間、 DingTalkとWeChat for Enterpriseは密かに競争しており、それ...

Google AdSense で収益につながらない無効なクリックの 10 種類について簡単に説明します。

1. 広告をクリックするために特別に設計された自動クリック プログラムまたはアプリケーションを使用す...

採用サイトの開発には必然的に製品モデルの運用が必要となる

タレントウェブサイトの運営については、友人によって意見が異なります。他の人が私たちにどのように経験を...

PyTorch はどのようにしてデータ並列トレーニングを高速化するのでしょうか?分散型チートが明らかに

[[333298]]現在、チップのパフォーマンスの向上は限られているため、分散トレーニングは超大規模...

ブランドマーケティングのための高変換方法、エキサイティング！

近年、疫病やモバイルインターネットの影響により、消費市場は数え切れないほど多くの消費者の消費行動を変...

外部リンクのウェブサイトを改良することによってのみ、より高く、より安定することができます

ウェブサイトを最適化するには、多くの詳細な作業が必要であることは誰もが知っています。しかし、最適化に...

企業のウェブサイトがコンテンツをどのように活用して体重改善を促進しているかを分析する

現代の企業はインターネットなしでは成り立ちません。オンライン マーケティングは SEO 最適化に基づ...

あらゆるクラウド | Dell + Microsoft: リファレンス アーキテクチャから Azure ハイブリッド クラウド プラットフォームへ

オープン アーキテクチャに基づき、Microsoft と連携した Dell のハイブリッド クラウド...

クラウドコンピューティング時代にエッジコンピューティングが急成長

最近、エッジコンピューティングに対する期待が高まっています。この業界では、「エッジがクラウドを飲み込...

NetEase Interactive Entertainment AI Labが世界初のダンスアニメーション合成システムを発表

AI によるダンス合成にはさまざまな方法がありますが、実際に実装して実際の制作に使用できる成熟したシ...