【WeChatミニプログラム】ミニプログラムの基本構成

序文

「作者のホームページ」：Sprite Youbai Bubbles
「個人サイト」：スプライトの個人サイト
「おすすめコラム」：

★ Java ワンストップサービス ★
★フロントエンドのクールなコード共有
★ ★ uniapp-構築からプロモーションまで★
★ 0 から英雄へ、Vue の神への道★
★ アルゴリズムを解く、1 つのカラムで十分★
★ 0 からアーキテクチャを語ろう★
★データ流通の巧妙な仕組み★

アプレットの基本構造を理解する

新しいアプレットプロジェクトを作成します

アプレットを作成するとき、各ファイルは一般的に次のように動作します。

1. images: これは通常、アプレットで使用されるイメージ ファイルを保存するために使用されるディレクトリです。

2. pages: これは、アプレット内のページ ファイルまたはコンポーネント ファイルを保存するためのディレクトリである可能性があります。

3. utils: これは通常、プロジェクト全体で使用されるユーティリティ関数またはモジュールを含むディレクトリです。

4. .eslintrc.js: これは、エラーを検出し、コーディング標準を適用するために使用される人気のある JavaScript コード検査ツールである ESLint の構成ファイルです。

5. app.js: これは通常、アプレットのエントリ ファイルであり、初期構成とアプリケーションのコードの初期化に使用されます。

6. app.json: これは、アプリケーションの構造と設定を定義するために一部のフレームワーク (WeChat アプレットなど) で使用される構成ファイルです。

7. app.wxss: このファイルには、WeChat ミニ プログラムで使用されるスタイル言語である WXSS (WeChat スタイル シート) を使用して記述されたスタイル シートが含まれています。

8. project.config.json: これは、特定の開発環境またはフレームワークによって使用される構成ファイルです。プロジェクト設定、ビルドプロセス、依存関係などに関連する設定が含まれる場合があります。

9. project.private.config.json: これはプロジェクト固有のプライベート構成ファイルである可能性があります。その目的はプロジェクトの要件によって異なる場合があります。

10. sitemap.json: このファイルは通常、Web サイトまたはアプリケーションがどのように構造化および編成されているかに関する情報を検索エンジンに提供するために使用されます。

11. components: アプレットのコンポーネント、複数のページで再利用できる UI モジュールを保存します。

ページの基本構造

1. .jsファイル: これらのファイルはページのスクリプト ファイルであり、ページ データやイベント処理関数などのロジック コードを保存するために使用されます。

2. .jsonファイル: これらのファイルは現在のページの構成ファイルであり、ウィンドウの外観とパフォーマンスを構成するために使用されます。たとえば、ナビゲーション バーのタイトル、背景色、プルして更新を有効にするかどうかなどを設定できます。

3. .wxmlファイル: これらのファイルは、HTML と同様に、ページのモジュール構造ファイルです。ページの構造とコンポーネントの配置を定義し、{ {}}などの補間式を介してデータをバインドできます。

4. .wxssファイル: これらのファイルは、CSS と同様、現在のページのスタイル シート ファイルです。ここで、ページ要素の外観とレイアウトを定義するスタイル ルールを作成できます。

設定ファイルの詳細な分析

.eslintrc.js

基本的な設定内容

/*
 * Eslint config file
 * Documentation: https://eslint.org/docs/user-guide/configuring/
 * Install the Eslint extension before using this feature.
 */
module.exports = {
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  ecmaFeatures: {
    modules: true,
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  globals: {
    wx: true,
    App: true,
    Page: true,
    getCurrentPages: true,
    getApp: true,
    Component: true,
    requirePlugin: true,
    requireMiniProgram: true,
  },
  // extends: 'eslint:recommended',
  rules: {},
}

主効果

.eslintrc.jsESLintを設定するための設定ファイルです。ESLint は、開発者がコーディング プロセス中に潜在的な問題を見つけて修正し、コードの品質と一貫性を確保するのに役立つ人気の JavaScript 静的コード分析ツールです。

1. ルールの定義:.eslintrc.jsこのファイルを使用すると、JavaScript コードをチェックするための一連のルールを定義し、これらのルールの違反をどのように処理するかを指定できます。これらのルールは、コーディング スタイル、エラー チェック、ベスト プラクティスなどの側面をカバーできます。
2. 構成環境: ブラウザー、Node.js、ES6 などのコードを実行する環境を構成ファイルで指定できます。
3. 拡張プラグイン: ESLint はプラグイン システムをサポートしており、構成ファイルにプラグインを追加し、これらのプラグインが提供するより多くのルールと機能を使用できます。

コード例:

単純なファイルの例を次に示します.eslintrc.js。

module.exports = {
    
    
  root: true,
  env: {
    
    
    browser: true,
    node: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
  ],
  parserOptions: {
    
    
    ecmaVersion: 12,
    sourceType: 'module',
    ecmaFeatures: {
    
    
      jsx: true,
    },
  },
  rules: {
    
    
    // 在这里定义你的规则
    'no-console': 'off',
    'indent': ['error', 2],
    'quotes': ['error', 'single'],
  },
};

この構成例では、次のようになります。

• root: true親ディレクトリで他の ESLint 構成ファイルを探すことが禁止されていることを示します。
• envコードが実行される環境が定義され、ブラウザー、Node.js、および ES2021 環境がここで指定されます。
• extends既存のルールセットを拡張するために使用される配列です。eslint:recommendedこれは ESLint の組み込みの推奨ルール セットであり、plugin:react/recommendedReact プロジェクト用の推奨ルール セットです。
• parserOptionsECMAScript のバージョンやソース コード タイプなどのパーサー オプションを指定します。
• rules具体的な ESLint ルールを定義します。この例では、no-consoleルールはオフ (「off」) であり、indentルールにはインデントに 2 つのスペースが必要で、quotesルールには一重引用符が必要です。

ファイル構成を通じて.eslintrc.js、プロジェクトの要件に応じてルールをカスタマイズし、コードの品質と一貫性を向上させることができます。

app.js

基本的な設定内容

// app.js
App({})

主効果

app.jsは、アプリケーションのメイン エントリ ファイルまたはメイン関数ファイルを示すために使用される一般的な命名規則です。通常、ルーティング設定、ミドルウェア構成、サーバー起動など、アプリケーションのコア ロジックが含まれています。

効果：

1. メイン ロジック:app.js通常、ファイルにはアプリケーションのメイン ロジックが含まれています。これには、ルート定義、リクエスト処理、データ操作などのタスクが含まれる場合があります。
2. 依存関係管理:app.jsフレームワーク、ライブラリ、プラグインなど、アプリケーションに必要なさまざまな依存関係のロードと初期化を担当する場合があります。
3. 構成ファイル: ではapp.js、データベース接続文字列、ポート番号、キーなどの構成ファイルの値を読み取って適用できます。これにより、アプリケーションの構成が簡単になります。

コード例:

単純なファイルの例を次に示しますapp.js。

const express = require('express');
const app = express();
const port = 3000;

// 定义路由
app.get('/', (req, res) => {
    
    
  res.send('Hello, World!');
});

// 启动服务器
app.listen(port, () => {
    
    
  console.log(`Server is running on port ${
      
      port}`);
});

この例では、app.jsExpress フレームワークを使用して単純な Web サーバーが作成されます。Express アプリケーションを呼び出して変数に割り当てることにより、express()Express アプリケーションのインスタンスを作成しますapp。

次に、単純なルート ルートを定義します。ユーザーがルート ルートにアクセスすると、サーバーは「Hello, World!」という文字列で応答します。

最後に、を呼び出してapp.listen(port)サーバーを起動します。これにより、サーバーが実行されているポート番号がコンソールに出力されます。

これは単なる例であり、実際のapp.jsファイルには、アプリケーションのニーズを満たすために、より複雑なロジックやより多くのルート定義が含まれる場合があります。

app.json

基本的な設定内容

{
    "pages": [
        "pages/index/index"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

主効果

app.jsonは、アプリケーションのメタデータと構成情報を定義するために使用される一般的な構成ファイルです。通常、アプリケーションの構築、展開、またはホスト時に主要な設定と情報を提供するために使用されます。

効果：

1. メタデータ定義:app.jsonファイルには、アプリケーション名、バージョン番号、説明など、アプリケーションに関するメタデータ情報を含めることができます。この情報は、アプリ ストアの掲載情報、アプリの管理、プレゼンテーションなどのシナリオで使用できます。
2. 環境構成:app.jsonファイルには、アプリケーションの環境関連の構成を含めることができます。これらの構成には、データベース接続文字列、API アドレス、キーなどが含まれる場合があり、さまざまな環境に応じてアプリケーションを構成できるようになります。
3. ビルドとデプロイの構成:app.jsonファイルでは、ビルド スクリプト、出力ディレクトリ、依存関係など、アプリケーションのビルドとデプロイに必要な構成を指定できます。これにより、ビルドと展開のプロセスが簡素化されます。

コード例:

単純なファイルの例を次に示しますapp.json。

{
    
    
  "name": "MyApp",
  "version": "1.0.0",
  "description": "A sample application",
  "environment": {
    
    
    "apiUrl": "https://api.example.com",
    "apiKey": "123456789"
  },
  "scripts": {
    
    
    "build": "npm run compile && npm run bundle",
    "compile": "babel src -d dist",
    "bundle": "webpack"
  },
  "dependencies": {
    
    
    "express": "^4.17.1",
    "react": "^17.0.2",
    "axios": "^0.24.0"
  }
}

この例には、app.jsonいくつかの主要な構成情報が含まれています。

• "name": アプリケーションの名前。
• "version": アプリケーションのバージョン番号。
• "description": アプリケーションの説明。
• "environment": API アドレスやキーなどの環境関連の構成情報が含まれます。
• "scripts": コマンドのビルド、コンパイル、パッケージ化などのいくつかのスクリプト コマンドを定義します。
• "dependencies": アプリケーションが依存するライブラリとバージョンをリストします。

実際のapp.jsonファイルは、さまざまなプロジェクトやニーズに合わせてカスタマイズできます。これにより、アプリケーションのメタデータと構成情報を提供して、アプリケーションの構築、展開、管理を容易にすることができます。

app.wxss

基本的な設定内容

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

主効果

app.wxssアプレットのグローバル スタイルを定義するために使用されるファイルです。これは WeChat ミニ プログラムのスタイル ファイルであり、アプリケーション全体のスタイルとレイアウトを設定するために使用されます。

効果：

1. グローバル スタイル:app.wxssこのファイルでは、ページの背景色、フォント スタイル、フォント サイズなどを含む、アプレットのグローバル スタイルを設定できます。これらのスタイルは、アプレット全体のすべてのページとコンポーネントに適用されます。
2. スタイルのリセット:app.wxssファイルを通じて、デフォルトのスタイルをリセットし、グローバル スタイル ルールを定義して、さまざまなデバイス上でアプリケーションの一貫性を確保できます。
3. テーマの切り替え:app.wxssファイル内のスタイルを変更することで、ダーク モードやデイ モードなどのアプリケーションのテーマ切り替え機能を実装できます。

コード例:

単純なファイルの例を次に示しますapp.wxss。

/* app.wxss */

/* 全局样式 */
body {
  background-color: #f8f8f8;
  font-family: Arial, sans-serif;
}

/* 页面标题样式 */
.page-title {
  font-size: 24rpx;
  font-weight: bold;
  color: #333333;
}

/* 按钮样式 */
.button {
  width: 120rpx;
  height: 40rpx;
  background-color: #007bff;
  color: #ffffff;
  border-radius: 4rpx;
}

この例では、CSS 構文を使用してグローバル スタイルと要素固有のスタイルの両方を定義しました。

• bodyセレクターは、アプレット全体のページの背景色とフォント スタイルを定義します。
• .page-titleクラス セレクターは、フォント サイズ、太さ、色などのページ タイトルのスタイルを定義します。
• .buttonクラス セレクターは、幅、高さ、背景色、テキストの色、境界線の丸い角などのボタンのスタイルを定義します。

上記は単なる例であり、実際のapp.wxssファイルでは、アプリケーションのデザインと表示の要件を満たすために、ニーズに応じてさらに多くのスタイル ルールを定義できます。

project.config.json

基本的な設定内容

{
  "appid": "touristappid",
  "compileType": "miniprogram",
  "libVersion": "2.33.0",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
    "coverView": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "enhance": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmRelationList": [],
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    }
  },
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  }
}

主効果

project.config.jsonアプレットプロジェクトを設定するために使用されるファイルです。これは、WeChat アプレットの開発において重要な設定ファイルであり、プロジェクトの基本情報、コンパイル オプション、プラグイン設定などを定義するために使用されます。

効果：

1. プロジェクト構成:project.config.jsonファイルには、プロジェクト名、開発者情報、プロジェクトの説明など、プロジェクトの基本情報が含まれています。この情報はアプレット開発ツールに表示され、開発者やチーム メンバーによる参照用に提供されます。
2. コンパイル オプション:project.config.jsonファイルを通じて、コンパイル モード、圧縮コード、ソース マップの生成など、ミニ プログラム プロジェクトのコンパイル オプションを設定できます。これらのオプションは、ビルドおよびリリースのプロセスに影響を与える可能性があります。
3. プラグイン構成: ミニ プログラム プロジェクトでプラグインを使用する場合、project.config.jsonプラグイン リスト、プラグイン バージョンなどのプラグイン関連情報を構成できます。

コード例:

単純なファイルの例を次に示しますproject.config.json。

{
    
    
  "miniprogramRoot": "./dist",
  "appid": "wx1234567890abcdef",
  "projectname": "My Mini Program",
  "setting": {
    
    
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "newFeature": true
  },
  "compileType": "miniprogram",
  "plugins": {
    
    },
  "useExtendedLib": {
    
    }
}

この例には、project.config.jsonいくつかの主要な構成情報が含まれています。

• "miniprogramRoot": アプレット コードのルート ディレクトリを指定します。ここにdistディレクトリがあります。
• "appid": アプレットのアプリID。
• "projectname": アプレットのプロジェクト名。
• "setting": URL インスペクション、ES6 から ES5、PostCSS の使用など、いくつかのコンパイル オプションの設定が含まれます。
• "compileType": コンパイルの種類を指定します。ここでは「ミニプログラム」です。これは、小さなプログラムにコンパイルすることを意味します。
• "plugins": プラグイン設定。使用するプラグインを宣言および設定するために使用されます。
• "useExtendedLib": 拡張ライブラリを使用するかどうか。

実際のproject.config.jsonファイルは、特定のプロジェクトのニーズに応じてカスタマイズできます。ミニ プログラム プロジェクトの基本情報、コンパイル オプション、プラグイン構成を設定できるため、ミニ プログラム プロジェクトの構築と管理が容易になります。

project.private.config.json

基本的な設定内容

{
  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
  "projectname": "%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%9E%B6%E6%9E%84",
  "setting": {
    "compileHotReLoad": true
  }
}

主効果

project.private.config.jsonこれは、ミニ プログラム プロジェクトの個人情報と機密データを保存するために使用されるオプションのプライベート構成ファイルです。これは通常、API キーやデータベース接続文字列など、コード リポジトリに公開すべきではない一部の機密設定を保存するために使用されます。

効果：

1. プライベート構成:project.private.config.jsonこのファイルは、機密データのセキュリティを保護するために、ミニ プログラム プロジェクトにプライベート構成情報を保存するために使用されます。
2. データの分離: プライベート構成情報をコードから分離することで、この機密データが誤ってバージョン管理システムにコミットされたり、他のユーザーと共有されたりすることがなくなります。
3. 環境適応: 開発環境、テスト環境、本番環境など、異なるファイルを維持するproject.private.config.jsonことで、さまざまな環境に適応できます。

コード例:

単純なファイルの例を次に示しますproject.private.config.json。

{
    
    
  "api_key": "your_api_key",
  "database_url": "your_database_url"
}

この例には、project.private.config.jsonいくつかのプライベート構成情報が含まれています。

• "api_key": API キー。特定のサービスまたはインターフェイスにアクセスするために使用されます。
• "database_url": データベース接続文字列。データベース サービスへの接続に使用されます。

実際のプライベート構成情報は本物かつ有効である必要があり、適切に保管する必要があることに注意してください。ここでの例はデモンストレーションのみを目的としています。

アプレット コードでは、project.private.config.jsonファイルを読み取ることでプライベート構成情報を取得し、対応する機能やコンポーネントに適用できます。通常、このファイルがビルドまたは展開プロセス中に誤って公開または漏洩しないようにする必要があります。

project.private.config.jsonこのファイルはオプションであり、必ず使用する必要はないことに注意してください。プロジェクトのニーズとセキュリティ要件に応じて、プライベート構成ファイルを使用するかどうかを決定できます。プライベート構成ファイルを使用しない場合は、プライベート構成を環境変数に直接保存したり、他の安全な方法で管理したりすることもできます。

sitemap.json

基本的な設定内容

{
    "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
    "rules": [{
    "action": "allow",
    "page": "*"
    }]
}

主効果

sitemap.jsonアプレット ページを定義するために使用されるインデックス ファイルです。これは WeChat ミニ プログラムの構成ファイルであり、ミニ プログラム内のどのページにインデックスを付けて検索エンジンに表示するかを指定するために使用されます。

効果：

1. ページのインデックス作成:sitemap.jsonこのファイルは、どのページにインデックスを作成できるかを検索エンジンに伝えるために使用されます。これにより、検索エンジンでのミニ プログラムの可視性と検索結果の精度が向上します。
2. 検索エンジンのクロールを最適化する: ファイルを使用するとsitemap.json、検索エンジンに優れたデータ構造を提供して、検索エンジンのミニ プログラム ページのクロールとインデックス作成のプロセスを最適化できます。
3. SEO (検索エンジン最適化): 合理的な構成sitemap.jsonファイルは、ミニ プログラムのランキングと検索エンジン結果での露出を向上させるのに役立ちます。

コード例:

単純なファイルの例を次に示しますsitemap.json。

{
    
    
  "rules": [
    {
    
    
      "action": "allow",
      "page": "*"
    }
  ]
}

この例では、sitemap.jsonファイルは次のルールを使用します。

• "action": "allow": 検索エンジンが指定されたページのインデックスを作成できることを示します。
• "page": "*": すべてのページにインデックスを作成できることを示します。必要に応じて、特定のページ パスを指定することもできます。

sitemap.json実際のアプリケーションでは、アプレットの特定の状況や要件に応じて、より複雑なファイルを定義する必要がある場合があることに注意してください。たとえば、さまざまなページの優先度、更新頻度、最終変更時刻などの情報を指定できます。

ファイルを機能させるにはsitemap.json、ファイルをアプレットのルート ディレクトリに配置し、アプレット管理バックグラウンドでインデックスを自動的に送信する設定を構成する必要があります。

sitemap.jsonミニ プログラムは検索エンジンでの認知度を高めるのに役立ちますが、検索エンジンが指定されたすべてのページを即座にインデックス付けして表示することを保証するものではないことに注意してください。検索エンジンのインデックス作成プロセスには一定の時間がかかり、他の要因の影響を受ける場合があります。