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

前言

在发送模板消息之前我们要首先搞清楚微信小程序的逻辑是什么，这只是前端的一个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.实现图片