WeChat開発入門(2) WeChatミニプログラム開発ツールの使い方と設計仕様-WeChatの開発-php.cn

WeChat開発入門(2) WeChatミニプログラム開発ツールの使い方と設計仕様

零下一度

リリース： 2017-05-23 15:21:55

オリジナル

2180 人が閲覧しました

この記事では、以下を学ぶことができます:

ミニプログラム開発ツールを使用して Hello World を作成する方法
WeChat ミニプログラムの設計仕様
WeChat ミニプログラムプロジェクトの構造

》》 WeChat ミニプログラム開発ツールを使用する

ミニプログラムをダウンロードしてインストールする
ダウンロード: WeChat Web 開発者ツール

ダウンロード: 公式デモソースコード

この一連のチュートリアルでは、Mac バージョンの開発者ツールを使用します。
インストールが完了したら、WeChat Web 開発者ツールを開きます

1. QR コードをスキャンしてログインし、個人の WeChat をバインドします

2. 、新しいプロジェクトを作成するか、既存のプロジェクトをインポートします (ここで使用) 公式に提供されているデモソースコードクイックスタート)

3. 新しいプロジェクトを作成し、ダウンロードしたばかりのクイックスタートプロジェクトをインポートします

受け取った内部ベータ版の招待状には AppID が含まれています。必ず「AppID なし」を選択してください

4. 新しい作成が成功しました。開発ツールの素顔を見てみましょう

Chrome 開発者に非常に似ています。モード？。。

5. 開発ツールの紹介 [デバッグ]

「デバッグ」モジュールには、主にデバッグモデルの選択、ネットワークタイプ、コンソール出力、ネットワークリソース、ビューの配置、ブレークポイントなどが含まれます。

6. [編集] はじめに

左側の赤いボックスはプロジェクト構造ディレクトリ、右側はコード編集領域です。各変更を保存した後、[コンパイル] をクリックして、変更されたページ効果を参照します。

7. 新しいフォルダーまたはファイルを作成します

フォルダー上にマウスを置くと、右側に「+」アイコンが表示され、クリックしてフォルダーまたはファイルを追加します

》》》

ミニプログラムデザイン仕様

(WeChatミニプログラム設計ガイドより抜粋)

WeChatでミニプログラムサービスを利用する際にユーザーが複雑な周囲環境に気を取られないようにするために、ミニプログラムを設計する際には次の点に注意を払う必要がありますユーザーの目標に対する無関係なデザイン要素の干渉を軽減し、プログラムが提供するサービスをユーザーに丁寧に示し、ユーザーがフレンドリーな方法で操作できるようにガイドします。
ユーザーが新しいページに入るたびにページの内容をすぐに理解できるように、すべてのページに明確な焦点を設定する必要があります。焦点を決めることを前提として、ページ上の他の項目を避けるようにしてください。ユーザーの意思決定や行動に影響を与えます。
ユーザーがミニプログラムページにアクセスしたら、ユーザーがどこにいるのか、どこに行くことができるのかを明確かつ明確に通知し、ユーザーが何もせずにページ内を自由に移動できるようにする責任と義務があります。ユーザーに安全で快適な体験を提供するために。

WeChat ミニプログラムプロジェクトの構造

ファイル	関数
app.js	ミニプログラム（グローバル）ロジック
app.json	ミニプログラム（グローバル）のパスを決定しますページファイル、ウィンドウパフォーマンス、ネットワークタイムアウト設定、複数タブ設定など
app.wxss	ミニプログラムパブリック(グローバル)スタイルシート

フレームページは4つで構成されますファイル:

ファイルタイプ	機能
js	ページロジック
wxml	によって設計されたタグ言語のセットフレームワークと基本的なフレームワークを組み合わせたコンポーネントとイベントシステムを構築できます。ページの構造。
wxss	は、WXML コンポーネントのスタイルを記述するために使用されるスタイル言語です。 WXML コンポーネントをどのように表示するかを決定するために使用されます。
json	ページ構成

「構成よりも規約」の原則に従って、フレームページには少なくとも 3 つのファイルタイプ (js、wxml、および wxss) が含まれます。ファイル名は同じである必要があります。ホームページのindex.js、index.wxml、index.wxssなどを同じフォルダーに配置する必要があります。ページを登録するとき、フレームワークは統合のためにパス .json、.js、.wxml、および .wxss 内の 4 つのファイルを自動的に検索するため、ファイル名にファイル接尾辞を記述する必要はありません。

》》》概要

上記では、開発ツール、設計仕様、プロジェクトディレクトリの 3 つの側面から WeChat アプレット開発の準備作業を紹介しました。また、Hello World アプレットページも同時に更新されます。公式DEMOをインポートすると表示されます。一般的に言えば、ミニプログラム開発ツールは合理化されており、プロジェクト構造は明確で、ドキュメントは完全であり、参入障壁は高くありません。WeChat チームはさまざまなオペレーティングシステムとモデルをパッケージ化しているため、開発者は対応するを呼び出すだけで済みます。 API。もちろん、フレームワーク全体を理解したい場合は、Redux の動作原理、ステートモード、一方向および双方向のデータバインディング、Android/IOS ネイティブ UI コンポーネントを呼び出す JS などを詳しく学ぶ必要があります。

ご質問がある場合は、私の WeChat 公開アカウント「ITNotes」をフォローして、コミュニケーションをとり、一緒に学ぶこともできます。

2. WeChat投票ソースコード

3. WeChat Lala Takeaway 2.2.4の復号化されたオープンソースバージョンWeChatルービックキューブのソースコード

以上がWeChat開発入門(2) WeChatミニプログラム開発ツールの使い方と設計仕様の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。