「WeChat Web Developer Tool」をインストールした後、図に示すように、開発者のWeChatでQRコードをスキャンして入力します。 「プロジェクトの追加」をクリックし、先ほど取得したAppIDを入力し（AppIDがない場合は無視して構いません）、プロジェクト名「Hello WXapplet」を入力し、プロジェクトディレクトリとしてローカルフォルダーを選択します。 「現在のディレクトリにクイックスタートプロジェクトを作成する」にチェックを入れた後、「プロジェクトを追加」ボタンをクリックすると、最初のWeChatアプレットプロジェクトであるHello WXappletが正常に作成されました。 開発者ツールの操作と使用 開発者ツールのインターフェースは基本的に4つの主要な領域に分かれています: 領域1「トップメニュー」、領域2「ナビゲーションメニュー」、領域3「ディレクトリファイル初心者は最初の WeChat ミニ プログラムをどのように開発すればよいでしょうか?シミュレーション」 「実行」、エリア4「編集初心者は最初の WeChat ミニ プログラムをどのように開発すればよいでしょうか?デバッグ開発」、エリア1、エリア2は固定です。エリア 3 とエリア 4 は、ナビゲーション メニュー エリアで選択したさまざまな機能またはモードに応じて異なります。 エリア 1「トップメニュー」、「設定」では、プログラム実行時に開発マシンがネットワークに接続する方法を設定します。 「アクション」とは、「更新」、「戻る」、「進む」などの操作を指し、主に Web ページやインターフェイスをデバッグするときに使用されます。 「ヘルプ」は、Web開発者ツールのバージョンや著作権表示などの情報です。 自分で体験してくださいWeChatミニプログラム、WeChatミニプログラムを評価してください。 領域 2 「ナビゲーション メニュー」は、開発者によって頻繁に使用される機能領域です。特に「編集」と「デバッグ」機能は開発者が利用する最も重要な機能となります。 編集機能 編集ボタンをクリックすると、図に示すようなインターフェースが表示されます。 元の 4 つの領域は、プロジェクトのファイル リスト領域と、対応するファイルのコード編集領域 (コード エディタとも呼ばれます) になります。 コードエディターは、wxml、wxss、js、json ファイルの 4 種類のファイルの編集をサポートするようになりました。コード エディターは、比較的完全な自動補完機能も提供しており、開発者にとっては非常に便利です。 コード エディターはショートカット キー操作もサポートしています。一般的に使用されるショートカット キーは次のとおりです。 Ctrl+End: ファイルの末尾に移動 デバッグ機能 図に示すように、関数は開発者がコード結果の実装を検出し、問題をトラブルシューティングするための中心的なツールです。 エリア 4 はデバッグ ツールおよび出力エリアになります。シミュレーターは、クライアント上の WeChat アプレット プロジェクトのロジックと操作パフォーマンスを忠実にシミュレートし、ほとんどの関数と API 呼び出しをシミュレーター上で正しくレンダリングできます。 デバッグ ツールと出力領域の上部には、コンソール、ソース、ネットワーク、ストレージ、AppData、Wxml、センサーというメニューが並んでいます。右端の拡張メニュー項目は、カスタマイズおよびコントロール開発ツール ボタンです。 ┆」。 コンソール ページ: コンソール情報ページには 2 つの機能があります: 1) 開発者はここでコードを直接入力してデバッグできます。 2) アプレットのエラー出力を表示します。 ソースページ: ソースファイルのデバッグ情報ページ。現在のプロジェクトのスクリプトファイルを表示するために使用されます。 注: ミニ プログラム フレームワークはスクリプト ファイルをコンパイルするため、ソース ファイル ページに表示されるファイルは実際に処理されたスクリプト ファイルです。したがって、作成したコードは定義関数に含まれます。ページ コードの場合、パッケージ化スクリプト ファイルの最後で、require 関数がアクティブな呼び出しアクションを完了します。 ストレージ ページ: データ ストレージ情報ページ。ストレージ API (wx.setStorage または wx.setStorageSync) インターフェイスを使用して現在のプロジェクトのデータ ストレージ ステータスを表示するために使用されます。たとえば、コンソールに「wx.setStorage({key:name,data:King})」と入力すると、[ストレージ] ページに Key-Value データが保存されていることがわかります。 ストレージ ページ: データ ストレージ情報ページ。ストレージ API (wx.setStorage または wx.setStorageSync) インターフェイスを使用して現在のプロジェクトのデータ ストレージ ステータスを表示するために使用されます。たとえば、コンソールに「wx.setStorage({key:name,data:King})」と入力すると、[ストレージ] ページに Key-Value データが保存されていることがわかります。 この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書: 
Ctrl+Home: ファイルの先頭に移動ファイル
Ctrl+i: 現在の行を選択
Shift+End: 行末に移動
Shift+Home: 行頭に移動
Ctrl+Shift+L:すべての一致を選択
Ctrl+D: 一致を選択
Ctrl +U: カーソルのロールバック
Shift+Al t+F: コードの書式設定
Alt+Up、Alt+Down: 1 行上に移動し、下へ
Shift+Alt+Up、Shfit+Alt+Down: 上方向 下の行をコピー
Ctrl+Shift+Enter: 現在行の上に行を挿入 
ネットワーク ページ: ネットワーク デバッグ情報ページ。各要素のリクエスト情報やソケット ステータスなどのネットワーク関連の詳細を観察および表示するために使用されます。 
以上が初心者は最初の WeChat ミニ プログラムをどのように開発すればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
