【经验分享】支付宝小程序订阅消息功能实操（前端篇）｜江海计划

前言

小程序的属性是即用即走，如果用户访问完你的小程序后就流失了，那么怎样让用户再次回来使用你的小程序呢？

目前的手段有：发短信召回（短信里携带scheme地址，点击直接拉起小程序）以及这篇文章将要介绍的订阅消息功能。

先看下效果图：

简单来说就是：通过官方提供的能力，实现推送你的小程序消息到用户的支付宝首页，用户查看到后点击即可跳回你的小程序。

举个例子：你在青团社进行职位投递，当你投递后，商家录取你的投递信息，通过服务通知推送到支付宝app的首页或者push推送到你的手机锁屏界面，方便你快速了解当前投递进度情况。

前面简单的说了下订阅消息是用来干嘛的，那么接下来将会带你实操如何接入订阅消息功能。

订阅消息目前有两种调用方式：一种是基础库1.x版本的订阅消息插件、一种是基础库2.7.10以上的使用api的方式调用。

基础库1.x版本的插件调用方式已经淘汰了，这里就不做赘述了，强烈推荐大家更新到基础库2.x，然后使用2.7.10基础库提供的my.requestSubscribeMessage()方法

使用该能力需要挂载 消息（商家消息）功能包、个人、企业主体都可调用。

注意点

• 调用消息订阅接口，一次性最多传入三个模板 id。
• 基础库 v2.x 从 2.7.10 开始支持，（个人建议在小程序后台设置里，设置小程序线上最低基础库版本为2.7.10，同时观察影响人数，设置后低于该基础库的用户会提示更新支付宝App，如果不设置线上最低基础库版本，那么调用时会提示该api is not a function）
• 基础库版本低于 2.7.15，不能和 web-view 组件共用，会被遮盖。
• 可主动触发、可手动触发，即：可在onLoad里调用直接弹出提醒订阅，也可点击按钮后再触发订阅弹窗，支付宝官方未做限制。这里建议大家让用户手动触发，小程序首页onLoad里不要主动触发，在用户未做任何操作的情况下弹出，打断了用户的操作行为大概率审核不过。

订阅消息分长期订阅消息，以及一次性订阅消息。

长期订阅消息：订阅一次可以推送多次（单天推送有频率限制，比如一天只能推一次），不用每次都弹窗

一次性订阅消息：订阅一次推送一次，每次都会有订阅弹窗。

接下来实操如何使用：

通过选取配置了该小程序的订阅消息ID（https://opendocs.alipay.com/mini/01rnqx）。

这里吐槽一下：订阅消息入口在运营管理里，开发者查看时需要注意，初次使用以为在开发管理页面。

首先先写一个弹窗，引导用户点击订阅

目前模板ID我们是配置在数据库，使用不同的key去获取，没写死在代码里，方便替换：

// 获取订阅消息id并唤起订阅消息弹窗
handleSubscribe() {
   let postData = {
     key: 'ZFB_XXX_XXX_LIST'
   }
   this.$request.post('xxx', postData).then((res) => { // this.$request为封装的request请求方法。
     if (res.success) {
       my.requestSubscribeMessage({
         entityIds: res.data, // 这里获取到模板id数组，格式为['xxxxx', 'xxxxx']
         success: (res) => {
           const { result: { subscribeEntityIds = [] } = {} } = res // 返回已订阅的模板id，会将历史已订阅一起返回
           if (subscribeEntityIds.length) {
             const templateIds = subscribeEntityIds.join(',') // 将数组格式转为字符串格式，用于提交给服务端
             console.log('templateIds---->', templateIds)
             my.showToast({  // 提示用户订阅成功，也可用my.showToast
               content: `消息订阅成功`,
               type: 'success'
             })
             this.pushMerChant(templateIds) // 将用户选择的ID提交给服务端
           }
         },
         fail: err => { // 错误提示
           console.log(err)
         }
       })
     } else {
       util.toast(res.msg || '服务器错误，请稍后重试')
     }
   })
 },
 // 上报用户订阅的模版id
 pushMerChant(templateIds) {
   const aliUserId = util.getStorageSync('aliUserId') || '' // 获取缓存里的userid
   let postData = {
     aliUserId, // 用户的userId，用于给该用户推送模板消息
     templateIds  // 用户订阅的模板id
   }
   this.$request.post('/xxx/subscribe', postData)
 },
 
 // 以上为我们业务内的实现方式，而你们可以直接这样使用：
 my.requestSubscribeMessage({
   entityIds: ['xxxxx', 'xxxxx'],
   success: (res) => {
   const { result: { subscribeEntityIds = [] } = {} } = res // 返回已勾选的模板id
   if (subscribeEntityIds.length) {
      my.showToast({  // 提示用户订阅成功
        content: `消息订阅成功`,
        type: 'success'
      })
     }
  },
  fail: err => { // 错误提示
    console.log(err)
  }
})

调试时需要注意

• IDE里订阅成功后，无法清除订阅授权记录，即：允许订阅后IDE里无法再弹出弹窗（目前该需求已反馈IDE产品童鞋，正在排期支持中~）
• 真机清除授权数据：点击右上角三个点 > 点击弹窗里的设置 > 找到消息管理 点击你已订阅的该模板前的小icon即可解除授权。
• 

为了不打扰到用户：

长期订阅消息：建议未订阅或者拒绝的用户弹窗一天一次，已订阅的就不再弹窗。

一次性订阅消息在用户有操作后按实际情况判断是否弹窗。

如果用户拒绝订阅怎么唤醒订阅：

用户拒绝并且点了不再提醒，大概率是不希望你打扰到TA，对于该类用户你可尝试：

通过订阅关系查询接口（https://opendocs.alipay.com/mini/02s1fd）查询用户用户是拒绝订阅还是保持拒绝订阅（拒绝订阅，不再提醒）, 通过弹窗的方式引导用户开启订阅。（不建议使用）

后语

至于大家发现的我的订阅弹窗里没有 “拒绝，不再提醒”，这是因为我们使用的是客户端渲染的消息订阅组件，这种方式官方不推荐。

因为客户端消息订阅组件 和 小程序框架提供的消息订阅组件 是两套独立开发维护的，不保证 小程序的订阅消息新能力/新样式 在客户端消息订阅组件上提供，也不保证客户端订阅组件的更新率或者及时的bugfix。

我们使用该api是为了盖住小程序的tabbar，否则tabbar+订阅弹窗一起显示，达不到UI想要的效果。因未对外开放，所以这里就不赘述客户端渲染的消息订阅组件了。

欢迎大家有问题的反馈问题，有不懂的评论留言或钉钉私信。