HBuilder は Eelipse と深く統合された IDE エディタですが、主に Web フロントエンド開発に焦点を当てており、Java などのバックエンド開発を実行することはできません。HBuilder は、JavaScript、jQuery、HTML5+、MUI などの構文プロンプトを提供し、フロントエンド開発をより便利にする多くのショートカット キーも含まれています。
以下の図に示すように、HBuilder 公式 Web サイト (http://www.dcloud.io) にアクセスし、HBuilder の最新バージョンをダウンロードします。
上の図の「ダウンロード」ボタンをクリックすると、以下に示すように、ダウンロードを求めるプロンプトボックスが表示されます。
この図には、HBuilder の現在のバージョン、過去のバージョン、および各プラットフォームのさまざまなバージョンが表示されており、読者はダウンロード時に自分のデバイスに応じて適切なバージョンを選択できます。
HBuilder をダウンロードし、指定のパスに解凍後、起動ファイル HBuilder.exe をダブルクリックすると起動ページが表示され、ユーザー登録とログインが完了すると、HBuilder の使用を開始できます。HBuilder 開発インターフェイスを図に示します。
上の図では、左側のプロジェクト マネージャーに HelloHBuilder というサンプル プロジェクトが表示され、右側に HBuilder を始めるためのウィンドウが表示されます。このウィンドウに表示される内容は、HBuilder の公式の使い方チュートリアルです。 HBuilder.メソッドの詳しい使い方。
以下では、新しいプロジェクト、新しいファイル、および実行ファイルを例として使用して、HBuilder の使用法を簡単に説明します。
まず、Cドライブ直下にプロジェクトファイルを保存するjQueryディレクトリを作成します。次に、[ファイル] - [新規作成] - [Web プロジェクト] コマンドを選択して、以下に示すように [Web プロジェクトの作成] ダイアログ ボックスを開きます。
上の図では、プロジェクト名 (chapter01ln など) を入力し、プロジェクトの保存場所 (C:\jQuery など) を選択して、「完了」ボタンをクリックして Web プロジェクトを作成します。
最後に、デフォルトのファイルindex.htmlをプロジェクトに書き込み、HBuilderが提供するツールを使用してファイルの実行を完了すると、ページの効果は次のようになります。
上の図で、ボックス内のアイコンをクリックしてブラウザでファイルを実行すると、ページの効果は次のようになります。
HBuilder には多数のショートカット キーがあり、開発者はこれらのショートカット キーを使用することで作業を効率化できます。HBuilder でよく使用されるショートカット キーを表に示します。
HBuilder の共通ショートカット キー
