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分散ロックの有効期限が切れたが、業務が完了していない場合はどうすればよいですか？

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

推薦する

外部リンクを作成する初心者ウェブマスターの苦労と喜び

個人ウェブマスターとして、私はこれまでたくさんのウェブサイトを構築してきました。業界ウェブサイト、ゲ...

Zenlayerの香港データセンターはどうですか? Zenlayer 香港国際線サーバーのレビュー

世界的に有名なコンピュータールームであるzenlayerは、アジアで最も有名な金融センターと貨物配送...

組織がビジネスをクラウドに移行する6つの理由

今日、ますます多くの組織がビジネスをクラウドに移行しています。データ センターのライフサイクルの終わ...

ポータルサイト内部ページ情報PVを向上させるためのいくつかの要素

多くのポータル、特にローカルポータルのホームページでは、百度の重みが6、Google PRが6となっ...

コンテンツは王様マーケティング統合事例分析

今日の複雑なメディア環境では、「コンテンツが王様」と「統合が勝つ」は互いに補完し合い、必要不可欠です...

Baidu Accelerator、360 Website Guard、Safeguard SEO フレンドリー度評価

過去 1 年間で、ウェブマスター サークルは突然、大手インターネット企業の注目の的となりました。クラ...

ウェブサイトの一時的掲載停止に合理的かつ効果的に対処する方法

ウェブサイトのインクルードは、ウェブサイトの開発を制限するハサミのようなものです。検索エンジンのアル...

KステーションKステーション6.28月以降はどのようにサイトを構築すればよいですか？8月22日にKステーションに進みます

2012 年 6 月 28 日、これは多くのウェブマスターにとって決して忘れられない日だと思います。...

ファン・シャオフイ：検索エンジンはどのようにして記事がオリジナルであるかどうかを判断するのでしょうか？

最近、検索エンジンが記事の独創性をどのように判断するかという疑問が提起されました。ウェブサイトのオリ...

クラウドを活用して未来をコンピューティングする

クラウド コンピューティングの概念は、2006 年の Search Engine Conferenc...

ウェブサイト構築に新しいウェブサイトを素早く組み込む方法

現在、自社製品を宣伝するために自社のウェブサイトを立ち上げる企業が増えています。しかし、ウェブサイト...

ERPからクラウドコンピューティングへの移行には、ERPチャネルの適応が求められる

一部の企業では、ERP にクラウド コンピューティング導入モデルを採用し始めています。しかし、ここ数...

VULTRはどうですか?カナダのクラウドサーバー（AMDプラットフォーム）の簡単なレビュー

Vultr は米国だけでなくカナダにも複数のデータセンターを持ち、カナダのトロントのデータセンターで...

Baidu 検索エンジンはヒットアルゴリズムを追加しましたか?

現在の百度検索エンジンがヒットアルゴリズムを追加したかどうかはまだ完全に確認されておらず、百度がそれ...

共同購入ウェブサイトは独立性を失いつつあり、業界大手の手足となっている

潮が引いたときに初めて、誰が裸で泳いでいるかが分かります。 「何千もの共同購入戦争」を経験した後、共...