微信小程序（uniapp）发送订阅消息

^Rocky

于 2025-04-23 15:33:28 发布

阅读量417

点赞数 8

分类专栏：微信小程序开发实战全攻略文章标签：微信小程序 uni-app

本文链接：https://blog.csdn.net/Rocky_Time/article/details/147455325

版权

微信小程序开发实战全攻略专栏收录该内容

14 篇文章

订阅专栏

微信小程序（uniapp）订阅消息通知模板实现指南

在微信小程序开发中，订阅消息是一种重要的用户触达方式，尤其适用于需要主动通知用户的场景，如订单状态更新、活动提醒等。本文将详细介绍如何在 uniapp 中实现订阅消息通知模板，并提供完整的实现思路和代码示例。

一、订阅消息的基本概念

订阅消息的定义
订阅消息是用户在小程序内主动触发某些操作后，允许小程序在特定时间向用户发送的一次性消息通知。
订阅消息的权限
用户必须明确同意订阅后，小程序才能发送消息。每次订阅仅对单次触发有效，不能长期订阅。
订阅消息的使用场景
适用于需要及时通知用户的场景，如订单支付成功、物流状态更新、活动开始提醒等。

二、实现订阅消息通知的步骤

1. 开通订阅消息模板

登录微信公众平台，进入小程序后台。
在“功能” -> “订阅消息”中，添加需要的订阅消息模板。
记录模板ID，后续代码中会用到。

2. 调用订阅消息接口

在小程序中，通过 wx.requestSubscribeMessage 接口请求用户订阅消息。

3. 发送订阅消息

后端服务器通过微信提供的接口，向用户发送订阅消息。

三、详细实现步骤

1. 前端代码实现订阅消息请求

在 uniapp 项目中，可以在需要触发订阅消息的页面添加以下代码：

注意：订阅消息方法只能通过点击事件触发，不能直接调用！

<template>
  <view class="container">
    <button @click="subscribeMessage">订阅消息</button>
  </view>
</template>

export default {
  methods: {
    subscribeMessage() {
      uni.requestSubscribeMessage({
        tmplIds: ['TEMPLATE_ID_1', 'TEMPLATE_ID_2'], // 替换为你的模板ID
        success: (res) => {
          console.log('订阅成功', res);
          if (res['TEMPLATE_ID_1'] === 'accept') {
            // 用户同意订阅后，调用后端接口发送消息
            uni.request({
              url: 'https://xxxxxx.com/sendSubscribeMessage', // 替换为你的后端接口地址
              method: 'POST',
              data: {
                openid: 'USER_OPENID', // 需要从登录态中获取用户的openid
                templateId: 'TEMPLATE_ID_1',
                data: {
                  thing1: { value: '订单支付成功' },
                  time2: { value: '2023-10-01 12:00' }
                }
              },
              success: (response) => {
                console.log('消息发送成功', response);
              },
              fail: (error) => {
                console.error('消息发送失败', error);
              }
            });
          }
        },
        fail: (err) => {
          console.error('订阅失败', err);
        }
      })
    }
  }
};

.container {
  padding: 20px;
}
button {
  background-color: #007aff;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
}

完整代码：

<template>
  <view class="container">
    <button @click="subscribeMessage">订阅消息</button>
  </view>
</template>
 
<script>
export default {
  methods: {
    subscribeMessage() {
      uni.requestSubscribeMessage({
        tmplIds: ['TEMPLATE_ID_1', 'TEMPLATE_ID_2'], // 替换为你的模板ID
        success: (res) => {
          console.log('订阅成功', res);
          if (res['TEMPLATE_ID_1'] === 'accept') {
            // 用户同意订阅后，调用后端接口发送消息
            uni.request({
              url: 'https://your-server.com/sendSubscribeMessage', // 替换为你的后端接口地址
              method: 'POST',
              data: {
                openid: 'USER_OPENID', // 需要从登录态中获取用户的openid
                templateId: 'TEMPLATE_ID_1',
                data: {
                  thing1: { value: '订单支付成功' },
                  time2: { value: '2023-10-01 12:00' }
                }
              },
              success: (response) => {
                console.log('消息发送成功', response);
              },
              fail: (error) => {
                console.error('消息发送失败', error);
              }
            });
          }
        },
        fail: (err) => {
          console.error('订阅失败', err);
        }
      });
    }
  }
};
</script>
 
<style>
.container {
  padding: 20px;
}
button {
  background-color: #007aff;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
}
</style>

2. 后端代码实现消息发送

后端需要使用微信提供的接口发送订阅消息。以下是使用 Node.js 和 axios 的示例：

const axios = require('axios');

const sendSubscribeMessage = async (req, res) => {
  const { openid, templateId, data } = req.body;

  const accessToken = await getAccessToken(); // 获取access_token的函数，需自行实现

  const url = `https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=${accessToken}`;

  const payload = {
    touser: openid,
    template_id: templateId,
    page: '/pages/index/index', // 用户点击消息后跳转的小程序页面
    data: data
  };

  try {
    const response = await axios.post(url, payload);
    res.json(response.data);
  } catch (error) {
    console.error('消息发送失败', error);
    res.status(500).send('消息发送失败');
  }
};

const getAccessToken = async () => {
  const appId = 'YOUR_APP_ID';
  const appSecret = 'YOUR_APP_SECRET';

  const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`;

  const response = await axios.get(url);
  return response.data.access_token;
};

module.exports = { sendSubscribeMessage };