本記事では、微信小程序（WeChat Mini Program）の開発に必要な環境設定や基本的なファイル構造について詳しく説明します。特に、主な設定ファイルである app.js, app.wxss, および app.json の役割を理解し、実際にどのように使われるのかを見ていきます。

開発者ツールの概要

微信小程序の開発には、公式提供の「微信开发者工具」を使用します。このツールは、プログラムの作成・デバッグ・プレビューが可能です。以下に、主要な機能エリアを紹介します。

1. 上部メニュー

上部には、プロジェクトのビルドやエミュレーションを行うためのボタンが配置されています。

2. 中央エリア

中央エリアはコードの編集領域で、ここで小程序の各ファイルを直接編集できます。

主要ファイルの役割

小程序の開発において、以下の3つのファイルは非常に重要です。

app.js - グローバルスクリプト

app.js は、小程序全体の動作を制御するメインスクリプトです。ここでは、アプリケーションの初期化やグローバルデータの管理を行います。

// 小程序の初期化
const app = {
    onLaunch: function() {
        console.log("小程序が起動しました");
    },
    globalData: {
        userStatus: "ログアウト中"
    }
};

App(app);

app.wxss - グローバルスタイル

app.wxss は、すべてのページで共有されるスタイルを定義するファイルです。

/* 全体の背景色 */
.container {
    background-color: #ffffff;
}

/* テキストのフォントサイズ */
.text-style {
    font-size: 16px;
}

app.json - 全体設定

app.json は、小程序の全体的な設定を行うファイルです。これには、ページのルーティングやナビゲーションバーのデザインなどが含まれます。

{
    "pages": [
        "pages/home/home",
        "pages/profile/profile"
    ],
    "window": {
        "navigationBarTitleText": "ホーム",
        "navigationBarBackgroundColor": "#009eff",
        "navigationBarTextStyle": "white"
    },
    "tabBar": {
        "list": [
            {
                "pagePath": "pages/home/home",
                "text": "ホーム"
            },
            {
                "pagePath": "pages/profile/profile",
                "text": "プロフィール"
            }
        ]
    }
}

個別ページの構造

各ページは通常、wxml, wxss, js, json の4つのファイルで構成されます。

• index.wxml: ページのUI構造を記述します。
• index.wxss: ページ固有のスタイルを指定します。
• index.js: ページのロジックを記述します。
• index.json: ページの詳細設定を行います。

デバッグエリア

開発者ツールの下部にはデバッグエリアがあります。ここでは、実行中のエラーやログ、またクラウドデータベースへのアクセス状況などを確認できます。

まとめ

本記事では、微信小程序の基本的なファイル構造と開発者ツールの使用方法について説明しました。app.js, app.wxss, app.json は、小程序開発における重要な基盤となります。