Harmony Codelab サンプル — ポップアップウィンドウの基本的な使用法

1. はじめに

このコードラボは主に、ポップアップウィンドウのいくつかのカスタム効果を実装するためのダイアログコンポーネントとボタンコンポーネントに基づいています。

1. 警告ポップアップウィンドウが表示されたら、確認ボタンをクリックしてポップアップウィンドウを閉じます。

2. 確認ポップアップウィンドウで、[キャンセル] ボタンまたは [確認] ボタンをクリックして、対応する操作をトリガーします。

3. ロードポップアップウィンドウにロード効果が表示されます。

4. プロンプトポップアップウィンドウで、ユーザーはコンテンツを入力し、キャンセルおよび確認ボタンをクリックして対応する操作をトリガーできます。

5. 進行状況バーとパーセンテージを表示する進行状況バーのポップアップウィンドウ。

完全な例

gitee ソースコードアドレス

ソースコードのダウンロード

ポップアップウィンドウの基本的な使い方(JS).zip

2. 環境構築

まずは HarmonyOS 開発環境の構築を完了する必要がありますので、以下の手順を参照してください。

ソフトウェア要件

DevEco Studioバージョン: DevEco Studio 3.1 リリース。

HarmonyOS SDKバージョン: API バージョン 9。

ハードウェア要件

デバイスの種類: Huawei 携帯電話、または DevEco Studio で実行されている Huawei 携帯電話デバイスシミュレータ。

HarmonyOS システム: 3.1.0 開発者リリース。

環境設定

1. DevEco Studio をインストールします詳細については、「ソフトウェアのダウンロードとインストール」を参照してください。

2. DevEco Studio 開発環境をセットアップします。DevEco Studio 開発環境はネットワーク環境に依存します。ツールを正常に使用するには、ネットワークに接続する必要があります。次の 2 つの状況に応じて開発環境を構成できます。 :

● インターネットに直接アクセスできる場合は、HarmonyOS SDK をダウンロードするだけで済みます。

● インターネットに直接アクセスできないネットワークの場合は、プロキシサーバーを経由する必要がありますので、「開発環境の構築」を参照してください。

3. 開発者は、次のリンクを参照して、デバイスのデバッグに関連する構成を完了できます。

● デバッグには実機を使用します

● デバッグにはシミュレータを使用する

3. コード構造の解釈

このコードラボではコアコードのみを説明します。完全なコードについては、ソースコードのダウンロードまたは gitee で提供されます。

├──entry/src/main/js	     // 代码区│  └──MainAbility│     ├──common│     │  └──images           // 图片资源│     ├──i18n		     // 国际化中英文│     │  ├──en-US.json			│     │  └──zh-CN.json			│     ├──pages│     │  └──index│     │     ├──index.css     // 页面整体布局以及弹窗样式│     │     ├──index.hml     // 自定义弹窗展示页面│     │     └──index.js      // 弹窗显示关闭逻辑以及动画逻辑│     └──app.js              // 程序入口└──entry/src/main/resources  // 应用资源目录

4. アプリケーションページの構築

インターフェイスは主に、ボタンリストページとカスタムポップアップウィンドウの 2 つの部分で構成されます。ダイアログタグにカスタムコンポーネントを追加することで、ポップアップウィンドウを設定できます。具体的な効果は図に示すとおりです。

まず、index.hml でボタンページを構築します。このページには、主に 5 つの一般的なポップアップウィンドウ、つまり AlertDialog、confirmDialog、LoadingDialog、PromptDialog、ProgressDialog が含まれています。

<!--index.hml--><div class="btn-div">    <button type="capsule" value="AlertDialog" class="btn" onclick="showAlert"></button>    <button type="capsule" value="ConfirmDialog" class="btn" onclick="showConfirm"></button>    <button type="capsule" value="LoadingDialog" class="btn" onclick="showLoading"></button>    <button type="capsule" value="PromptDialog" class="btn" onclick="showPrompt"></button>    <button type="capsule" value="ProgressDialog" class="btn" onclick="showProgress"></button></div>

次に、図に示すように、index.hml に AlertDialog カスタムポップアップウィンドウを作成します。

<!-- index.hml --><!-- AlertDialog自定义弹窗 --><dialog id="alertDialog" class="alert-dialog">    <div class="dialog-div">        <div class="alert-inner-txt">            <text class="txt">AlertDialog</text>        </div>        <div class="alert-inner-btn">            <button class="btn-single" type="capsule" value="Confirm"                 onclick="confirmClick('alertDialog')"></button>        </div>    </div></dialog>

図に示すように、confirmDialog カスタムポップアップウィンドウを作成します。

<!-- index.hml --><!-- ConfirmDialog自定义弹窗 --><dialog id="confirmDialog" class="dialog-main">    <div class="dialog-div">        <div class="inner-txt">            <text class="txt">ConfirmDialog</text>        </div>        <div class="inner-btn">            <button type="capsule" value="Cancel" class="btn-txt-left"                 onclick="cancelClick('confirmDialog')"></button>            <button type="capsule" value="Confirm" class="btn-txt-right"                 onclick="confirmClick('confirmDialog')"></button>        </div>    </div></dialog>

LoadingDialog カスタムポップアップウィンドウを作成します。その効果は図に示すとおりです。

<!-- index.hml --><!-- LoadingDialog自定义弹窗 --><dialog id="loadingDialog" class="low-height-dialog">    <div class="dialog-loading">        <text>Loading...</text>        <image class="loading-img img-rotate" id="loading-img"             src="/common/images/ic_loading.svg"></image>    </div></dialog>

図に示すように、PromptDialog カスタムポップアップウィンドウを作成します。

<!-- index.hml --><!-- PromptDialog自定义弹窗 --><dialog id="promptDialog" class="dialog-prompt">    <div class="dialog-div-prompt">        <div class="inner-txt-prompt">            <text class="txt">PromptDialog</text>        </div>        <input class="prompt-input" type="password" placeholder="please enter password"></input>        <div class="inner-btn">            <button type="capsule" value="Cancel" class="btn-txt-left"                 onclick="cancelClick('promptDialog')"></button>            <button type="capsule" value="Confirm" class="btn-txt-right"                 onclick="confirmClick('promptDialog')"></button>        </div>    </div></dialog>

ProgressDialog カスタムポップアップウィンドウを作成します。その効果は次の図のようになります。

<!-- index.hml --><!-- ProgressDialog自定义弹窗 --><dialog id="progressDialog" class="low-height-dialog" oncancel="onCancel">    <div class="dialog-progress-div">        <div class="inner-txt-progress">            <text class="download-txt">Downloading...</text>            <text>{
   
   { percent + '%' }}</text>        </div>        <div class="progress-div">            <progress class="min-progress" type="horizontal" percent="{
   
   { percent }}"                 secondarypercent="50"></progress>        </div>    </div></dialog>

次に、index.js ファイルにさまざまなボタンのクリックイベントを実装し、対応するカスタムポップアップウィンドウを表示します。

// index.jsexport default {
   
     data: {...},
  // 展示AlertDialog  showAlert() {
   
       this.$element('alertDialog').show();  },
  // 展示ConfirmDialog  showConfirm() {
   
       this.$element('confirmDialog').show();  },
  // 展示LoadingDialog  showLoading() {
   
       ...    this.animation = this.$element('loading-img').animate(frames, options);    this.animation.play();    this.$element('loadingDialog').show();  },
  // 展示PromptDialog  showPrompt() {
   
       this.$element('promptDialog').show();  },
  // 展示ProgressDialog  showProgress() {
   
       ...  }}

5. まとめ

この Codelab の学習を完了し、次の知識ポイントを学習しました。

1. ダイアログカスタムポップアップウィンドウコンテナコンポーネントの使用。

2.ボタンボタンコンポーネントの使用。