DevEco Studio 基礎

鸿蒙開発三大技術理念

一度の開発、多端末展開；
分割可能、統合可能、自由な流通；
統一エコシステム、ネイティブインテリジェンス；

DevEco Studio は、HarmonyOS SDK、Node.js、Hvigor、OHPM、エミュレータープラットフォームなどを統合パッケージ化し、開箱即用の開発体験を提供し、DevEco Studio のインストール設定プロセスを簡素化します。

HarmonyOS SDK は DevEco Studio に組み込まれており、追加のダウンロードや設定は不要です。

HarmonyOS SDK は DevEco Studio のインストール場所にある DevEco Studio\sdk ディレクトリで確認できます。

OpenHarmony アプリの開発を行う場合は、DevEco Studio > Preferences > OpenHarmony SDK タブから OpenHarmony SDK をダウンロードできます。

DevEco Studio のインストール#

公式サイトからダウンロードしてインストールするだけです。

中国語プラグインの有効化#

File > Settings > Plugins をクリックし、Installed タブを選択して、検索ボックスに「Chinese」と入力すると、検索結果に Chinese (Simplified) が表示されます。右側の Enable をクリックし、OK をクリックします。

ポップアップウィンドウで Restart をクリックし、DevEco Studio を再起動すれば完了です。

コードフォーマット#

Ctrl + Alt + L（macOS では Option+Command +L）を使用すると、選択した範囲のコードを迅速にフォーマットできます。

親クラスの迅速なオーバーライド#

DevEco Studio は Override Methods を提供し、開発者が親クラスのテンプレートに基づいて迅速に子クラスのメソッドを生成できるよう支援し、開発効率を向上させます。カーソルを子クラスの定義位置に置き、ショートカットキー Ctrl+O を使用するか、右クリックして Generate... を選択し、オーバーライドするオブジェクト（メソッド、変数など）を指定して OK をクリックすると、そのオブジェクトのオーバーライドコードが自動生成されます。

コンストラクタの迅速生成#

エディタはクラスに対応するコンストラクタを迅速に生成することをサポートしています。

クラス内でショートカットキー Alt+Insert を使用するか、右クリックして Generate... を選択し、ポップアップウィンドウで Constructor を選択し、生成するコンストラクタのパラメータを 1 つ以上選択して OK をクリックします。Select None を選択すると、パラメータなしのコンストラクタが生成されます。

プレビュー機能の使用#

::: tip
説明

プレビューは Phone、Tablet、2in1、Car デバイスの ArkTS プロジェクトをサポートし、Litewearable デバイスの JS プロジェクトもサポートします。
プレビュー機能はコンピュータのグラフィックカードの OpenGL バージョンに依存し、OpenGL バージョンは 3.2 以上が必要です。
プレビュー中は Ability ライフサイクルは実行されません。
プレビューは HSP の参照をサポートしていません。HSP を参照しているモジュールはプレビューをサポートしていないため、HSP 内で直接プレビューまたは HSP をシミュレートしてください。
プレビューシーンでは、相対パスおよび絶対パスを介して resources ディレクトリ内のファイルにアクセスすることはサポートされていません。
プレビューはコンポーネントのドラッグアンドドロップをサポートしていません。
一部の API はプレビューをサポートしていません（Ability、App、MultiMedia などのモジュール）。
Richtext、Web、Video、XComponent コンポーネントはプレビューをサポートしていません。
C++ ライブラリの呼び出しのプレビューはサポートされていません。
har がアプリ / サービスで使用されるとき、実機の効果には違いがあります。実機では実際の効果が menubar を表示せず、サービスは menubar を表示しますが、プレビューは menubar を表示しないことを基準とします。har モジュールを開発する際は、サービス使用時のプレビュー効果と実機効果の違いに注意してください。
:::

リアルタイムプレビュー#

開発インターフェースの UI コード作成中に UI コンポーネントを追加または削除した場合、Ctrl+S で保存するだけで、プレビューは即座に結果を更新します。コンポーネントの属性を変更した場合、プレビューはリアルタイム（ミリ秒単位）で結果を更新し、超高速プレビューの効果を達成します（現在のバージョンの超高速プレビューは ArkTS コンポーネントのみをサポートします。@State 装飾の変数など、一部のデータバインディングシーンをサポートします）。リアルタイムプレビューはデフォルトで有効になっており、リアルタイムプレビューが不要な場合は、プレビューの右上隅のボタンをクリックしてリアルタイムプレビュー機能をオフにしてください。

::: tip 説明
開発者が resources/base/profile ディレクトリ内の設定ファイル（main_pages.json/form_config.json など）を変更しても、リアルタイムプレビューはトリガーされず、開発者は再読み込みをクリックする必要があります。
:::

ArkTS を例に、プレビュー機能の使用方法は以下の通りです#

ArkTS アプリ / サービスプロジェクトを作成または開きます。この例では、ローカルの ArkTS デモプロジェクトを開くことを示します。
プロジェクトディレクトリ内で任意の.ets ファイルを開きます（JS プロジェクトの場合は.hml/.css/.js ページを開いてください）。
次のいずれかの方法でプレビュー機能を開くことができます。表示効果は以下の図のようになります。

メニューバーから、View > Tool Windows > Previewer をクリックしてプレビュー機能を開きます。
編集ウィンドウの右上隅のサイドツールバーで Previewer をクリックしてプレビュー機能を開きます。

ページプレビュー#

ArkUI プレビューはページプレビューとコンポーネントプレビューをサポートします。下の図の左側のアイコンはページプレビュー、右側のアイコンはコンポーネントプレビューです。
ArkTS アプリ / サービスはページプレビューをサポートします。ページプレビューはプロジェクトの ets ファイルの先頭に @Entry を追加することで実現されます。

@Entry
@Component
struct Index {
  @State message: string = 'こんにちは世界'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

コンポーネントプレビュー#

ArkTS アプリ / サービスはコンポーネントプレビューをサポートします。コンポーネントプレビューはリアルタイムプレビューをサポートし、動的なアニメーションや動的プレビューはサポートしていません。コンポーネントプレビューはコンポーネントの前に @Preview 注釈を追加することで実現され、単一のソースファイル内で最大 10 個の @Preview 装飾を使用してカスタムコンポーネントを作成できます。

@Preview({
  title: 'ContentTable'
})
@Component
struct ContentTablePreview {
  build() {
    Flex() {
      ContentTable({ foodItem: getDefaultFoodData() })
    }
  }
}

コンポーネントプレビューのデフォルトのプレビューデバイスは Phone です。異なるデバイス、異なる画面形状、異なるデバイス言語などの条件下でのコンポーネントプレビュー効果を確認したい場合は、@Preview のパラメータを設定してプレビューデバイスの関連属性を指定できます。@Preview のパラメータを設定しない場合、デフォルトのデバイス属性は以下の通りです。

@Preview({
  title: 'Component1',  //プレビューコンポーネントの名称
  deviceType: 'phone',  //現在のコンポーネントプレビューのデバイスタイプを指定、デフォルトはPhone
  width: 1080,  //プレビューデバイスの幅、単位：px
  height: 2340,  //プレビューデバイスの高さ、単位：px
  colorMode: 'light',  //表示される明暗モード、現在のサポート値はlight
  dpi: 480,  //プレビューデバイスの画面DPI値
  locale: 'zh_CN',  //プレビューデバイスの言語、例：zh_CN、en_USなど
  orientation: 'portrait',  //プレビューデバイスの横縦画面状態、値はportraitまたはlandscape
  roundScreen: false  //デバイスの画面形状が円形かどうか
})

プロファイルマネージャー#

実機デバイスには多様なデバイスモデルがあり、異なるデバイスモデルの画面解像度は異なる場合があります。そのため、HarmonyOS アプリ / サービスの開発中に、さまざまなデバイスでのインターフェース表示効果を確認する必要があるかもしれません。このため、DevEco Studio のプレビュー機能はプロファイルマネージャー機能を提供し、開発者がプレビューデバイスプロファイル（解像度と言語を含む）をカスタマイズできるようにし、異なるプレビューデバイスプロファイルを定義することで、HarmonyOS アプリ / サービスが異なるデバイスでのプレビュー表示効果を確認できるようにします。現在、カスタマイズされたデバイス解像度とシステム言語がサポートされています。

デバイスを定義した後、Previewer の右上隅でボタンをクリックしてプロファイルマネージャーを開き、プレビューデバイスを切り替えます。

実機とエミュレーター#

この部分は必要なときに見るだけで大丈夫です。リンク実機とエミュレーター

HDC コマンド#

hdc（HarmonyOS Device Connector）は、開発者がデバッグのために提供されるコマンドラインツールで、Windows/Linux/mac システム上でデバイスと対話できます。

macOS 環境変数設定方法#

ターミナルツールを開き、以下のコマンドを実行して、出力結果に応じて異なるコマンドを実行します。

echo $SHELL

出力結果が /bin/bash の場合、以下のコマンドを実行して.bash_profile ファイルを開きます。

vi ~/.bash_profile

出力結果が /bin/zsh の場合、以下のコマンドを実行して.zshrc ファイルを開きます。

vi ~/.zshrc

「i」キーをクリックして挿入モードに入ります。
以下の内容を入力し、PATH パスに HDC_SERVER_PORT ポート情報を追加します。

HDC_SERVER_PORT=7035
launchctl setenv HDC_SERVER_PORT $HDC_SERVER_PORT
export HDC_SERVER_PORT

編集が完了したら、Esc キーをクリックして編集モードを終了し、「」と入力して Enter キーを押して保存します。
以下のコマンドを実行して、設定した環境変数を有効にします。

::: code-group

source ~/.bash_profile

source ~/.zshrc

:::

環境変数の設定が完了したら、DevEco Studio を閉じて再起動します。

HDC の一般的なコマンド

この記事は Mix Space によって xLog に同期更新されました。元のリンクは http://www.sroxck.top/posts/harmony/edveco