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

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

范例场景描述

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

实现流程

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)

目录
相关文章
|
3月前
|
缓存 小程序 前端开发
商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
本文系统讲解如何利用现有源码快速开发商城、点餐、家政类微信/抖音小程序,涵盖环境搭建、核心功能实现、多平台部署与优化,提供完整技术方案。实战导向,助力开发者高效入门与落地。
|
3月前
|
小程序 PHP 图形学
热门小游戏源码(Python+PHP)下载-微信小程序游戏源码Unity发实战指南​
本文详解如何结合Python、PHP与Unity开发并部署小游戏至微信小程序。涵盖技术选型、Pygame实战、PHP后端对接、Unity转换适配及性能优化,提供从原型到发布的完整指南,助力开发者快速上手并发布游戏。
|
7月前
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
609 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
10月前
|
人工智能 自然语言处理 小程序
让小程序拥有“视觉之眼“:DeepSeek图像识别实战指南
本文介绍如何通过DeepSeek计算机视觉技术,赋予小程序“看懂世界”的能力。从构建视觉感知系统、训练专属视觉词典到创造会思考的界面,详细讲解了实现智能相册、植物识别器和老旧照片修复等功能的步骤。最后探讨性能优化与安全合规要点,展望未来视觉智能应用的无限可能。
|
监控 小程序 前端开发
排队免单小程序开发源码案例
“排队免单小程序”旨在通过用户排队行为结合特定规则为用户提供免单或优惠机会,提升用户体验及商家流量。核心功能包括用户注册登录、排队管理、免单规则设置、支付与结算、商家管理和通知提醒等。技术上采用微信小程序开发框架,前后端分离架构,集成微信支付等服务,确保高效安全的数据处理与传输。项目开发过程涵盖需求分析、设计开发、集成测试和上线发布,后期注重数据监控、用户反馈和运营推广,以持续优化用户体验。
|
开发框架 小程序 测试技术
排队免单小程序开发模式案例
排队免单小程序通过线上排队系统,为用户提供便捷的免单机会。主要功能包括用户注册与登录、商家入驻与管理、排队系统、通知与提醒、活动记录与查询。技术实现涉及微信小程序原生开发框架、后端技术、API接口和第三方服务。开发过程还包括全面的测试与优化,确保稳定运行和良好体验。最后,通过提交审核、上线运营和推广策略,吸引更多用户和商家入驻。
|
JavaScript 小程序 前端开发
微信小程序 案例二 飞机大战
微信小程序 案例二 飞机大战
286 0
微信小程序 案例二 飞机大战
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
425 0
微信小程序更新提醒uniapp
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先,明确你的短剧平台的目标用户群体和他们的需求。比如,年轻用户可能更倾向于轻松、幽默的短剧内容,而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
2059 0

热门文章

最新文章