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

简介: 【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划

前言

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

目前的手段有:发短信召回(短信里携带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想要的效果。因未对外开放,所以这里就不赘述客户端渲染的消息订阅组件了。

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

目录
相关文章
|
13天前
|
小程序
微信小程序如何实现进入小程序自动连WiFi功能
微信小程序如何实现进入小程序自动连WiFi功能
|
1月前
|
小程序 Devops 开发工具
支付宝小程序入门学习之一:如何创建支付宝小程序并在手机上预览
支付宝小程序入门学习之一:如何创建支付宝小程序并在手机上预览
30 0
|
1月前
|
小程序 API
点餐小程序实战教程09-订单功能开发
点餐小程序实战教程09-订单功能开发
|
1月前
|
小程序 API
培训报名小程序-订阅消息发送
培训报名小程序-订阅消息发送
|
1月前
|
小程序 开发工具 数据库
零基础开发小程序第三课-列表功能开发
零基础开发小程序第三课-列表功能开发
|
2月前
|
小程序 JavaScript
微信小程序图片预览功能?
微信小程序图片预览功能?
|
2月前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
37 0
|
1月前
|
弹性计算 前端开发 小程序
微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
当前的通用文件上传方式是通过前端上传到服务器,再由服务器转存至对象存储。这种方式在处理小文件时效率尚可,但大文件上传因受限于服务器带宽,速度较慢。例如,一个100MB的文件在5Mbps带宽的阿里云ECS上上传至服务器需160秒。为解决此问题,可以采用后端签名的方式,使微信小程序直接上传文件到阿里云OSS,绕过服务器中转。具体操作包括在JAVA后端引入相关依赖,生成签名,并在微信小程序前端使用这个签名进行文件上传,注意设置正确的请求头和formData参数。这样能提高大文件上传的速度。
|
1月前
|
存储 小程序 开发工具
零基础开发小程序第四课-查看功能开发
零基础开发小程序第四课-查看功能开发
|
8天前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。