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

前言

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

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

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

文章目录

一、一次性订阅流程

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

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

相关推荐
肖永威3 小时前
python版微电网仿真工具的前端托管选型:从http.server到FastAPI StaticFiles
前端·python·http·fastapi
风骏时光牛马3 小时前
AI插件开发与效能提效工具箱
前端
IT_陈寒3 小时前
为什么你应该学习Java?
前端·人工智能·后端
weixin_417396834 小时前
监控画面卡顿与录像缺失:码率、NVR与存储容量的排查顺序
前端·网络·技术·酒店·综合布线·弱电
曹牧4 小时前
Eclipse 工作空间(Workspace)的默认 JDK 配置
前端
其实防守也摸鱼5 小时前
Cylab在线靶场——挑战图书馆初学者指南
服务器·前端·数据库·chrome·安全·网络安全·靶场
拆房老料7 小时前
【第四部分:Agentic 智能体设计模式】16. 一个 Prompt 搞不定复杂任务?试试 Prompt Chaining
java·前端·人工智能·设计模式·prompt
曹牧12 小时前
C#:空合并运算符
java·前端·数据库
小羊没烦恼!13 小时前
铁道部新客票系统设计(二)
开发语言·前端·数据库·python·oracle·c#·php
青企通14 小时前
电商小程序购物车与库存扣减:SKU 模型、合并规则与防超卖实践
小程序·apache