微信小程序-服务通知的订阅与下发（基于云调用）

最新推荐文章于 2024-07-02 11:25:10 发布

super--Yang

最新推荐文章于 2024-07-02 11:25:10 发布

阅读量6.4k

点赞数 8

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/weixin_44702572/article/details/120714326

版权

微信小程序专栏收录该内容

20 篇文章 10 订阅

订阅专栏

本文详细介绍了如何在小程序中实现服务通知的订阅和下发，包括申请消息模板、订阅限制、订阅有效期、下发接口使用以及代码实现。特别强调了订阅一次可多次下发的特性，并提供了云函数下发服务通知的示例代码。通过用户交互触发订阅，确保消息的安全与用户体验。

摘要由CSDN通过智能技术生成

一、前言

这篇博客的内容比较基础，主要是实现小程序服务通知的订阅以及下发（云调用）。虽然简单但是应用场景却非常、非常、非常的普遍。例如：下单通知、小程序取餐通知等等，其实就是通知用户一些事件的进度、结果等。如下图：
在这里插入图片描述

二、一些注意点

知道服务通知是啥以及应用场景之外，还需要知道一些其他的注意点。

1. 需要申请消息模板
微信为了确保消息的安全性，避免给用户下发垃圾通知，所有的消息模板都需要在小程序的微信公众平台去申请。
在这里插入图片描述

2. 订阅一次只能发送一条
微信为了防止频繁下发服务通知影响用户体验，因此订阅一次只能下发一条服务通知给用户。（一次订阅最多可订阅3条不同的通知)当然，如果是政府之类的小程序则可以申请长期订阅模板，订阅一次即可不限次数发送通知。

3. 订阅长期有效
有一部分人觉得订阅一次只能发送一次的限制很鸡肋，但是没办法，总要有取舍的。有一个值得开心的就是，订阅一次后，次数会叠加而且没有过期时间，也就是说一年前你订阅了10次，一年后再下发这个通知10次也是可以下发成功的。

基于这个条件，我们就可以在小程序合适的地方放置订阅的触发点，引导用户订阅消息，这样在下发消息的时候就不用太过于忧虑。

4. 下发接口只能在服务端调用
为了确保安全，用户订阅后，下发通知的操作只能在服务端去调用下发通知的接口。

5.订阅请求事件触发
还需要注意的就是，需要调起订阅消息弹窗，要在用户发生点击行为或者发起支付回调后，才可以调起。

更多细节，戳下方链接直达官方文档了解。

订阅文档直通车
 下发订阅消息文档直通车

三、实现过程

申请模板

直接去公众平台申请一个符合你需求的模板就行。下面这个是我随便申请的一个模板。
在这里插入图片描述

代码实现

wxml

<!--pages/APITest/APITest.wxml-->
<button type="primary" style="margin-top: 55rpx;" bindtap="requestSubMsgTap">订阅消息按钮</button>

<button type="warn" style="margin-top: 55rpx;" bindtap="sendSubMsgTap">下发服务通知</button>

在这里插入图片描述

JS代码

// pages/APITest/APITest.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /** 订阅消息点击监听 */
  requestSubMsgTap(){
    const tmplIds = ["你的模板id"]
    wx.requestSubscribeMessage({
      tmplIds: tmplIds,
      success(res){
        console.log("订阅消息唤起成功 =====>", res)
      },
      fail(err){
        console.log("订阅消息唤起失败 =====>", err)
      }
    })
  },

  /** 下发服务通知点击监听 */
  sendSubMsgTap(){
    wx.cloud.callFunction({
      name: "sendSubMsg",
      success(res){
        console.log("调用下发服务通知云函数成功 =====>", res)
      },
      fail(err){
        console.log("调用下发服务通知云函数失败 =====>", err)
      }
    })
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {}
})

订阅按钮点击

在这里插入图片描述

下发消息云函数代码（sendSubMsg）

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async () => {
  // 下发消息对象
  const sendData = {
    "touser": '接收者的openid',
    "page": 'pages/APITest/APITest', // 点击跳转页面
    data: {
      "thing2": {
        "value": '蜜桃乌龙茶'
      },
      "amount3": {
        "value": '15元'
      },
      "thing11": {
        "value": '正在配送中'
      },
      "thing5": {
        "value": '点击进入小程序查看骑手位置'
      }
    },
    "templateId": '对应的模板id',
    "miniprogramState": 'developer' // 跳转小程序的版本（开发版、体验版、正式版三种） 
  }
  return await cloud.openapi.subscribeMessage.send(sendData)
}

这里需要注意的是data节点内的子对象。例如

    data: {
      "thing2": {
        "value": '蜜桃乌龙茶'
      },
      "amount3": {
        "value": '15元'
      },
      "thing11": {
        "value": '正在配送中'
      },
      "thing5": {
        "value": '点击进入小程序查看骑手位置'
      }
    }

这里的 thing2, amount3, thing11, thing5 都不是乱写或者固定的，需要根据申请的模板来写。看下图对比

在这里插入图片描述
需要与模板一一对应。

此外还需要注意的就是，云函数的config.json里需要配置一下。

{
  "permissions": {
    "openapi": [
      "subscribeMessage.send"
    ]
  }
}

目录结构

在这里插入图片描述

下发按钮点击结果

在这里插入图片描述

非常需要注意的地方

看图。
文档直通车
在这里插入图片描述

四、结语

实际开发中的其他逻辑就不写了，这里只是最简单的实现。

有任何疑问可以在评论区留下。我每天都会进行回复，私聊不回。（为了刷积分）

以上均是本人开发过程中的一些经验总结与领悟，如果有什么不正确的地方，希望大佬们评论区斧正。

💥最后！！！不管这篇文章对你有没有用，既然都看到最后了。
👍赞一个！！！
🤩当然，顺带收藏就最好了。
😎欢迎转载，原创不易，转载请注明出处✍。

😊如果你对小程序开发有兴趣或者正在学习小程序开发，可以关注我。每一篇都是原创，每一篇都是干货噢~。
————————————————
版权声明：本文为CSDN博主「super–Yang」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44702572/article/details/120714326