【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)

前言

微信小程序消息订阅包括一次性订阅和长期订阅(非永久订阅)。

让我们来一起看看怎么使用吧~

文档直通车:开放能力 /消息 /订阅消息 /小程序订阅消息(用户通过弹窗订阅)开发指南

文章目录

一、一次性订阅流程

1.配置订阅消息模板

登录微信公众平台,进入「功能」→「订阅消息」,从公共模板库中选择所需模板或申请自定义模板,获取模板 ID。

如果没有合适的模板,可以申请添加新模板,审核通过后可使用。

2.前端发起订阅请求

在小程序前端,通过调用wx.requestSubscribeMessage接口,向用户展示订阅弹窗。示例代码如下:

typescript 复制代码
wx.requestSubscribeMessage({
    tmplIds: ['TEMPLATE_ID'], // 模板ID列表
    success(res) {
        if (res['TEMPLATE_ID'] === 'accept') {
            console.log('用户已授权');
            // 将授权结果发送至服务器保存
            wx.request({
                url: 'https://api.example.com/save-subscription',
                data: { openid: getApp().globalData.openid }
            });
        }
    },
    fail(err) {
        console.error('授权失败', err);
    }
});

文档直通车:

3.服务端存储订阅关系

服务器接收到前端发送的授权结果后,校验用户身份,并存储openid、模板 ID 和授权状态等信息。

4.触发消息发送

当满足业务条件时,服务器调用微信的消息发送接口,传入openid、模板 ID、页面路径和消息数据等,发送订阅消息。

5.消息状态监控

服务器配置消息推送回调地址,接收微信推送的消息发送结果,更新数据库中的消息发送状态。

二、长期订阅流程

1.类目确认

确保小程序后台已正确选择支持长期订阅的类目,如政务民生、医疗、交通、金融、教育等部分二级行业类目。符合准入条件的,系统会自动在订阅消息功能模块内显示长期订阅入口。

2.模板选择

访问「类目模板库」,搜索与业务场景相关的长期订阅模板,如 "行为激励""积分通知" 等。

3.消息发送

使用服务端 API 调用subscribeMessage.send接口发送消息,消息内容需与所选模板字段完全匹配。

三、开通条件

1.一次性订阅

无需特殊条件,只要小程序具备合法的业务场景和内容,均可使用一次性订阅消息功能。

2.长期订阅

小程序必须属于政务民生、医疗、交通、金融、教育等部分二级行业类目,且长期订阅目前只支持少量民生公共服务节点通知。

3.一次性订阅中多个模板和单个模板
  • 单个模板:在基础库 2.4.4 - 2.8.3 版本中,仅支持传入一个一次性模板 ID,用户订阅后,开发者可不限时间地下发一条对应的服务消息。
  • 多个模板 :基础库 2.8.2 版本开始,用户发生点击行为或者发起支付回调后,才可以调起订阅消息界面,且一次调用wx.requestSubscribeMessage接口最多可传入 3 个模板 ID。iOS 客户端 7.0.6 版本、Android 客户端 7.0.7 版本之后的一次性订阅支持多个模板消息,每个模板消息可单独订阅或退订。


四、注意一些报错和弹框显示的逻辑

1."总是保持以上选择,不再询问"

  • 选中该状态,再点击"取消" or "允许": 弹框不会再弹出
  • 未选中该状态,点击"取消" or "允许":每一次到触发条件时,都会出来一次,订阅一次用一次。
2.判断用户是否授权,弹出引导弹框

整体逻辑上面也说过,其实就是通过 wx.getSetting 接口,来获取当前订阅的状态;通过总开关subscriptionsSetting.mainSwitch和模版的状态 (为 acceptorreject等)来判断用户是否订阅。

typescript 复制代码
const subscribeMessage = async(type) => {
  const {subscriptionsSetting} = await wx.getSetting({withSubscriptions: true})
  let temp_one = (subscriptionsSetting[SUB_TEMPLATE_ID.temp_one] && subscriptionsSetting[SUB_TEMPLATE_ID.temp_one] !== 'accept') ? true : false
  let temp_two = (subscriptionsSetting[SUB_TEMPLATE_ID.temp_two] && subscriptionsSetting[SUB_TEMPLATE_ID.temp_two] !== 'accept') ? true : false

  if (!subscriptionsSetting.mainSwitch || temp_one || temp_two) {
      console.log('拒绝过,或未授权')
      // popup.is_setting = true
      Taro.showModal({
        title: '提示',
        content: '您之前拒绝过消息订阅,是否前往设置开启?',
        confirmText: '去设置',
        cancelText: '取消',
        success: async function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
            Taro.openSetting({
              withSubscriptions: true,
              success: async (res) => {
                sendSome(type)

                let msg = {
                  [SUB_TEMPLATE_ID.temp_one]: '',
                  [SUB_TEMPLATE_ID.temp_two]: '',
                }
                
                // 上报给后端,订阅状态的接口
                你的逻辑
              }
            })
          }
        }
      })
      
      return
  }
  console.log('已授权', subscriptionsSetting,'向微信上报')
  Taro.requestSubscribeMessage({
  tmplIds:  [SUB_TEMPLATE_ID.temp_one, SUB_TEMPLATE_ID.temp_two],
  success: async(res) => {
    // 你的一些其它业务逻辑
    
    let msg = {
      [SUB_TEMPLATE_ID.temp_one]: res[SUB_TEMPLATE_ID.temp_one],
      [SUB_TEMPLATE_ID.temp_two]: res[SUB_TEMPLATE_ID.temp_two],
    }
     // 上报给后端,订阅状态的接口
       你的逻辑
  }
  })
}

文档直通车:开放接口 /设置 /wx.getSetting


3. 开发者调试时,点击过"总是。。。"之后,怎么才能再次触发弹框出现呢?
  • 在开发者工具里登录你的账号

  • "清除授权数据" 或者 "全部清除"

相关推荐
崔庆才丨静觅9 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606110 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了10 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅10 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅10 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅11 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment11 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅11 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊11 小时前
jwt介绍
前端
爱敲代码的小鱼11 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax