uni-app + .NET 7实现微信小程序订阅消息推送

最新推荐文章于 2025-08-02 12:15:16 发布

原创

最新推荐文章于 2025-08-02 12:15:16 发布 · 2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #.NET #小程序订阅消息

微信小程序的订阅消息是小程序的重要能力之一，为实现服务的闭环提供更优的体验。订阅消息我们应该经常见到，比如下单成功之后的服务通知，支付成功后的支付成功通知，都属于小程序的订阅消息。

本文只实现一次性订阅的功能，至于长期订阅与设备订阅，有机会碰到再进行研究。

功能介绍

消息能力是小程序能力中的重要组成，我们为开发者提供了订阅消息能力，以便实现服务的闭环和更优的体验。

订阅消息推送位置：服务通知
订阅消息下发条件：用户自主订阅
订阅消息卡片跳转能力：点击查看详情可跳转至该小程序的页面

在这里插入图片描述

消息类型

1. 一次性订阅消息

一次性订阅消息用于解决用户使用小程序后，后续服务环节的通知问题。用户自主订阅后，开发者可不限时间地下发一条对应的服务消息；每条消息可单独订阅或退订。

2. 长期订阅消息

一次性订阅消息可满足小程序的大部分服务场景需求，但线下公共服务领域存在一次性订阅无法满足的场景，如航班延误，需根据航班实时动态来多次发送消息提醒。为便于服务，我们提供了长期性订阅消息，用户订阅一次后，开发者可长期下发多条消息。

目前长期性订阅消息仅向政务民生、医疗、交通、金融、教育等线下公共服务开放，后期将逐步支持到其他线下公共服务业务。

所以我们普通小程序，在注册成功后，订阅消息的模板选择，只有一次性订阅的选项，没有长期订阅的选项。
在这里插入图片描述

3. 设备订阅消息

设备订阅消息是一种特殊类型的订阅消息，它属于长期订阅消息类型，且需要完成「设备接入」才能使用。

了解了小程序订阅消息之后，我们开始进入正题！

基本流程

注意事项

由于后面的文章还很长，注意事项优先发出来，可能看到这里已经解决了你的问题。

一次性模板 id 和永久模板 id 不可同时使用。
低版本基础库2.4.4~2.8.3 已支持订阅消息接口调用，仅支持传入一个一次性 tmplId / 永久 tmplId。
2.8.2 版本开始，用户发生点击行为或者发起支付回调后，才可以调起订阅消息界面
2.10.0 版本开始，开发版和体验版小程序将禁止使用模板消息 formId。
一次授权调用里，每个 tmplId 对应的模板标题不能存在相同的，若出现相同的，只保留一个。
2.10.0 版本开始，支持订阅语音消息提醒

特别注意第三条，版本库是2.8.2及以上的时候，订阅消息必须发生点击行为或是发起支付回调后，才可以调起订阅消息的界面。这个点击行为没有特别要求。比如一个表单，点击提交按钮后，也是可以调起订阅消息界面的。支付后的回调不需要点击行为，也可以调起订阅消息界面。

获取模板ID

在微信公众平台登录小程序，在订阅消息功能下，进入到我的模板，找到模板，并将模板id复制出来，如果没有模板，需要先添加模板，再获取模板id
在这里插入图片描述

要添加新模板，点击选用按钮，在公共模板库中选择需要的模板，添加就可以了。
在这里插入图片描述

有很多文章说，如果没有合适的模板，可以创建自定义模板。但如果你真想去创建自定义模板，会发现根本找不到地方。
如果想创建自定义模板，可通过以下方式进行。
1、点击选用按钮，来到公共模板库。（公共模板库中的模板，与你小程序的服务类目相关）
2、在搜索框中，输入比较长的关键词。
3、点击搜素，如果还是能匹配出模板来，则重新调整关键词，直到没有任何搜索结果为止。
4、点击页面中的帮忙我们完善模板库，进行自定义模板设置。
在这里插入图片描述

创建自定义模板的时候，一定要仔细阅读申请模板的流程，尤其是第1条。我单拉出来重点标注一下，因为没仔细看第1条，第一次申请的几个模板白白等了好几天。
模板标题需体现具体的服务场景，要求以“通知”或“提醒”结尾，如：物流到货通知、交易提醒。

看到这里，会发现以上大部分跟网上的文章没啥区别，别急，正文来了！

uni-app代码

前端实现的是点击提交按钮，保存表单，保存成功后发送订阅消息，在pages/index/index.vue下编写如下代码：

<template>
	<view>
		<view class="setp">
			<publishStep :list="setpList" :current="0" mode="number" active-color="#eb3572"></publishStep>
		</view>
		<view class="container">
			<u-form :model="form" ref="uForm" :rules="rules" :error-type="errorType">
				<u-form-item label="姓名" label-width="160rpx" :border-bottom="true" :label-style="{'font-size':'28rpx'}" prop="realName">
					<u-input v-model="form.realName" placeholder="" input-align="right" />
				</u-form-item>
				
				<u-form-item label="服务时间" label-width="160rpx" :border-bottom="true" :label-style="{'font-size':'28rpx'}"
				 right-icon="arrow-right" prop="serviceTime">
					<u-input v-model="form.serviceTime" placeholder="请选择服务时间" :disabled="true" input-align="right" @click="timeShow=true" />
				</u-form-item>
				
				<u-form-item label="服务地址" label-width="160rpx" :border-bottom="true" :label-style="{'font-size':'28rpx'}" prop="serviceAddress">
					<u-input v-model="form.serviceAddress" placeholder="" input-align="right" @click="selectAddress" />
				</u-form-item>
				<u-form-item label="联系电话" label-width="160rpx" :border-bottom="true"