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

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

前提

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

小程序的订阅消息

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

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

准备工作

小程序后台申请订阅消息模板,并选择相应的通知类目和包含的字段。并记住其模板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

相关文章
|
7月前
|
小程序 API
培训报名小程序-订阅消息发送
培训报名小程序-订阅消息发送
|
7月前
|
小程序 前端开发 数据可视化
微信小程序云开发入门教程-全局文件介绍
微信小程序云开发入门教程-全局文件介绍
|
7月前
|
小程序 前端开发 开发工具
微信小程序云开发|基于微信小程序实现房产中介平台系统
微信小程序云开发|基于微信小程序实现房产中介平台系统
139 0
|
小程序 JavaScript 数据库
小程序云开发实战七:云开发首页列表跳转详情页
小程序云开发实战七:云开发首页列表跳转详情页
79 0
|
2月前
|
小程序 开发工具
微信小程序云开发的开通
微信小程序云开发的开通
56 0
微信小程序云开发的开通
|
4月前
|
存储 运维 小程序
后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
【8月更文挑战第27天】支付宝小程序云开发是由阿里云提供的集成开发环境,助力开发者高效、安全地构建小程序后端服务,免去服务器搭建,显著提高开发效率并降低运维成本。它集成了云函数、云数据库及云存储等功能,便于快速搭建后端逻辑。例如,仅需简单几行代码即可创建HTTP接口或进行数据管理。这使得开发者能更专注于业务逻辑和用户体验优化,同时平台还提供了强大的安全保障措施,确保数据安全和用户隐私。无论对于初创团队还是成熟企业,支付宝小程序云开发都能有效提升产品迭代速度和市场竞争力。
95 1
|
4月前
|
存储 小程序 数据可视化
小程序开发问题之使用小程序云服务开发个人相册小程序如何解决
小程序开发问题之使用小程序云服务开发个人相册小程序如何解决
|
小程序 JavaScript 数据库
微信小程序云开发数据库操作删除记录
微信小程序云开发数据库操作删除记录
140 0
|
7月前
|
小程序 JavaScript 前端开发
微信小程序云开发入门实践
微信小程序云开发入门实践
|
5月前
|
存储 小程序 API
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
90 0
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)