WeChatミニプログラムを理解しよう

📢 この記事は gemini-2.5-flash によって翻訳されました

公式サイト： https://mp.weixin.qq.com/cgi-bin/wx

ミニプログラムを開発する前に、まず登録する必要があるよ。異なる主体で登録できるけど、それによって権限も変わってくるんだ。例えば、個人で登録すると支払い機能は使えないんだよね（テストアカウントで試すことはできるけど）。

登録が終わったら、必要な情報を設定してAppIDとAppSecretを取得してね。開発者ツールをダウンロードして、ログインして、プロジェクトを作成するよ。

まずは右上の「詳細」-「ローカル設定」で、「合法ドメイン、web-view(ビジネスドメイン)、TLSバージョン、およびHTTPS証明書を検証しない」にチェックを入れてね。

ミニプログラムの開発はフロントエンド開発に属していて、主にJavaScriptを使うんだ。

ミニプログラムのディレクトリ構造

ミニプログラムは、全体を記述するappと、それぞれのページを記述する複数のpageから構成されるよ。

本体部分

3つのファイルで構成されていて、プロジェクトのルートディレクトリに置く必要があるんだ。

ファイル	役割
app.js	ミニプログラムのロジック
app.json	ミニプログラムの共通設定
app.wxss	ミニプログラムの共通スタイルシート。必須じゃないファイルで、CSSみたいなものだね。

ページ

ミニプログラムには複数のページがあって、pagesディレクトリに保存されるんだ。

各ページは4つのファイルで構成されるよ。

ファイルタイプ	必須かどうか	役割
js	はい	ページロジック、JavaScript
wxml	はい	ページ構造、レイアウト、HTML
json	いいえ	ページ設定
wxss	いいえ	ページスタイルシート、CSS

簡単な入門

ミニプログラムの書き方はVueに似てるんだ。

データバインディング

wxml

1
<view>{{title}}</view>

1
2
3
4
5
Page({
    data: {
    title: 'Hello'
  }
})

ユーザー情報の取得

wxml

1
2
3
4
<view>
    <button type="default" bindtap="getUserInfo">ユーザー情報を取得</button>
    <image src="{{avatarUrl}}" style="width: 100px; height: 100px;"/>{{nickName}}
</view>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
Page({
  data: {
    title: 'Hello',
    avatarUrl: '',
    nickName: ''
  },
  getUserInfo: function(){
    wx.getUserProfile({
      desc: 'ユーザー情報を取得',
      success: (res) => {
        console.log(res);
        this.setData({
          avatarUrl: res.userInfo.avatarUrl,
          nickName: res.userInfo.nickName
        })
      }
    })
  }
})

WeChatログイン

wxml

1
2
3
4
<view>
    <button type="primary" bind:tap="wxlogin">WeChatログイン</button>
    認証コード：{{code}}
</view>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
Page({
  data: {
    code: ''
  },
  wxlogin: function(){
    wx.login({
      success: (res) => {
        console.log("認証コード：" + res.code);
        this.setData({
          code: res.code
        })
      },
    })
  }
})

WeChatログインフロー： https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

HTTPリクエストの送信

wxml

1
2
3
4
<view>
    <button type="warn" bind:tap="sendRequest">リクエストを送信</button>
    応答結果：{{result}}
</view>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
Page({
  data: {
    result: ''
  },
  sendRequest: function(){
    wx.request({
      url: 'url', // リクエストパス
      method: 'GET', // リクエスト方式
      success: (res) => {
        console.log("応答結果：" + res.data);
        this.setData({
          result: res.data // 応答データ
        })
      }
    })
  }
})

コンパイルと公開

上にあるコンパイルボタンで、コンパイルが終わったら左側でプレビューできるよ。

コード開発が終わったら、アップロードしてバージョン番号を指定するんだ。アップロードが成功したら、WeChat公式プラットフォームで審査に提出して、オンラインバージョンとして公開できるよ。