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