微信小程序发送模板消息-详解【有图】

前言

在发送模板消息之前我们要首先搞清楚微信小程序的逻辑是什么，这只是前端的一个demo实现，建议大家在后端处理，前端具体实现：如下图

1.获取小程序Id和密钥

我们注册完微信小程序后，可以在开发设置中看到以下内容，注意，密钥只会在生成时显示

2.创建模板消息，拿到模板id

在右侧详情中我们可以看到具体要传输的数据对象，注意一一对应

3.发送模板消息-完整代码

<template>
	<view class="content">
		<image class="logo" src="/static/guide1.png"></image>
		<view class="text-area">
			<button class="title" @click="btnclick">订阅消息</button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { parseTime } from "../../utils/ruoyi";

	const show = ref(true)
	const showModal = ref(false);

	function close() {
		show.value = false
	}


	function acc() {
		uni.showModal({
			title: '通知权限',
			content: '请授权通知管理，用于给您及时传达消息',
			success: function(res) {
				if (res.confirm) {
					console.log('点击了确认')
					btnclick()
				} else {
					console.log('点击了取消')
				}
			}
		})
	}


	function btnclick() {
		if (wx.requestSubscribeMessage) {
			wx.requestSubscribeMessage({
				tmplIds: ['模板Id'],
				success(res) {
					if (res['模板Id'] == 'accept') {
						console.log('用户订阅成功');
						btnSubscription()
					} else if (res['模板Id'] == 'reject') {
						console.log('用户拒绝订阅');
					}
				},
				fail(err) {
					console.error('订阅请求失败:', err);
				}
			});
		} else {
			console.error('此平台不支持订阅');
		}
	}

	async function btnSubscription() {
		let code = null;
		let accessToken = null;
		let openid = null;
		let time = parseTime(new Date())

		try {
			code = await getLoginCode();
			if (code) {
				openid = await requestOpenID(code);
				console.log('User OpenID:', openid);
			}
			accessToken = await requestAccessToken();
			console.log('Access Token:', accessToken);
		} catch (error) {
			console.error('errorerror', error);
		}
		uni.request({
			url: 'https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=' +
				accessToken,
			method: 'POST',
			data: {
				touser: openid,
				template_id: '模板Id',
				page: "pages/index/index",
				data: {
					thing1: {
						value: '测试小程序订阅通知'
					},
					thing2: {
						value: '该服务是测试通知，请务必订阅'
					},
					name3: {
						value: '测试一号'
					},
					date4: {
						value: time
					},
					thing5: {
						value: '测试'
					}
				}
			},
			success: (res) => {
				console.log("发送成功", res);
			}
		})
	}

	const getLoginCode = () => {
		return new Promise((resolve, reject) => {
			wx.login({
				success: (res) => {
					console.log('res.code', res.code);
					if (res.code) {
						resolve(res.code);
					} else {
						reject('Failed to obtain login code');
					}
				},
				fail: (err) => {
					reject(err);
				},
			});
		});
	};

	const requestOpenID = (code) => {
		return new Promise((resolve, reject) => {
			wx.request({
				url: 'https://api.weixin.qq.com/sns/jscode2session',
				data: {
					appid: '小程序AppId',
					secret: '小程序密钥',
					js_code: code,
					grant_type: 'authorization_code',
				},
				success: (res) => {
					console.log('resres', res);
					if (res.data.openid) {
						resolve(res.data.openid);
					} else {
						reject('Failed to obtain user OpenID');
					}
				},
				fail: (err) => {
					reject(err);
				},
			});
		});
	};

	const requestAccessToken = () => {
		return new Promise((resolve, reject) => {
			wx.request({
				url: 'https://api.weixin.qq.com/cgi-bin/token',
				data: {
					appid: '小程序AppId',
					secret: '小程序密钥',
					grant_type: 'client_credential',
				},
				success: (res) => {
					if (res.data.access_token) {
						resolve(res.data.access_token);
					} else {
						reject('Failed to obtain Access Token');
					}
				},
				fail: (err) => {
					reject(err);
				},
			});
		});
	};


	acc()
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 600rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

4.实现图片