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

这是我参与8月更文挑战的第2天

前提

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

小程序的订阅消息

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

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

准备工作

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

企业微信20210804-151337@2x.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();
        }
      })
    }
    
  }
})

实际场景的效果

点击允许之后，就可以通过云函数进行下发消息。如果用户不勾选下面的【总是保持以上选择，不在询问】那么每次回复的时候都会进项授权提示，因为微信规则，订阅一次才能下发一次，订阅多次可以下发多次。如果用户勾选上了，那么可以进行兼容通过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()
    }
}

最终效果：

点击跳转