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

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

1. ミニ プログラム開発ツールを使用して Hello World を作成する方法

2. WeChat ミニ プログラムの設計仕様

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

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

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

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

  この一連のチュートリアルでは、Mac バージョンの開発者ツールを使用します。

• インストールが完了したら、WeChat Web 開発者ツールを開きます

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

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

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


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

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

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

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

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

6. [編集] はじめに

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

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

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

》》》

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

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

フレンドリーかつ丁寧
1. WeChatでミニプログラムサービスを利用する際にユーザーが複雑な周囲環境に気を取られないようにするために、ミニプログラムを設計する際には次の点に注意を払う必要がありますユーザーの目標に対する無関係なデザイン要素の干渉を軽減し、プログラムが提供するサービスをユーザーに丁寧に示し、ユーザーがフレンドリーな方法で操作できるようにガイドします。

   
   

焦点を絞る
2. ユーザーが新しいページに入るたびにページの内容をすぐに理解できるように、すべてのページに明確な焦点を設定する必要があります。焦点を決めることを前提として、ページ上の他の項目を避けるようにしてください。ユーザーの意思決定や行動に影響を与えます。

   
   

明確かつ明確
3. ユーザーがミニプログラムページにアクセスしたら、ユーザーがどこにいるのか、どこに行くことができるのかを明確かつ明確に通知し、ユーザーが何もせずにページ内を自由に移動できるようにする責任と義務があります。ユーザーに安全で快適な体験を提供するために。

   
   

》》

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

ファイル構造

1. 
   
   

フレームワーク プログラムには、プログラム全体を説明するアプリと、それぞれのページを説明する複数のページが含まれています。フレームワーク プログラムの主要部分は 3 つのファイルで構成されており、これらのファイルはプロジェクトのルート ディレクトリに配置する必要があります。

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

1. フレームページは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」をフォローして、コミュニケーションをとり、一緒に学ぶこともできます。

【関連推奨事項】

1. WeChatパブリックアカウントプラットフォームのソースコードダウンロード

2. WeChat投票ソースコード

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

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