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

1. WeChat ミニ プログラムを作成する

1. アプレット構成の作成

ここに画像の説明を挿入

2. ミニプログラムプロジェクトファイルの説明

2.1project.config.jsonプロジェクト名と appid を変更する

project.config.json(手動修正appid, 项目名称 projectname)
ここでの設定は基本的に手動で修正する必要はなく、
ここに画像の説明を挿入
該当する内容を確認することで修正できます。

2.2サイトマップ.json

sitemap.jsonThe file in the root directory of the applet is used to configure whether the applet and its pages are allowed to be indexed by WeChat . ファイルの内容は JSON オブジェクトです. sitemap.json がない場合, すべてのページが許可されますデフォルトでインデックスされる

WeChat は Mini Program 内で検索を開始しました. 開発者は、ミニ プログラム ページで sitemap.json 構成を使用して WeChat のインデックス作成を許可するかどうかを構成したり、バックグラウンドでページ インクルージョン スイッチを管理したりできます.
開発者が WeChat のインデックス作成を許可すると、WeChat はクローラーを使用してミニ プログラムのページ コンテンツをインデックス作成します。ユーザーの検索語句がインデックスをトリガーすると、検索結果にミニ プログラムのページが表示される場合があります。

2.3 アプリ

ここに画像の説明を挿入
app applicationの略で、レンダリングのメインコンポーネント

app.js

ミニプログラム全体を登録する
ミニプログラムを登録します。これは、アプレットなどのライフサイクル コールバックを指定する Object パラメータを受け入れます。

アプリ (オブジェクト オブジェクト) は、app.js で呼び出す必要があり、呼び出す必要があり、1 回だけ呼び出すことができます。そうしないと、予測できない結果が生じます。
ここに画像の説明を挿入
vueのライフサイクルに似ています

app.json

WeChat アプレットの
ページ構成ページをグローバルに構成します。最初のページはデフォルトでホームページに設定されます。もちろん、entryPagePathホームページを構成することもできます。
ここに画像の説明を挿入

ここに画像の説明を挿入
ここに画像の説明を挿入

app.wxss

css と同様に、
各ページには独自のスタイル ファイルがあるため、app.wxss は共通のスタイルを配置します。

2.4ページ

Web ページが新建页面追加されると、app.json のページ配列にパスが自動的に書き込まれます。

2.5 ユーティリティ

  • utils ツール クラスの使用
  • メソッドを宣言するために使用されます。module.exports に含めることに注意してください。そうしないと、呼び出しでメソッドが見つかりません。

おすすめ

転載: blog.csdn.net/weixin_46372074/article/details/125785392