小程序云开发实现订阅消息推送!

简介: 小程序云开发实现订阅消息推送!

前提

遇到一个场景就是用户留言后博主对该留言进行回复后可以通过微信订阅消息的方式第一时间通知用户,并且提供直接跳转到改篇留言的页面!

小程序的订阅消息

官方描述:消息能力是小程序能力中的重要组成,我们为开发者提供了订阅消息能力,以便实现服务的闭环和更优的体验。

订阅消息推送位置:服务通知
订阅消息下发条件:用户自主订阅
订阅消息卡片跳转能力:点击查看详情可跳转至该小程序的页面

准备工作

小程序后台申请订阅消息模板,并选择相应的通知类目和包含的字段。并记住其模板ID,这个很重要。

image.png

代码

本次是利用小程序的云函数来实现订阅消息的下发,这样做的好处就是免鉴权接收消息推送。

想要实现消息订阅主要涉及到微信的两个方法:

// 订阅消息
wx.requestSubscribeMessage()
// 发送消息
wx.subscribeMessage()

订阅消息

订阅消息的规则是,用户必须通过按钮主动订阅才能下发订阅消息。所以我们在用户留言进行回复确认的时候,进行授权提示。

<button type="primary" formType="submit" plain="true" bindtap="subMessage">提交留言</button>
wx.requestSubscribeMessage({
  tmplIds: [tempId], 
// tempId就是上面后台生成的模板ID
  success: res => {
if(res[tempId] == "accept") {
// 'accept'表示用户同意订阅该条id对应的模板消息,
// 'reject'表示用户拒绝订阅该条id对应的模板消
      wx.showToast({
        title: "留言成功",
        icon: "success",
        success: sub => {
          this.setData({
            textValue: "",
            show: false
          });
          this.getData();
        }
      })
    }
  }
})

实际场景的效果

image.png

image.png

点击允许之后,就可以通过云函数进行下发消息。如果用户不勾选下面的【总是保持以上选择,不在询问】那么每次回复的时候都会进项授权提示,因为微信规则,订阅一次才能下发一次,订阅多次可以下发多次。如果用户勾选上了,那么可以进行兼容通过wx.getSetting来查询用户是否已经有订阅状态。

wx.getSetting({
// 获取用户订阅消息的订阅状态
    withSubscriptions: true, 
    success(res => {
// subscriptionsSetting 返回 true则已订阅
        res.subscriptionsSetting = {
mainSwitch: true
        }
    }),
    fail(err=> {})
});

发送消息

新建一个云函数,并进行初始化。

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
try {
const result = await cloud.openapi.subscribeMessage.send({
      touser: event.userId,
      page: event.page,
      lang: 'zh_CN',
      data: event.data,
      templateId: event.templateId,
    })
return result
  } catch (err) {
return err
  }
}

注意点:

云函数中的data里面的数据name和顺序必须和模板消息里面的数据name顺序一样。否则可能造成订阅消息不生效。

// 订阅消息推送data数据
const item = {
    thing1: {
value: this.data.liveInfo.articleTitle
    },
    name2: {
value: this.data.liveInfo.accountName
    },
    thing3: {
value: e.detail.value.msgInput
    },
    time4: {
value: this.getNowTime()
    }
}

最终效果:

image.png

image.png

image.png

相关文章
|
2月前
|
小程序 API
培训报名小程序-订阅消息发送
培训报名小程序-订阅消息发送
|
6月前
|
小程序 JavaScript 数据库
小程序云开发实战七:云开发首页列表跳转详情页
小程序云开发实战七:云开发首页列表跳转详情页
39 0
|
6月前
|
小程序 Java Maven
小程序订阅消息推送工具类
小程序订阅消息推送工具类
49 0
|
3月前
|
小程序 前端开发 IDE
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
123 1
|
5月前
|
JSON 小程序 API
小程序(三十四)微信小程序开启订阅消息推送
我这里记录一下我在配置订阅消息推送的时候发生的一些小问题吧,算是经验,给没有做过的同学避个坑。 官方文档地址:小程序订阅消息 | 微信开放文档 (qq.com)
173 0
|
6月前
|
小程序
小程序订阅消息推送简要流程图
小程序订阅消息推送简要流程图
46 0
小程序订阅消息推送简要流程图
|
6月前
|
小程序 API 开发工具
小程序消息推送入门 (订阅消息推送)
小程序消息推送入门 (订阅消息推送)
197 0
|
7月前
|
NoSQL 小程序 前端开发
uniapp小程序订阅消息推送+Thinkphp5后端代码教程示例
uniapp小程序订阅消息推送+Thinkphp5后端代码教程示例
|
9月前
|
小程序 开发工具 开发者
微信小程序订阅消息点了 “总保持以上选择、全部拒绝,不在询问” 无法再次弹出
微信小程序订阅消息点了 “总保持以上选择、全部拒绝,不在询问” 无法再次弹出
1015 0
|
11月前
|
小程序 Java 开发者
微信小程序+Springboot实现订阅消息推送
微信小程序+Springboot实现订阅消息推送
451 0

热门文章

最新文章