WeChat ミニプログラム開発の基本の構造概要 (2)

WeChat ミニ プログラム開発チュートリアル (基本) 1-まずは WeChat ミニ プログラムの概要

前のチュートリアルの最後に、プロセス内に 1 行もコードを書かずに、「Hello World」に似た小さなプログラムを生成しました。
新しいプロジェクトを作成した後、WeChat アプレットはデフォルトのプログラム フレームワークを生成し、その後のプログラム開発作業はこのフレームワーク上で実行されます。このデフォルトのフレームワークには次の部分が含まれます:

app.xx

すべての WeChat アプレットには、app.js、app.json、app.wxss の 3 つのファイルが含まれます。app.js ファイルには、プログラムのロジック実装コードが含まれます。 app.json はグローバル構成ファイルであり、app.wxss はグローバル スタイル ファイルです。各ファイルの内容や機能については後ほど詳しく紹介します。

pages ディレクトリ

Pages ディレクトリには、プログラムの現在のページ ファイルが含まれています。デフォルトで生成されるプログラムを例にとると、このディレクトリにはインデックスとログの 2 つのディレクトリが含まれており、プログラムにはインデックスとログの 2 つのページが含まれていることを示します。

index を例に挙げます。このディレクトリには、index.js、index.wxss、index.wxml の 3 つのファイルが含まれています。js はコード ファイル、wxss はスタイル ファイル、wxml はページ構造記述ファイルです。

Web 開発に慣れている学生にとっては、とても身近に感じられるはずです。確かに、WeChat アプレットの開発モデルは Web 開発に非常に似ています。現在、ロジック部分は JavaScript 言語のみをサポートしており、wxml (html に似たもの) と wxss (css に似たもの) を使用してページの構造とスタイルを記述します。ここでのJavaScriptはWebのものと全く同じですが、ブラウザ環境で動作しないためウィンドウやドキュメントなどのオブジェクトは使用できませんし、当然jqueryなどのサードパーティライブラリも使用できません。 wxml と wxss の構文も html と css の構文に非常に似ています。

ページには構成用のindex.jsonファイルを含めることもできますが、これは必須ではありません。

通常、完全な WeChat アプレットには上記の 2 つの部分が含まれています。もちろん、プログラムに必要なパブリック コードやその他のファイルを保存する独自のディレクトリを定義することもできます。

app.json

app.json ファイルを開くと、次のコードが表示されます

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

ページ部分にはプログラムのページが含まれているため、フレームワークはページ ファイルの場所を認識できます。ウィンドウ部分には、プログラム ウィンドウのいくつかの構成が含まれています。詳細な設定項目は、設定アプレットを参照できます

app.wxss

app.wxss ファイルには、グローバル スタイル情報が含まれています。デフォルトで生成されるプログラムには、クラス selector.container が 1 つだけあり、そのタイプは、index.wxml にあり、使用されます。 .wxml内。

app.js

このファイルには、プログラムの主要なプロセス コードの実装が含まれています。この部分の分析については、次のチュートリアルを参照してください。

以上がWeChat ミニプログラム開発の基本の構造概要 (2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。