微信小程序通过关联公众号发送待办消息:实战指南

文章目录

  • 概述
    • 一、 整体流程概览
    • 二、 前期准备工作
      • 1. 账号准备与认证
      • 2. 绑定至微信开放平台
      • 3. 配置服务器信息(公众号)
      • 4.公众号绑定小程序
      • 5.小程序配置
    • 三、 核心实现步骤
      • 步骤一:获取用户的 UnionID 并建立身份映射
        • 1.小程序端获取 UnionID
        • 2.公众号端获取 UnionID
        • 3.建立用户身份映射表
      • 步骤二:配置公众号模板消息
      • 步骤三:服务端发送模板消息
        • 1. 获取 access_token(公众号)
        • 2. 构造并发送模板消息
        • 3.参数说明:
        • 4. 处理响应结果
    • 四、 重要注意事项与最佳实践
      • 1. 用户必须关注公众号
      • 2. 小程序内关注公众号的方式
        • 1.小程序内引导用户识别二维码关注公众号
        • 2. 通过“公众号关注组件”实现。(官方推荐)
      • 3. 小程序跳转限制
      • 4. 消息频率与用户体验
      • 5. UnionID 获取失败排查
      • 6. 安全与稳定性建议
    • 五、 建议
    • 六、 总结

概述

在微信生态中,小程序公众号是两个重要的用户触达渠道。然而,由于它们属于不同的应用形态,用户身份默认是隔离的。若想实现“从小程序触发,向用户推送公众号模板消息”的功能(如待办提醒、订单通知等),就需要打通二者之间的用户身份体系。

本文将详细介绍如何利用微信开放平台的 UnionID 机制,实现小程序与公众号的用户身份统一,并通过服务端调用接口,向已关注公众号的用户发送模板消息。适用于需要强通知能力的小程序场景,如任务提醒、审批通知、预约提醒等。

一、 整体流程概览

我们先通过一张流程图快速理解整个实现过程的核心环节:

开始配置
前期准备工作
公众号&小程序认证
绑定至微信开放平台
配置服务器信息
核心实现步骤
获取用户UnionID
公众号配置模板
服务端发送消息
发送公众号模板消息
发送结果
发送成功
发送失败
用户收到服务通知
根据错误码排查

关键前提:只有当用户同时使用小程序并关注了对应的公众号时,才能成功收到消息。

二、 前期准备工作

在编写代码前,必须完成以下基础配置,否则后续所有操作都无法生效。

1. 账号准备与认证

  • 微信公众号:必须是已认证的服务号(订阅号无模板消息权限)。
  • 微信小程序:必须是已认证的小程序
  • 注意:未认证账号无法获取 UnionID,也无法调用高级接口。

2. 绑定至微信开放平台

这是实现身份打通的核心前提

  • 登录 微信开放平台,创建或使用已有开放平台账号。
  • 将你的公众号小程序均绑定到同一个开放平台账号下。
  • 绑定完成后,同一用户在不同应用中的身份将通过 UnionID 实现统一识别。

在这里插入图片描述
在这里插入图片描述

UnionID 是微信为同一微信用户在同一个开放平台账号下的多个应用分配的唯一标识。只要用户使用同一微信登录多个绑定到同一开放平台的应用,就能获得相同的 UnionID。

3. 配置服务器信息(公众号)

进入【公众号后台】→【设置与开发】→【基本配置】:

  • APPID和Appsecret

    • 生成并保存用于调用发送模版消息接口。
  • IP 白名单

    • 在【公众号设置】→【功能设置】中添加你的服务器出口 IP,确保能正常调用微信 API。

在这里插入图片描述

4.公众号绑定小程序

进入【公众号后台】→【广告与服务】→【小程序管理】:绑定后 用户点击公众号的模版消息才可以跳转到对应的小程序

在这里插入图片描述

5.小程序配置

进入【公众号后台】→【广告与服务】→【小程序管理】,查看是否已关联公众号,是否允许公众号进行跳转
在这里插入图片描述

三、 核心实现步骤

步骤一:获取用户的 UnionID 并建立身份映射

要实现跨应用消息推送,核心在于找到目标用户在公众号侧的 OpenID。而连接小程序与公众号身份的桥梁,就是 UnionID

1.小程序端获取 UnionID
  1. 小程序前端调用 wx.login() 获取临时登录凭证 code

    wx.login({
      success(res) {
        if (res.code) {
          // 将 code 发送给后端
          wx.request({
            url: 'https://yourdomain.com/api/login',
            method: 'POST',
            data: { code: res.code }
          })
        }
      }
    })
    
  2. 服务端使用 code + 小程序 AppID/Secret 调用 jscode2session 接口:

    GET https://api.weixin.qq.com/sns/jscode2session?
      appid=APPID&
      secret=SECRET&
      js_code=JSCODE&
      grant_type=authorization_code
    

    返回示例:

    {
      "openid": "oABC123456",
      "session_key": "SESSIONKEY",
      "unionid": "uABC123456",
      "expires_in": 7200
    }
    

    注意:只有绑定开放平台后,此接口才会返回 unionid 字段。

  3. 服务端保存:{ openid_mini: 'oABC...', unionid: 'uABC...' }

2.公众号端获取 UnionID
  1. 获取公众号的 access_token

    GET https://api.weixin.qq.com/cgi-bin/token?
      grant_type=client_credential&
      appid=APPID&
      secret=SECRET
    
  2. 获取关注用户列表:

    GET https://api.weixin.qq.com/cgi-bin/user/get?access_token=ACCESS_TOKEN
    

    返回包含一批 openid 的列表。

  3. 遍历每个 openid,调用用户信息接口:

    GET https://api.weixin.qq.com/cgi-bin/user/info?
      access_token=ACCESS_TOKEN&
      openid=OPENID&
      lang=zh_CN
    

    返回示例:

    {
      "subscribe": 1,
      "openid": "oDEF7890",
      "nickname": "张三",
      "unionid": "uABC123456"
    }
    
  4. 服务端保存:{ openid_mp: 'oDEF...', unionid: 'uABC...' }

3.建立用户身份映射表

建议在数据库中设计一张用户绑定关系表:

字段名类型说明
unionidstring全局唯一用户 ID
openid_ministring小程序 OpenID
openid_mpstring公众号 OpenID
created_atdatetime创建时间
updated_atdatetime更新时间

当从小程序触发消息时,可通过 unionid 查出 openid_mp,进而向公众号发送模板消息。

步骤二:配置公众号模板消息

  1. 进入【公众号后台】→【广告与服务】→【模板消息】→【模板库】。
    在这里插入图片描述

  2. 搜索合适的模板(如“待办事项提醒”、“订单状态通知”等),点击“添加”。

  3. 添加成功后,记录以下关键信息:

    • 模板 ID(template_id)
    • 模板内容结构(关键词数量、字段名、示例值)

示例模板内容:

项目名称:{{thing9.DATA}}
创建时间:{{time22.DATA}}
执行进度:{{phrase10.DATA}}

在这里插入图片描述

  1. 建议:将常用模板 ID 和字段结构维护在服务端配置文件中,便于动态调用。

步骤三:服务端发送模板消息

当业务逻辑触发待办提醒(如创建新任务、审批通过等),服务端执行以下流程:

1. 获取 access_token(公众号)
GET https://api.weixin.qq.com/cgi-bin/token?
  grant_type=client_credential&
  appid=APPID&
  secret=SECRET

access_token 有效期为 2 小时,建议缓存并自动刷新。

2. 构造并发送模板消息

调用微信模板消息发送接口:

POST https://api.weixin.qq.com/cgi-bin/message/template/send?access_token=ACCESS_TOKEN

请求体(JSON)示例:

{
  "touser": "OPENID_IN_MP",
  "template_id": "TEMPLATE_ID_HERE",
  "url": "https://yourdomain.com/task/123",
  "miniprogram": {
    "appid": "wxdemo123456789",
    "pagepath": "pages/task/detail?id=123"
  },
  "data": {
    "first": {
      "value": "您有一条新的待办事项",
      "color": "#173177"
    },
    "keyword1": {
      "value": "项目周报提交"
    },
    "keyword2": {
      "value": "2025-10-25 18:00"
    },
    "remark": {
      "value": "请尽快完成,逾期将影响绩效考核。"
    }
  }
}
3.参数说明:
参数是否必填说明
touser用户在公众号中的 OpenID(通过 UnionID 查询得到)
template_id公众号后台申请的模板 ID
url用户点击消息后的跳转网页链接(H5)
miniprogram点击后跳转的小程序(必须与公众号已关联)
data模板数据,字段需与模板定义一致

支持同时设置 urlminiprogram,但用户只能点击其中一个(优先小程序)。

4. 处理响应结果

成功返回:

{
  "errcode": 0,
  "errmsg": "ok",
  "msgid": 2434567890
}

失败返回(常见错误):

errcode含义解决方案
40003无效的 OpenID检查用户是否关注公众号
40037template_id 不正确核对模板 ID 是否准确
43004用户未关注公众号提示用户先关注
45009接口调用频率超限控制发送频率,加入队列机制

四、 重要注意事项与最佳实践

1. 用户必须关注公众号

  • 模板消息只能发送给已关注公众号的用户
  • 若用户未关注,即使有 UnionID 也无法发送。

2. 小程序内关注公众号的方式

特性二维码扫码关注公众号关注组件
实现难度简单中等(需配置)
用户体验差(多步操作)好(一键关注)
转化率较低较高
自定义能力低(样式固定)
状态监听困难(需带参+事件)支持加载状态
官方推荐
适用范围所有小程序需绑定开放平台
1.小程序内引导用户识别二维码关注公众号
  1. 在【微信公众号后台】生成公众号的永久二维码(可带参数)。
  2. 将该二维码图片上传至小程序资源或 CDN。
  3. 在小程序页面中以弹窗、浮层、引导页等形式展示二维码,并配以文字提示,如:
  4. 用户长按识别二维码后跳转至公众号主页,点击“关注”即可完成操作。

示例代码(WXML)

<view class="subscribe-guide">
  <image src="/images/mp-qrcode.png" mode="widthFix" />
  <text>长按识别二维码,关注我们获取最新通知</text>
</view>

优点

  • 简单易实现,兼容所有小程序版本。
  • 可自定义样式与布局,灵活控制展示时机(如首次进入、提交表单后等)。
  • 支持带参数二维码,可用于用户来源追踪。

缺点

  • 操作路径较长:需长按 → 识别 → 跳转 → 关注。
  • 用户流失率较高,体验不够流畅。
  • 无法直接判断用户是否完成关注(除非结合带参二维码 + 后台事件推送)。
2. 通过“公众号关注组件”实现。(官方推荐)
  • 用户点击后弹出确认框,确认后自动关注公众号。
  • 支持实时监听用户关注状态变化。
  • 体验更流畅,转化率显著高于二维码方式。
  • 组件由微信提供,安全合规。

使用前提

  1. 小程序与公众号需绑定在同一微信开放平台账号下。
  2. 公众号需为已认证的服务号
  3. 小程序管理后台需开启“公众号关注组件”功能:
    • 登录【小程序后台】→【设置】→【功能设置】→ 开启“公众号关注组件”。

WXML 使用示例

<!-- 关注组件 -->
<official-account 
  style="margin: 20px auto;"
  bindload="onOfficialAccountLoad"
  binderror="onOfficialAccountError">
</official-account>

JS 监听加载状态(可选)

Page({
  onOfficialAccountLoad() {
    console.log('公众号关注组件加载成功');
  },
  onOfficialAccountError(e) {
    console.error('公众号关注组件加载失败', e.detail);
    // 可在此降级显示二维码
  }
})

优点

  • 一键关注,流程极简,用户体验好。
  • 可监听加载状态,便于做降级处理(如组件加载失败时显示二维码)。
  • 官方支持,未来功能迭代有保障。

缺点

  • 不支持所有小程序类目(部分特殊行业受限)。
  • 样式固定,不可高度自定义外观。
  • 需要用户授权,部分用户可能因隐私顾虑拒绝。

3. 小程序跳转限制

  • miniprogram.appid 必须是与公众号已关联的小程序
  • pagepath 必须是已发布上线的页面路径,不能包含未发布功能。

4. 消息频率与用户体验

  • 公众号模板消息有每日群发限制(通常为无上限,但单用户不可高频打扰)。
  • 微信会对频繁发送无关通知的账号进行限流或封禁。
  • 建议:按需发送、内容简洁、提供退订机制。

5. UnionID 获取失败排查

  • 确保小程序和公众号都已绑定至同一开放平台账号
  • 使用 wx.getUserProfile()button.open-type="getPhoneNumber" 等方式获取用户信息时,也可能带回 UnionID(需用户授权)。
  • 测试时可用开放平台提供的“UnionID 获取工具”验证。

6. 安全与稳定性建议

  • 所有敏感接口调用应在服务端完成,避免泄露 AppSecret。
  • access_token 应全局缓存,避免频繁请求。
  • 对消息发送失败的情况,建议加入重试机制和日志记录。

五、 建议

  • 使用【微信公众平台测试账号】进行开发调试:
    • 可自由配置模板、接收消息,无需审核。
    • 支持扫码关注模拟真实场景。
  • 小程序也可使用体验版配合测试号进行全流程验证。

六、 总结

关键点说明
身份打通依赖微信开放平台 + UnionID
消息通道公众号模板消息
前提条件用户关注公众号 + 账号绑定开放平台
实现路径小程序获取 UnionID → 映射公众号 OpenID → 调用 API 发送
推荐场景待办提醒、审批通知、预约提醒、订单状态变更等强提醒场景

通过以上方案,你可以实现从微信小程序触发,向用户推送高到达率的公众号服务通知,显著提升关键信息的触达效率。

如果你在实际开发中遇到以下问题,欢迎继续交流:

  • 如何自动化同步用户关注状态?
  • 如何设计高效的 UnionID 映射系统?
  • 如何结合云开发(CloudBase)简化流程?
  • 如何升级到订阅消息(一次性订阅/长期订阅)?
### 微信小程序集成公众号消息推送教程 #### 一、准备工作 确保已经拥有并配置好微信公众号以及小程序账号,在微信公众平台上完成相应设置。这包括但不限于获取AppID和AppSecret等必要参数,这些将在后续开发过程中频繁使用[^3]。 #### 二、引入官方组件 在页面中添加`<official-account>`标签用于展示关联小程序入口,并通过事件绑定函数处理加载逻辑: ```html <!-- wxml 文件 --> <view> <!-- 关联已认证的服务号或订阅号 --> <official-account bindload="onOfficialAccountLoad"></official-account> </view> ``` ```javascript // js文件 Page({ onOfficialAccountLoad(e) { console.log('Official account loaded:', e.detail); } }); ``` 此部分操作允许用户小程序内部访问指定的公众号资料页,从而促进两者之间的互动。 #### 三、服务器端对接口的支持 对于希望向关注者发送模板消息的情况,则需依赖于后端服务来调用微信API接口。这里推荐采用Spring Boot框架构建RESTful API作为中介层,负责接收来自前端请求并向微信服务器发起HTTP POST请求以触发具体的消息推送行为[^1]。 - **创建Controller类** ```java @RestController @RequestMapping("/wx") public class WxMessageController { @Autowired private WxMpService wxMpService; @PostMapping("/sendTemplateMsg") public ResponseEntity<String> sendTemplateMsg(@RequestBody Map<String, String> params){ try{ // 构建模板数据对象... WxMpTemplateMessage templateMessage = new WxMpTemplateMessage(); // 设置模板id和其他属性... boolean result = wxMpService.getTemplateMsgService().send(templateMessage); if(result){ return ResponseEntity.ok("Success"); }else{ return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to send message."); } }catch(Exception ex){ log.error(ex.getMessage(),ex); return ResponseEntity.status(HttpStatus.BAD_REQUEST).build(); } } } ``` 上述代码片段展示了如何定义一个简单的控制器方法用来接受从前端传来的JSON格式的数据包,解析其中的信息填充到`WxMpTemplateMessage`实例里再经由MP SDK执行实际的通知动作。 请注意,以上仅为简化版示例,真实项目可能还需要考虑更多细节如安全性验证、错误重试机制等方面的设计。
评论 83
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木易 士心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值