HarmonyOS サービス カードの開発 - ファイル構成と構成の学習
1. ファイル構成
ディレクトリ構造
JS サービス カードの一般的な開発ディレクトリ構造 (entry/src/main/js/Component) は次のとおりです。
ディレクトリ構造内のファイルは次のように分類されます。
.hml で終わる HML テンプレート ファイル。このファイルは、カード ページのテンプレート レイアウト構造を記述するために使用されます。
.css で終わる CSS スタイル ファイル。ページ スタイルを記述するために使用されます。
.json で終わる JSON ファイル。このファイルは、カードで使用される変数アクション イベントを構成するために使用されます。
各フォルダーの役割:
pages ディレクトリは、カード テンプレート ページを保存するために使用されます。
共通ディレクトリは、画像リソースなどの公開リソース ファイルを保存するために使用されます。
リソース ディレクトリは、次のようなリソース構成ファイルを保存するために使用されます。 マルチ解像度読み込み構成ファイル。
ウィジェット ディレクトリは、作成中に [サービス センターに表示] がオンになっているときに生成されるスナップショットに対応するデフォルトの 2*2 カード ファイル ディレクトリです。 i18n ディレクトリは、アプリケーション
テキスト エントリ、画像など、さまざまな言語シナリオでリソース コンテンツを構成するために使用されます。パスやその他のリソース。
注意
i18n とリソースは開発用の予約フォルダーであるため、名前を変更できません。
JS サービス カードは、js ファイルを使用してデータ ロジックを処理する JS アプリケーションとは異なります。カードは、カード プロバイダー アプリケーションを通じてデータを処理し、表示のためにカードに渡します。カードとカード プロバイダー アプリケーションは、対応するデータとイベントの相互作用について合意します。 json 設定ファイルを介したインターフェイスなので、JS アプリケーションの js ファイルは含まれません。詳細については、「JS サービス カード開発ガイド」を参照してください。
ファイル アクセス規則
アプリケーション リソースには絶対パスまたは相対パスを使用してアクセスできます。この開発フレームワークでは、絶対パスは「/」で始まり、相対パスは「./」または「.../」で始まります。具体的なアクセス ルールは次のとおりです。
コード ファイルを参照するには、相対パスを使用する必要があります (例: .../common/style.css)。
リソース ファイルを引用するには、絶対パスを使用することをお勧めします。例: /common/xxx.png。
共通のコード ファイルとリソース ファイルは、common の下に配置し、ルール 1 と 2 を通じてアクセスすることをお勧めします。
データ型は、CSS スタイル ファイルの url() 関数を通じて作成されます (例: url(/common/xxx.png))。
注
コード ファイル A がコード ファイル B を参照する必要がある場合:
コード ファイル A とファイル B が同じディレクトリにある場合、コード ファイル B はリソース ファイルを参照するときに相対パスまたは絶対パスを使用できます。
コード ファイル A とファイル B が異なるディレクトリにある場合、コード ファイル B はリソース ファイルを参照するときに絶対パスを使用する必要があります。Webpack をパックすると、コード ファイル B のディレクトリが変更されるためです。
json ファイルに定義するデータがリソースファイルのパスの場合、絶対パスを使用する必要があります。
2. 設定ファイルの js タグには、
インスタンス名、ウィンドウ スタイル、カード ページ情報が含まれています。
Pages は
、カード ページのパスとカード ページ名で構成されるカード ページ情報を定義します。カードには 1 ページのみが含まれます。
説明
ページ リストには 1 ページのみが含まれます。
ページ ファイル名には、text.hml、button.hml などのコンポーネント名を使用できません。
window
window は、表示ウィンドウに関連する構成を定義するために使用されます。カード サイズの調整には 2 つの構成方法があり、autoDesignWidth を使用することをお勧めします。
カードのデザインの幅を 150 ピクセル (2×2) に指定します。すべてのサイズ関連のスタイル (幅、フォント サイズなど) は、デザインの幅と実際のカードの幅の比率に従ってスケーリングされます。たとえば、デザインの幅が 150 の場合、幅を設定した場合から 100px まで、カードの実際の幅が 300 物理ピクセルの場合、幅の実際のレンダリング ピクセルは 200 物理ピクセルです。
autoDesignWidth を true に設定すると、designWidth フィールドは無視され、コンポーネントとレイアウトは画面密度に従って拡大縮小されます。画面の論理幅はデバイスの幅と画面密度によって自動的に計算され、デバイスによって異なる場合があります。複数のデバイスに適応するには相対レイアウトを使用してください。たとえば、解像度 466*466 および 320dpi のデバイスでは、画面密度は 2 (160dpi に基づく) で、1px はレンダリングされる 2 物理ピクセルに相当します。
窓：
「forms」配列の内容:
