WeChatミニプログラムショッピングモールシステム開発のディレクトリ構造の紹介

この記事では、WeChat ミニ プログラム ショッピング モール システム開発シリーズ - ディレクトリ構造の概要を主に紹介します。興味があれば、さらに詳しく学ぶことができます。

前回の記事では、WeChat ミニ プログラム IDE (WeChat ミニ プログラム ショッピング モール システム開発シリーズ - ツール) を簡単に紹介しましたが、誰もがすでに独自のミニ プログラムを構築して、独立したモールの Web サイトを完成させる準備ができていると思います。

心配しないで、段階的に進めていきましょう。まず、独自の小さなデモを書いてみてください。

この記事では、主にミニ プログラムのディレクトリ構造と、準備するための構文をいくつか紹介します。その後の WeChat ミニ プログラムは、モール システムが基盤を提供します。

まず、ミニ プログラムのディレクトリ構造を理解しましょう

ページ 新しいページの一部は、このフォルダーの下に保存されます。各ミニ プログラム ページは、同じパスにある同じ名前の 4 つの異なるサフィックス ファイルで構成されます。として:index.js、index.wxml、index.wxss、index.json。接尾辞 .js の付いたファイルはスクリプト ファイル、接尾辞 .json の付いたファイルは構成ファイル、接尾辞 .wxss の付いたファイルはスタイル シート ファイル、接尾辞 .wxml の付いたファイルはページ構造ファイルです。

Utils 私たちが作成したいくつかの公開ツール js を配置できます。

app.jsはミニプログラムのスクリプトコードです。アプレットのライフサイクル関数を監視および処理し、このファイルでグローバル変数を宣言できます。この例では、ローカル データの同期ストレージや同期読み取りなど、フレームワークによって提供される豊富な API を呼び出します。
app.json はアプレット全体のグローバル構成です。このファイルでは、ミニ プログラムを構成するページの構成、ミニ プログラムのウィンドウの背景色の構成、ナビゲーション バーのスタイルの構成、およびデフォルトのタイトルの構成を行うことができます。

{

 "pages":[

  "pages/index/index",

  "pages/logs/logs"

 ],

 "window":{

  "backgroundTextStyle":"light",

  "navigationBarBackgroundColor": "#fff",

  "navigationBarTitleText": "WeChat",

  "navigationBarTextStyle":"black"

 }

}

注: app.json には、ミニ プログラム全体のグローバル設定が含まれています。 もちろん、各ページにも独自の json ファイルがあります。各ページ下のjsonファイルはウィンドウの設定のみなので、ページのjsonファイルの下にウィンドウの設定を記述するだけです

{

  "backgroundTextStyle":"light",

  "navigationBarBackgroundColor": "#fff",

  "navigationBarTitleText": "WeChat",

  "navigationBarTextStyle":"black"

 }

app.wxssはアプレット全体の共通スタイルシートです。 app.wxss で宣言されたスタイル ルールをページ コンポーネントの class 属性で直接使用できます。

各ページで独自の wxss を定義することもできます。 WxssはWeChatが提供するcssスタイルシートで、書き方はcssとほぼ同じです。ただし、サポートされるセレクターは比較的少数です。記述する際には、基本的に以前のプロジェクトの CSS を使用できますが、以下のセレクターに加えて、他のセレクターを使用すると、ページ全体がエラーを報告する可能性があります。

wxml サフィックスを持つフォルダーつまり、WeChat アプレットによって提供されるページ構造ドキュメントは、独自のタグの一部がカスタマイズされている点を除けば、以前の Web ページの HTML とほぼ同等です。

次に、試してみる新しいページを作成します

新しく作成された .js、.json、.xml、および .wxss に注目してください。ページの下に定義されているテスト フォルダーと同じ名前を維持します。WeChat WeChat アプレットはこれらのファイルを自動的に読み取り、アプレット インスタンスを生成します。
まず、app.json の下に新しく作成したページを構成する必要があります

注: ページ構成の順序では、実際の操作で最初に構成されたページがホームページであることがわかりました。

設定後、ページコードを書くことができます。
ご覧のとおり、app.json ページで現在のページのいくつかのウィンドウ属性を直接構成できます
Wxml では、前に HTML を書いたのと同じように、ページ表示用のいくつかの構造を記述することができます。その間、以前に使用した p とほぼ同等の タグを使用しました。
Wxss 以前に書いた CSS に似ていることは誰の目にも明らかです。これは、前に定義した .box にスタイルを加えたものです。

test.js はページのスクリプト ファイルで、ページのライフサイクル関数の監視と処理、ミニ プログラム インスタンスの取得、データの宣言と処理、ページ インタラクション イベントへの応答などを行うことができます。

ここでは、bintap を使用してクリック イベントをビューにバインドし、プロンプト ボックスをポップアップします。

注: ここでの js の記述方法は、以前の記述方法とまったく同じですが、ここでは window オブジェクトと document オブジェクトが使用できない点が異なります。同様に、window オブジェクトと document オブジェクトは jquery や zepto などのフレームワークも使用できません。これらのフレームワークで使用されます。

わかりました！今日は、ディレクトリ構造とミニ プログラムの簡単な使い方について簡単に説明します。次のセクションでは、モール システムの作成を開始します。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連するおすすめ:

WeChat ミニ プログラム (笑) ヒーロー開発の紹介

WeChatアプレットによるWeChat決済の手順について

WeChatアプレット(ecshop)のモール開発について

以上がWeChatミニプログラムショッピングモールシステム開発のディレクトリ構造の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。