微信公众号推送消息模板（抖音挺火的推送消息给女朋友）

事情是这样的，刷抖音的时候看到一个视频里面微信公众号每天推送消息给女朋友，由于一时技痒决定尝试一下...

这是抖音里面看到的样子

遵循程序员一贯的作风，不管会不会先去百度搜搜.... 结果看到都是什么用python写的，啧啧啧... 我是前端啊.... 看不懂这玩意，用我自己的方式实现吧，话不多说开始吧↓

1.先去准备我要要用到的东西

微信公众平台接口测试帐号申请：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

微信官方文档（如果出错查一下错误代码）：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Global_Return_Code.html

消息推送接口：https://api.weixin.qq.com/cgi-bin/message/template/send?access_token=${this.token}

获取token接口：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${this.appid}&secret=${this.secret}

因为不会后台，我这边全部都由前端的方式去做了，项目框架选择的是 uniapp ，不会的话可以去我的专栏去学习一下还是比较容易上手的。

 注册完成后可以看到上面的界面，在里面去拿到我们的 appID 、 appsecret

配置消息模板，大家自行搭配

这个拿到以后，我们就可以开始干活了，先看一下成品的样子

 这里是JS 部分

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				appid: "wx2......4eb",
				secret: "5ac3......97d",
				// 账号授权信息
				token: "",
				// 用户openId  
				// 臭宝ID   oeDzm6C......kRMmUDtM
				// 个人ID   oeDzm6F......hLTllHY
				touser: "oeDzm6......LTllHY",
				// 消息模板ID
				template_id: "XK_v411POkuBPw4l3-ebSfWO1Vs0AhqWaqTCBlO2lqg",
				// 回调信息
				message: "",
				// 下次生日
				xiacishengri: "",
				// 纪念日
				jinianri: "",
				// 已经相识多久了
				day: ""
			}
		},
		onLoad() {
			this.xiacishengri = this.daojishi("2023/07/30 00:00:00")
			this.jinianri = this.daojishi("2022/12/18 00:00:00")
			this.xiangshiduojiu(2020, 12, 18, 0, 0, 0)
		},
		methods: {
            // 获取token信息
			getToken() {
				const vm = this
				uni.request({
					url: `/cgi-bin/token?grant_type=client_credential&appid=${this.appid}&secret=${this.secret}`,
					method: "get",
					success: function(res) {
						vm.token = res.data.access_token
					}
				})
			},
            // 发送消息
			postMessage() {
				const vm = this
				uni.request({
					url: `/cgi-bin/message/template/send?access_token=${this.token}`,
					method: "POST",
					data: {
						"touser": this.touser,
						"template_id": this.template_id,
						"data": {
							"title": {
								"value": "今天好呀臭宝~",
								"color": "#000000"
							},
							"message": {
								"value": `我们已经在一起相识${this.day}`,
								"color": "#000000"
							},
							"bosDay": {
								"value": `距离你下次过生日只剩下${this.xiacishengri}天`,
								"color": "#000000"
							},
							"jinianri": {
								"value": `距离我们的相识纪念日还有${this.jinianri}天`,
								"color": "#000000"
							}
						}
					},
					success: function(res) {
						vm.message = res.data
					}
				})
			},
            // 倒计时方法
			daojishi(value) {
				const setTime = new Date(value);
				const nowTime = new Date();
				const restSec = setTime.getTime() - nowTime.getTime();
				// 剩余天数
				const day = parseInt(restSec / (60 * 60 * 24 * 1000));
				// 剩余小时
				const hour = parseInt(restSec / (60 * 60 * 1000) % 24);
				// 剩余分钟
				const minu = parseInt(restSec / (60 * 1000) % 60);
				// 剩余秒数
				const sec = parseInt(restSec / 1000 % 60);
				return day
			},
            // 计算你们认识了多久
			xiangshiduojiu(iYear, iMonth, iDay, iHour, iMinute, iSecond) {
				var iYear = iYear //年份
				var iMonth = iMonth //月份
				var iDay = iDay // 日期
				var iHour = iHour // 时
				var iMinute = iMinute // 分
				var iSecond = iSecond //秒

				//设计一个计时器，1秒钟运行一次
				var now = new Date(); //现在时间，获取时间戳
				//以前的时间（以前的时间戳）
				var ago = new Date(iYear, iMonth - 1, iDay, iHour, iMinute, iSecond);
				//计算时差
				var ms = now - ago;
				//计算天数
				var day = parseInt(ms / (24 * 60 * 60 * 1000));
				//计算小时
				var hours = parseInt(ms % (24 * 60 * 60 * 1000) / (60 * 60 * 1000));
				//计算分钟
				var min = parseInt(ms % (24 * 60 * 60 * 1000) % (60 * 60 * 1000) / (60 * 1000));
				//计算秒
				var s = parseInt(ms % (24 * 60 * 60 * 1000) % (60 * 60 * 1000) % (60 * 1000) / 1000);
				console.log('你认识ta已经有' + day + '天' + hours + '小时' + min + '分' + s + '秒了！')
				this.day = day + '天' + hours + '小时' + min + '分' + s + '秒'
			}
		}
	}
</script>

 html部分

<template>
	<view>
		<view style="background-color: white;display: flex;">
			<text style="height: 30px;line-height: 30px;font-size: 18px;">用户ID:</text>
			<input style="height: 30px;line-height: 30px;margin-left: 20px;font-size: 18px;" type="text"
				v-model="touser">
		</view>
		<view style="background-color: white;display: flex;">
			<text style="height: 30px;line-height: 30px;font-size: 18px;">消息模板ID:</text>
			<input style="height: 30px;line-height: 30px;margin-left: 20px;font-size: 18px;" type="text"
				v-model="template_id">
		</view>
		<button style="margin-top: 80rpx;" @click="getToken">获取token信息</button>
		<button style="margin-top: 30rpx;" @click="postMessage">发送推送消息</button>
		<view style="color: aliceblue;margin-top: 30rpx;">
			token ======>>>>>>>
			<br>
			{{token}}
		</view>
		<view style="color: aliceblue;margin-top: 30rpx;">
			回调信息 ======>>>>>>>
			<br>
			{{message}}
		</view>
	</view>
</template>

说一下他大概实现的思路哈， 懂的大佬别喷我

1.获取用户的token 

2.拿到token以后再去配置消息模板

3.拿到消息模板ID ，跟用户openid 以后，去调取消息推送的接口

因为我看到大家都是后台去写的，没有服务器... 我这个也就没发布，想完成定时推送的话，在前端项目里面加个定时器，定时24小时调用一次获token 跟 发送消息方法就可以了，我这边是把获取token跟发送消息给分开了，大家写到一起也没问题，注意同步的问题就行了

对了对了， 大家请求的时候会发生跨域问题，我们需要做个代理，把这个代码贴到对应位置上面去。manifest.json  源码视图

"h5": {
		"router": {
			"base": ""
		},
		"template": "index.html",
        // 这个是主要的哈
		"devServer": {
			"port": 8081, //端口号
			"disableHostCheck": true,
			"proxy": {
				"/": {
					"target": "https://api.weixin.qq.com", //目标接口域名
					"changeOrigin": true, //是否跨域
					"secure": false // 设置支持https协议的代理
				}
			},
			"https": true
		},
		"uniStatistics": {
			"enable": true
		}
	}

最后展示下效果吧