【微信小程序】实战案例 -- 向订阅用户发送消息(范例:报名提醒)

简介: 【微信小程序】实战案例 -- 向订阅用户发送消息(范例:报名提醒)

范例场景描述

活动发起人发起了一场活动,在有人通过微信小程序报名活动时,活动发起人/活动报名审核人员希望可以收到一条报名处理提醒消息。

实现流程

1. 选用订阅模板

登录到小程序后台

找到满足需求的模板,点击选用

(消息模板只能从已有的服务类目提供的公共模板中选取,若未发现合适的模板,可以考虑添加更多服务类目)

  • 勾选消息需要的字段
  • 拖动手柄可以调整字段顺序
  • 输入使用场景说明
  • 点击提交按钮

此时,便可在我的模板中,发现选中的模板,可以复制对应的模板ID,还可以查看模板详情

  • 此处的模板 ID 是开发时经常用到的字段,非常重要
  • 详细内容中各消息字段对应的字段,将用于自定义传参,如活动名称通过字段thing1进行自定义,详见下文的范例代码。

2. 获取用户授权

要想给用户发送消息,需先征得用户的同意(即用户需先订阅)

先写个订阅按钮

<t-grid-item text="订阅" icon="notification" bindtap="subscribe" />
 
  // 订阅
  subscribe() {
    wx.requestSubscribeMessage({
      // 输入对应的消息模板ID,可以是多个模板!
      tmplIds: ['1I9VUxqCEkYX*******QcFOb3LE1pE9coE'],
      success(res) {}
    })
  },

用户点击订阅按钮后,弹出消息提醒

  • 若想一次授权就能长期收到消息,需勾选总保持以上选择

3. 编写发送消息的云函数

创建并部署云函数 send_Msg,代码如下:

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

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
}) // 使用当前云环境

// 云函数入口函数
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.subscribeMessage.send({
      touser: event.openid, //接收消息的用户的openid
      page: 'pages/components/party/detail/index?id=' + event.partyID, //点开消息打开的小程序页面
      //消息的内容
      data: {
        // 活动名称
        thing1: {
          value: event.partyName
        },
        // 活动时间
        date2: {
          value: event.date
        },
        // 报名人员
        name3: {
          value: event.name
        },
        // 备注
        thing5: {
          value: event.mark
        },
      },
      templateId: '1I9VUxqCEkY******E9coE' //模板id
    })
    return result
  } catch (err) {
    return err
  }
}
  • 核心参数为接收消息用户的 openid
  • 消息内容的字段,和消息模板详情中的字段对应!

4. 发送消息

  // 发送消息
  sendMsg(name) {
    let detail = this.data.detail
    wx.cloud.callFunction({
      name: 'send_Msg',
      data: {
        // 接收消息的用户的openid
        openid: 'opzU14300narCLwCG0DJw_FGwbnA',
        // 活动id
        partyID: detail._id,
        // 活动名称
        partyName: detail.title,
        // 活动时间
        date: detail.date,
        // 报名人姓名
        name: name,
        // 备注
        mark: "请尽快确认!",
      }
    }).then(res => {})
  },

当用户报名活动时,调用上方函数发送消息

        wx.showToast({
          title: '报名成功',
        })
        that.sendMsg(nickname)

目录
相关文章
|
4天前
|
小程序 开发者
uniapp实战 —— 开发微信小程序的调试技巧
uniapp实战 —— 开发微信小程序的调试技巧
10 1
|
3天前
|
XML Java 数据格式
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
支付系统----微信支付16----创建案例项目-引入Swagger
支付系统----微信支付16----创建案例项目-引入Swagger
支付系统---微信支付14----创建案例项目---介绍,第二步引入Swagger,接口文档和测试页面生成工具,定义统一结果的目的是让结果变得更加规范,以上就是谷粒项目的几个过程
支付系统---微信支付14----创建案例项目---介绍,第二步引入Swagger,接口文档和测试页面生成工具,定义统一结果的目的是让结果变得更加规范,以上就是谷粒项目的几个过程
|
4天前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
7 0
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的微信小程序的网上商城附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的微信小程序的网上商城附带文章源码部署视频讲解等
11 3
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
11 2
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
8 1
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的电影交流平台小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的电影交流平台小程序附带文章源码部署视频讲解等
12 1
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的电器维修系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的电器维修系统小程序附带文章源码部署视频讲解等
8 1