Due to WeChat's revocation of the unified message push interface for mini programs and official accounts, developers can no longer directly send official account messages to users via their mini program openIDs—even when both services are bound under the same entity in the WeChat Open Platform. To enable cross-platform messaging, it's now necessary to store both the official account and mini program openIDs alongside the user's unionId in your database.

This guide demonstrates how to manually associate a user's mini program and official account openIDs through an in-app process within the mini program itself.

Prerequisites

• The mini program and official account must be mutually bound within the WeChat Open Platform.
• The official account must have its web authorization domain configured to match your backend server address.
• This example is implemented using UniApp framwork.

Implementation Steps

User Login & Initial Setup

Ensure that you already have a login mechanism in place that retrieves the user’s mini program openID. This step is assumed to be completed since most mini programs include this functionality.

Add Navigation Buton

In your existing page, add a navigation button that passses the mini program openID as a parameter:

<view class="myfun right-jt1">
  <navigator :url="'./bind-account?mp_openid=' + userMiniProgramOpenId" hover-class="none">
    <image src="../../static/img/me10.png"></image>
    <text class="txt fs28 color3">Bind Official Account</text>
  </navigator>
</view>

Create Authorization Page

This page will use a web-view component to initiate OAuth2 authorization with the official account:

<template>
  <view>
    <web-view :src="authUrl"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      authUrl: ''
    };
  },
  onLoad(queryParams) {
    const mpOpenId = queryParams.mp_openid;

    if (!mpOpenId) {
      uni.navigateTo({ url: './login' });
      return;
    }

    const redirectPath = `https://your-backend-domain/callback/${mpOpenId}`;
    this.authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=YOUR_OFFICIAL_ACCOUNT_APPID&redirect_uri=${encodeURIComponent(redirectPath)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
  }
};
</script>

Backend Handling

Your backend endpoint should receive the OAuth2 authorization code and the mini program openID:

@RequestMapping("/callback/{miniProgramOpenId}")
@ResponseBody
public String handleBinding(@PathVariable String miniProgramOpenId, @RequestParam String code) {
    // Use the code to fetch access_token and official account openid from WeChat API
    // Then update your user record to link the official account openid with the mini program one
    
    // Example pseudo-code:
    // String accessToken = getAccessTokenFromCode(code);
    // String officialAccountOpenId = getOfficialAccountOpenId(accessToken);
    // updateUserRecord(miniProgramOpenId, officialAccountOpenId);

    return "Binding successful";
}

Important Notes

• The redirect URL used in OAuth2 must be HTTPS-enabled.
• During local development, consider modifying your system's hosts file to map a custom domain to localhost for testing purposes.
• After binding, you may want to display a success page before redirecting back to the mini program.