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

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

不言オリジナル: 2018-06-23 11:45:522879ブラウズ

この記事では、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 とほぼ同等の 89c662c6f8b87e82add978948dc499d2 タグを使用しました。
Wxss 以前に書いた CSS に似ていることは誰の目にも明らかです。これは、前に定義した .box にスタイルを加えたものです。

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

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

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

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

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

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

関連記事