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

微信小程序 专栏收录该内容
10 篇文章 2 订阅

一、前言

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

二、一些注意点

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

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

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值