WeChatミニプログラムで「チャットツールモード」を構築するには、アプリ構成の調整とプラットフォーム提供のAPI連携が必要です。以下に、独立サブパッケージの定義からメンバー選択、データ描画までの標準的な実装フローを解説します。

1. 設定ファイルの構成

まず、app.json（またはUniApp環境の場合はmanifest.json）に独立分包とチャットツールのメタ情報を追記します。SkylineレンダラとGlass-Easelコンポーネントフレームワークを有効化することで、ツールモードのパフォーマンスを最適化できます。

{
  "subPackages": [
    {
      "root": "pkgTool",
      "name": "chatAssistant",
      "pages": [
        "pages/checkin/view"
      ],
      "independent": true,
      "renderer": "skyline",
      "componentFramework": "glass-easel"
    }
  ],
  "chatTools": [
    {
      "root": "pkgTool",
      "entryPagePath": "pages/checkin/view",
      "desc": "グループ内連動チェックイン",
      "scopes": ["scope.userLocation"]
    }
  ]
}

rootは独立サブパッケージのトップディレクトリを指定し、entryPagePathはツール起動時の初期画面です。descの記述はWeChatの審査基準に準拠させる必要があります。

2. ツール起動フローの実装

メインページからツールモードへ遷移させるには、wx.openChatToolを呼び出します。グループ限定での動作を想定している場合、chatTypeパラメータに3を指定します。

wx.openChatTool({
  url: '/pkgTool/pages/checkin/view',
  chatType: 3,
  success(res) {
    console.log('ツール起動完了', res);
  },
  fail(err) {
    console.warn('起動失敗', err);
  }
});

3. グループメンバーの取得と表示

ツール画面に遷移後、グループ内の参加者を選択するにはwx.selectGroupMembersを利用します。取得したメンバー識別子一覧をページデータに反映させます。

wx.selectGroupMembers({
  success: (result) => {
    console.log('選択結果:', result);
    this.setData({
      targetUsers: result.members
    });
  },
  fail: (err) => {
    wx.showToast({ title: '選択に失敗しました', icon: 'none' });
  }
});

取得したIDコレクションを活用して、プロフィール画像と表示名をリスト形式で描画するには、<open-data-list>コンポーネントをテンプレートに組み込みます。

<open-data-list type="groupMembers" members="{{targetUsers}}">
  <view class="member-card" slot="index">
    <open-data-item class="icon" type="userAvatar" index="{{index}}" />
    <view class="info">
      <open-data-item class="name" type="userNickName" index="{{index}}" />
    </view>
  </view>
</open-data-list>

4. 個別チャット環境での振る舞い調整

ツールが1対1の会話から起動された場合、wx.selectGroupMembersはダイアログを表示せず、自分自身と相方の識別子をそのまま返却します。相方のみを表示したい場合は、自身のOpenIDを除外する必要があります。

自身のIDを特定するには、wx.getGroupEnterInfoで取得した暗号化データをバックエンドで復号する処理を挟みます。

wx.getGroupEnterInfo({
  allowSingleChat: false,
  needGroupOpenID: true,
  success: (res) => {
    wx.request({
      url: 'https://api.example.com/decrypt/wechat',
      method: 'POST',
      data: {
        session_key: this.data.sessionKey,
        iv: res.iv,
        encryptedData: res.encryptedData
      },
      success: (response) => {
        const myOpenId = response.data.openid;
        const filteredList = this.data.targetUsers.filter(uid => uid !== myOpenId);
        this.setData({ targetUsers: filteredList });
      }
    });
  }
});

上記のフィルタリング処理を組み合わせることで、利用シーンに応じたメンバーリストの精度を向上させることができます。