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

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

遵循程序员一贯的作风，不管会不会先去百度搜搜.... 结果看到都是什么用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 部分

 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
		}
	}

最后展示下效果吧