微信ミニプログラム

基本構成

1. 主なファイル/フォルダ説明

text

src/
├── pages/                  # すべてのページを保存
├── utils/                  # ユーティリティモジュールを保存（日付フォーマットなど）
├── app.js                  # プロジェクトエントリーファイル。App() を呼び出してミニプログラムを起動
├── app.json               # グローバル設定ファイル
├── app.wxss               # グローバルスタイルファイル
├── project.config.json    # プロジェクト設定ファイル（コンパイル設定、プロジェクト名、appid を含む）
└── sitemap.json          # ミニプログラムページを WeChat がインデックスできるかを設定

2. project.config.json 設定項目

setting：コンパイル関連設定。
projectname：プロジェクト名。
appid：ミニプログラムのアカウント ID。

3. ホームページの変更

app.json の pages 配列のページ順を調整します。一番上にあるページがホームページになります。

Web との違い

1. WXML と HTML の違い

タグが違う：HTML は div、span、img、a を使います。WXML は view、text、image、navigator を使います。
属性ノードが違う：HTML リンクは <a href="#"> を使いますが、WXML は <navigator url="/pages/..."> を使います。
Vue に似たテンプレート構文をサポート：データバインディング、リストレンダリング、条件レンダリングを使えます。

2. WXSS と CSS の違い

rpx サイズ単位を追加：異なる画面に自動対応し、手動換算は不要です。
グローバルスタイルとローカルスタイルを提供：app.wxss は全体に有効で、ページ内の .wxss は現在ページだけに有効です。
一部の CSS セレクタをサポート：.class、#id、要素、グループ、子孫、::after/::before など。

3. JS ファイル分類

app.js：エントリーファイルで、App() を呼び出します。
ページの .js：ページエントリーで、Page() を呼び出します。
通常の .js：機能モジュールです。共通関数や属性をカプセル化して、ページで使えるようにします。

ホスト環境

1. ホスト環境とは

プログラムが動くために依存する環境です（例：Android、iOS）。
ミニプログラムのホスト環境は、通信モデル、実行メカニズム、コンポーネント、API を含みます。

2. 通信モデル

主体：レンダリング層（WXML+WXSS）とロジック層（JS）。
通信方式：どちらも WeChat クライアントによって転送されます。
- レンダリング層 ↔ ロジック層
- ロジック層 ↔ サードパーティサーバー

3. 実行メカニズム

ミニプログラム起動：コードパッケージをダウンロード → app.json を解析 → app.js を実行（インスタンス作成）→ ホームページをレンダリング。
ページレンダリング：ページ .json を読み込む → .wxml/.wxss を読み込む → ページ .js を実行（ページインスタンス作成）→ レンダリング完了。

4. コンポーネント

ビューコンテナ：
- view：通常のブロックレベル要素で、レイアウトに使います。
- scroll-view：スクロール可能なビュー領域です。
- swiper / swiper-item：カルーセルです。
基本内容：
- text：テキストです。長押しで選択できます（selectable が必要）。
- rich-text：HTML 文字列をレンダリングします（nodes 属性を使います）。
その他のよく使うもの：
- button：ボタンです。open-type で WeChat 機能（カスタマーサービス、転送、認可など）を呼び出します。
- image：画像です。デフォルトの幅と高さは 300×240px で、mode が切り抜きや拡大縮小を制御します。
- navigator：ページナビゲーションです。<a> リンクに似ています。

5. API

イベント監視 API：on で始まり、イベントを監視します（例：wx.onWindowResize）。
同期 API：Sync で終わり、結果を直接返します（例：wx.setStorageSync）。
非同期 API：success/fail/complete コールバックで結果を受け取ります（例：wx.request）。

WXML

1. リストレンダリング（wx:for）

基本用法：wx:for="" でループレンダリングします。デフォルトのインデックスは index、現在項目は item です。
key 指定：wx:key="一意識別子" を使うとレンダリング効率が上がります（例：wx:key="id"）。
変数名のカスタマイズ（あまり使いません）：
- wx:for-index="idx" はインデックス変数名を指定します。
- wx:for-item="itemName" は現在項目の変数名を指定します。

2. データバインディング

データ定義：ページの .js ファイルの data オブジェクト内で定義します。
データ使用：（Mustache 構文）でバインドします。
- 内容バインディング：<view></view>
- 属性バインディング：<image src=""></image>
- 演算をサポート：三項演算、算術演算など。

3. イベントバインディング

tap イベント（タッチクリック）：bindtap="イベント名"

btnTapHandler(e) { console.log(e) } // e はイベントパラメータオブジェクト

イベント引数渡し：data-* カスタム属性で引数を渡します。

html

<button bindtap="btnHandler" data-info="{{2}}">引数渡し</button>

取得：e.target.dataset.info

input イベント（テキストボックス入力）：bindinput="イベント名"

inputHandler(e) { console.log(e.detail.value) } // 最新入力値を取得

データ同期：<input value="" bindinput="inputHandler">

4. 条件レンダリング

wx:if 系列：

html

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>非公開</view>

block で複数コンポーネントを包む：<block wx:if="true">...</block>（実際のタグとしてはレンダリングされません）。
hidden：hidden="" で表示/非表示を制御します（display スタイルを切り替えます）。
wx:if vs hidden：
- wx:if：要素を動的に作成/削除します。条件が複雑で、切り替えが少ない場面に向いています。
- hidden：スタイルを切り替えます（display: none/block）。頻繁に切り替える場面に向いています。

WXSS

1. WXSS とは

WXML コンポーネントを美しくするためのスタイル言語で、CSS に似ています。
CSS の多くの特性を持ち、ミニプログラム向けに拡張と変更がされています。

2. CSS と比べた拡張特性

rpx サイズ単位（responsive pixel）
- WeChat ミニプログラム独自の画面適応単位です。
- 実現原理：すべての端末画面の総幅を 750rpx に統一し、異なる画面サイズに自動対応します。
@import スタイル導入
- 外部スタイルシートを導入できます。
- 構文形式：@import "スタイルファイルの相対パス";（末尾のセミコロンに注意）

3. グローバルスタイル vs ローカルスタイル

グローバルスタイル：プロジェクトルートの app.wxss に定義し、すべてのページに作用します。
ローカルスタイル：ページの .wxss ファイルに定義し、現在ページだけに作用します。

4. スタイル優先度ルール

近いものを優先：ローカルスタイルはグローバルスタイルを上書きします。
前提条件：ローカルスタイルの重み ≥ グローバルスタイルの重みの時だけ、上書きが有効になります。

グローバル設定 `app.json`

1. よく使う設定項目

設定項目	役割
`pages`	現在のミニプログラムの全ページ保存パスを記録します
`window`	ミニプログラムウィンドウの外観を全体設定します
`tabBar`	ミニプログラム下部の tabBar 効果を設定します
`style`	新版コンポーネントスタイルを有効にするかどうか

2. ウィンドウの構成部分

ナビゲーションバー領域（上部）
背景領域（通常は見えず、プルダウン時に表示）
ページ主体領域（WXML レイアウトを表示）

3. window ノードのよく使う設定項目

ナビゲーションバー設定

"navigationBarTitleText": "タイトル"：ナビゲーションバータイトルを設定します。
"navigationBarBackgroundColor": "#333"：ナビゲーションバー背景色を設定します。
"navigationBarTextStyle": "white"：ナビゲーションバータイトル色を設定します（black / white のみ対応）。

プルダウン更新設定

"enablePullDownRefresh": true：グローバルでプルダウン更新機能を有効にします。
"backgroundColor": "#efefef"：プルダウン更新ウィンドウ背景色を設定します。
"backgroundTextStyle": "light"：プルダウン更新 loading スタイルを設定します（light / dark のみ対応）。

ページ下端到達設定

"onReachBottomDistance": 50：ページ下端到達イベントを触発する距離を設定します（単位 px、デフォルト 50px。通常はデフォルトでよいです）。

window ノードのよく使う設定項目

属性名	型	デフォルト値	説明
`navigationBarTitleText`	String	-	ナビゲーションバータイトル文字
`navigationBarBackgroundColor`	HexColor	#000000	ナビゲーションバー背景色。例：#000000
`navigationBarTextStyle`	String	white	ナビゲーションバータイトル色。`black` / `white` のみ対応
`backgroundColor`	HexColor	-	ウィンドウ背景色
`backgroundTextStyle`	String	dark	プルダウン loading スタイル。`dark` / `light` のみ対応
`enablePullDownRefresh`	Boolean	false	グローバルでプルダウン更新を有効にするか
`onReachBottomDistance`	Number	50	ページ下端到達イベントが触発される、ページ底部からの距離。単位は px

完全な例

json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#07c160",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "微信ミニプログラム",
    "navigationStyle": "default",
    "backgroundColor": "#f5f5f5",
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50,
    "pageOrientation": "auto"
  }
}

TabBar

tabBar はモバイルアプリでよく使うナビゲーションコンポーネントです。複数ページ間を素早く切り替えるために使います。ミニプログラムでは次の二種類があります。

下部 tabBar
上部 tabBar

注意：
最少 2 個、最多 5 個 の tab ページを設定します。
上部 tabBar はアイコンを表示せず、テキストだけを表示します。

構成

backgroundColor：tabBar 背景色
borderStyle：上枠線の色（black / white）
color：文字のデフォルト（未選択）色
selectedColor：選択時の文字色
iconPath：未選択時のアイコンパス
selectedIconPath：選択時のアイコンパス

tabBar ノード設定項目（app.json）

属性	型	必須	デフォルト値	説明
position	String	いいえ	bottom	位置：bottom / top
borderStyle	String	いいえ	black	上枠線の色：black / white
color	HexColor	いいえ	-	文字のデフォルト色
selectedColor	HexColor	いいえ	-	選択時の文字色
backgroundColor	HexColor	いいえ	-	背景色
list	Array	はい	-	tab リスト（2〜5 項目）

各 tab 項目の設定オプション

属性	型	必須	説明
pagePath	String	はい	ページパス（pages に定義が必要）
text	String	はい	tab に表示する文字
iconPath	String	いいえ	未選択アイコンパス（上部 tab では表示しない）
selectedIconPath	String	いいえ	選択アイコンパス（上部 tab では表示しない）

例

json

"tabBar": {
  "list": [
    {
      "pagePath": "pages/home/home",
      "text": "home",
      "iconPath": "/image/home.png",
      "selectedIconPath": "/image/home-active.png"
    },
    {
      "pagePath": "pages/list/list",
      "text": "list",
      "iconPath": "/image/user.png",
      "selectedIconPath": "/image/user-active.png"
    }
  ]
}

ネットワークリクエスト

一、リクエスト制限

セキュリティのため、ミニプログラムのデータ API リクエストには二つの制限があります。

HTTPS タイプの API だけリクエストできる
API ドメイン名を信頼リストに追加する必要がある

二、request 合法ドメイン名の設定

設定手順：

WeChat ミニプログラム管理バックエンドにログインします。
開発 → 開発設定 → サーバードメイン名。
request 合法ドメイン名を変更します。

注意事項：

ドメイン名は https プロトコルだけサポートします。
IP アドレスや localhost は使えません。
ドメイン名は ICP 登録済みである必要があります。
サーバードメイン名は1 か月以内に最多 5 回まで変更申請できます。

三、GET リクエスト

javascript

wx.request({
  url: 'https://example.com/api',  // リクエストアドレス
  method: 'GET',                    // リクエスト方式
  data: {                           // サーバーへ送るデータ
    name: '張三',
    age: 18
  },
  success: (res) => {               // リクエスト成功コールバック
    console.log(res)
  }
})

四、POST リクエスト

javascript

wx.request({
  url: 'https://example.com/api',
  method: 'POST',                   // POST に変更
  data: {
    name: '張三',
    age: 18
  },
  success: (res) => {
    console.log(res)
  }
})

五、ページ読み込み時に自動でデータをリクエストする

ページが読み込まれた直後に初期化データをリクエストするには、onLoad ライフサイクル内で呼び出します。

javascript

// home.js
Page({
  onLoad: function(options) {
    this.getInfo()  // ページ読み込み時に自動呼び出し
  },
  
  getInfo() {
    wx.request({
      url: 'https://example.com/api',
      method: 'GET',
      success: (res) => {
        console.log('リクエスト成功', res)
        this.setData({ data: res.data })
      }
    })
  }
})

六、request 合法ドメイン名検証をスキップする（開発デバッグ用）

バックエンドが http プロトコル API だけを提供している場合、一時的にドメイン検証をスキップできます。

設定方法： WeChat Developer Tools → 詳細 → ローカル設定 → 「開発環境でリクエストドメイン名、TLS バージョン、HTTPS 証明書を検証しない」 にチェックを入れます。

注意： このオプションは開発とデバッグ段階だけで使えます。本番公開前には必ず閉じ、合法ドメイン名を設定します。

六、クロスオリジンと Ajax について

概念	説明
クロスオリジン問題	ブラウザベースの Web 開発だけに存在します。ミニプログラムのホスト環境は WeChat クライアントなので、クロスオリジン問題はありません
Ajax	コア技術はブラウザの `XMLHttpRequest` オブジェクトに依存します。ミニプログラムでは Ajax とは呼ばず、「ネットワークデータリクエストを発起する」と呼びます

よく使うイベント

1. よく使うイベント一覧

型	バインド方式	イベント説明
tap	`bindtap` または `bind:tap`	指で触れてすぐ離す（click に似ています）
input	`bindinput` または `bind:input`	テキストボックス入力イベント
change	`bindchange` または `bind:change`	状態が変わる時に発生（checkbox、switch など）

2. イベントオブジェクト属性一覧

イベントコールバックが発生すると、イベントオブジェクト event を受け取ります。

属性	型	説明
`type`	String	イベントタイプ
`timeStamp`	Integer	ページを開いてからイベント発生までのミリ秒数
`target`	Object	イベントを発生させたコンポーネントの属性集合
`currentTarget`	Object	現在のコンポーネント属性集合
`detail`	Object	追加情報
`touches`	Array	タッチ点情報配列
`changedTouches`	Array	変化したタッチ点情報配列

3. イベントバインディング例

html

<!-- wxml -->
<button bindtap="handleTap">クリック</button>
<input bindinput="handleInput" placeholder="内容を入力" />
<switch bindchange="handleChange" />

javascript

// js
Page({
  handleTap(event) {
    console.log('クリックイベント', event)
  },
  
  handleInput(event) {
    console.log('入力内容：', event.detail.value)
  },
  
  handleChange(event) {
    console.log('切り替え状態：', event.detail.value)
  }
})

ページナビゲーション

1. 宣言的ナビゲーション（`<navigator>` コンポーネントを使う）

tabBar ページへ移動：
- url="/pages/xxx/xxx" と open-type="switchTab" を必ず設定します。
非 tabBar ページへ移動：
- url と open-type="navigate" を設定します（省略可）。
戻るナビゲーション：
- open-type="navigateBack" と delta（戻る階層、デフォルト 1）を設定します。

2. プログラム式ナビゲーション（API を使う）

tabBar ページへ移動：

wx.switchTab({ url: '/pages/message/message' })

非 tabBar ページへ移動：

wx.navigateTo({ url: '/pages/info/info?name=sz&age=20' })

戻るナビゲーション：
js
```
wx.navigateBack({ delta: 1 })
```

ナビゲーション引数渡し

宣言的な引数渡し：

html

<navigator url="/pages/message/message?name=1s&age=20">移動</navigator>

プログラム式の引数渡し：

wx.navigateTo({ url: '/pages/info/info?name=sz&age=20' })

引数を受け取る：

onLoad(options) {
  console.log(options) // {name: "sz", age: "20"}
}

プルダウン更新

プルダウン更新を有効にする：
- ページ設定 .json に "enablePullDownRefresh": true を設定します。
スタイル設定：
- backgroundColor：背景色
- backgroundTextStyle：loading 点のスタイル（dark / light）

イベント監視：

onPullDownRefresh() {
  // データを更新
  wx.stopPullDownRefresh() // 更新アニメーションを停止
}

ページ下端到達

イベント監視：

onReachBottom() {
  // さらにデータを読み込む
}

発生距離の設定（デフォルト 50px）：
json
```
"onReachBottomDistance": 150
```

読み込み表示：

wx.showLoading({ title: '読み込み中...' })
wx.hideLoading() // 読み込み完了後に閉じる

スロットリング処理：

data: { isLoading: false }
// リクエスト前に true、リクエスト完了後に false を設定

ライフサイクル

アプリライフサイクル（app.js）

関数	発生タイミング
`onLaunch`	ミニプログラム初期化完了（グローバルで一回）
`onShow`	起動、またはバックグラウンドからフォアグラウンドへ戻る
`onHide`	フォアグラウンドからバックグラウンドへ入る

ページライフサイクル（page.js）

関数	発生タイミング
`onLoad`	ページ読み込み（一回）
`onShow`	ページ表示
`onReady`	ページ初回レンダリング完了（一回）
`onHide`	ページ非表示
`onUnload`	ページ破棄（一回）

微信ミニプログラム ​

基本構成 ​

1. 主なファイル/フォルダ説明 ​

2. project.config.json 設定項目 ​

3. ホームページの変更 ​

Web との違い ​

1. WXML と HTML の違い ​

2. WXSS と CSS の違い ​

3. JS ファイル分類 ​

ホスト環境 ​

1. ホスト環境とは ​

2. 通信モデル ​

3. 実行メカニズム ​

4. コンポーネント ​

5. API ​

WXML ​

1. リストレンダリング（wx:for） ​

2. データバインディング ​

3. イベントバインディング ​

4. 条件レンダリング ​

WXSS ​

1. WXSS とは ​

2. CSS と比べた拡張特性 ​

3. グローバルスタイル vs ローカルスタイル ​

4. スタイル優先度ルール ​

グローバル設定 app.json ​

1. よく使う設定項目 ​

2. ウィンドウの構成部分 ​

3. window ノードのよく使う設定項目 ​

window ノードのよく使う設定項目 ​

完全な例 ​

TabBar ​

構成 ​

tabBar ノード設定項目（app.json） ​

各 tab 項目の設定オプション ​

例 ​

ネットワークリクエスト ​

一、リクエスト制限 ​

二、request 合法ドメイン名の設定 ​

三、GET リクエスト ​

四、POST リクエスト ​

五、ページ読み込み時に自動でデータをリクエストする ​

六、request 合法ドメイン名検証をスキップする（開発デバッグ用） ​

六、クロスオリジンと Ajax について ​

よく使うイベント ​

1. よく使うイベント一覧 ​

2. イベントオブジェクト属性一覧 ​

3. イベントバインディング例 ​

ページナビゲーション ​

1. 宣言的ナビゲーション（<navigator> コンポーネントを使う） ​

2. プログラム式ナビゲーション（API を使う） ​

ナビゲーション引数渡し ​

プルダウン更新 ​

ページ下端到達 ​

ライフサイクル ​

アプリライフサイクル（app.js） ​

ページライフサイクル（page.js） ​

微信ミニプログラム

基本構成

1. 主なファイル/フォルダ説明

2. project.config.json 設定項目

3. ホームページの変更

Web との違い

1. WXML と HTML の違い

2. WXSS と CSS の違い

3. JS ファイル分類

ホスト環境

1. ホスト環境とは

2. 通信モデル

3. 実行メカニズム

4. コンポーネント

5. API

WXML

1. リストレンダリング（wx:for）

2. データバインディング

3. イベントバインディング

4. 条件レンダリング

WXSS

1. WXSS とは

2. CSS と比べた拡張特性

3. グローバルスタイル vs ローカルスタイル

4. スタイル優先度ルール

グローバル設定 `app.json`

1. よく使う設定項目

2. ウィンドウの構成部分

3. window ノードのよく使う設定項目

window ノードのよく使う設定項目

完全な例

TabBar

構成

tabBar ノード設定項目（app.json）

各 tab 項目の設定オプション

例

ネットワークリクエスト

一、リクエスト制限

二、request 合法ドメイン名の設定

三、GET リクエスト

四、POST リクエスト

五、ページ読み込み時に自動でデータをリクエストする

六、request 合法ドメイン名検証をスキップする（開発デバッグ用）

六、クロスオリジンと Ajax について

よく使うイベント

1. よく使うイベント一覧

2. イベントオブジェクト属性一覧

3. イベントバインディング例

ページナビゲーション

1. 宣言的ナビゲーション（`<navigator>` コンポーネントを使う）

2. プログラム式ナビゲーション（API を使う）

ナビゲーション引数渡し

プルダウン更新

ページ下端到達

ライフサイクル

アプリライフサイクル（app.js）

ページライフサイクル（page.js）