WeChat アプレット ダウンロード ツールとデバッグの詳細な紹介

昨日遅く、WeChat チームは WeChat ミニ プログラム開発者ツール、WeChat ミニ プログラム開発ドキュメント、および WeChat ミニ プログラム設計ガイドをリリースしました。開発とデバッグ、コード編集、プログラム リリースの機能が統合されており、開発者が WeChat ミニ プログラムを簡単に開発できるようになります。そして効率的に。以下は公式ドキュメントで、ミニプログラム開発者ツールとデバッグガイドのダウンロードアドレスが記載されています。

ダウンロード アドレス: 開発者ツール バージョン 0.9.092300
Windows バージョン 64; Windows バージョン 32; 開発者が WeChat アプレットを簡単かつ効率的に開発できるようにするために、開発デバッグ、コード編集を統合した新しい開発者ツールをリリースしました。プログラム公開機能など。

devtools

コードをスキャンしてログインします

ツールを開始するとき、開発者はバックグラウンドで正常にバインドされたWeChat IDを使用してQRコードをスキャンしてログインする必要があります。後続のすべての操作はこれに基づいていますWeChat アカウント

プログラムのデバッグ リボン領域には、シミュレーター、デバッグ ツール、ミニ プログラム操作領域の 3 つの主なタイプがあります

シミュレーター

シミュレーターは、クライアント上の WeChat ミニ プログラムの実際の論理パフォーマンスをシミュレートします。ほとんどの API を表示できます。シミュレータの状態では正しく表示されます。

emulat

デバッグツール

デバッグツールは、Wxml、コンソール、ソース、ネットワーク、アプリデータ、ストレージの6つの機能モジュールに分かれています。

3Wxml Pannel

Wxml Pannelは、開発者がWxmlに変換されたインターフェイスを開発するのを支援するために使用されます。ここでは、実際のページ構造とその構造に対応する wxss 属性を確認することができます。同時に、対応する wxss 属性を変更し、その変更をシミュレーターでリアルタイムに確認することができます。デバッグ モジュールの左上隅にあるセレクターを使用すると、ページ内のコンポーネントに対応する wxml コードをすばやく見つけることもできます。

wxml

Sources Pannel は、現在のプロジェクトのスクリプト ファイルを表示するために使用されます。ブラウザー開発とは異なり、WeChat アプレット フレームワークはスクリプト ファイルをコンパイルするため、開発者が Sources Pannel に表示されるファイルは、スクリプト ファイルでは、開発者のコ​​ードは定義関数でラップされ、ページ コードの場合は、最後に require へのアクティブな呼び出しがあります。

sources

Netwrok Pannleは、リクエストとソケットリクエストのステータスを観察および表示するために使用されます

network

Appdata Pannelは、現在のプロジェクトの現在のappdata固有のデータを表示し、リアルタイムのフィードバックを提供するために使用されますここでデータを編集し、インターフェイスにタイムリーなフィードバックを提供します。

appdata

Storage Pannelは、wx.setStorageまたはwx.setStorageSyncの使用後に現在のプロジェクトのデータストレージステータスを表示するために使用されます。

ストレージ

コンソールパネルには2つの主要な機能があります:

開発者はここにコードを入力してデバッグできます

コンソール

ミニプログラムのエラー出力がここに表示されます

4つのミニプログラム操作領域

ミニ プログラム操作領域は、開発者が一部のクライアント環境操作をシミュレートするのに役立ちます。たとえば、ユーザーがミニ プログラムからチャット ウィンドウに戻ると、ミニ プログラムのバックグラウンドに設定された API がトリガーされます。

5 ミニプログラムが複数のウィンドウを使用する場合、上部の操作領域でページを切り替えることができます。この操作は開発者の便宜のためにのみ存在し、一部の実際の WeChat クライアントでは使用されないことに注意してください。 。

編集領域を使用して、現在のプロジェクトのコードを記述することができ、同時にファイルの基本的な追加、削除、名前変更を実行できます。

このツールは現在 4 種類のファイル編集を提供しています: wxml wxss js json

ほとんどのエディターと同様に、完全なオートコンプリートを提供します

よく使用されるショートカット キー

形式調整

Ctrl +S: 保存ファイル

Ctrl+Shift+[, Ctrl+Shift+]: コードブロックを折りたたんで開きます
Ctrl+C Ctrl+V: コピーして貼り付けます (テキストが選択されていない場合は、コピーして貼り付けます) 1 行貼り付け
Shift+Alt+F: コードの書式設定
Alt+Up、Alt+Down: 1 行を上または下に移動
Shift+Alt+Up、Shift+Alt+Down: 1 行を上または下にコピー
Ctrl+Shift +Enter: 現在の時刻 行の上に行を挿入

カーソル関連

Ctrl+End: ファイルの末尾に移動

Ctrl+i: 現在のファイルを選択行
Shift+End: カーソルから行末までを選択
Shift+Home : 行頭からカーソルまでを選択
Ctrl+Shift+L: 一致するものをすべて選択
Ctrl+D: 一致するものを選択
Ctrl +U: カーソルのロールバック


プロジェクト ディレクトリには、アイコン、appid、ディレクトリ情報など、現在のプロジェクトの詳細が表示されます。

プレビュー機能をクリックすると、ツールが自動的にコードをコンパイルしてビルドし、WeChat サーバーにアップロードするコード パッケージを生成します。成功すると、開発者は新しいバージョンの WeChat を使用してスキャンできるようになります。 QR コードをクリックすると、携帯電話で対応するコードが表示されます

内部テスト期間中は、コードアップロード機能は管理者のWeChat IDでのみ操作可能であることに注意してください。

上記は WeChat アプレット ダウンロード ツールのデバッグに関する情報をまとめたものです。後ほど関連情報を追加します。

WeChat アプレット ダウンロード ツールの詳細な紹介とデバッグ関連記事については、PHP 中国語 Web サイトに注目してください。