微信公众号开发-超简单:70行代码实现一个消息推送

1,223 阅读3分钟

微信公众号开发系列-消息推送

消息推送

微信公众平台(官网,管理小程序,微信公众号的平台): mp.weixin.qq.com/

消息推送之消息模板推送

微信公众号分订阅号(个人注册)和服务号(企业注册),我们要实现的消息推送需要服务号,虽然我只有订阅号,但我可以通过微信提供的公众平台测试账号进行消息推送实现。

公众平台测试账号入口:

image.png 进入后的页面:

image.png

我们直接拉到最下面,找到模板消息(业务通知)

image.png

官方提供的消息模板效果如下(其中蓝色字体均为变量):

image.png

消息模板功能实现官方文档: mp.weixin.qq.com/debug/cgi-b…

第一步:获取accessToken

在官方提供的文档中,我们可以发现消息模板的接口地址是:https://api.weixin.qq.com/cgi-bin/message/template/send?access_token=ACCESS_TOKEN,需要access_token,从上一页,我们可以看到获取access_token的文档:

image.png

我们封装成方法:

// main.js
const axios = require('axios'); // 由于后续我们要用node启动main.js,所以我们通过require引入axios
const config = {
    app_id: '', // 从我们打开的测试号管理页面拿取
    app_secret: '', // 从我们打开的测试号管理页面拿取
}
async function getAccessToken() {
    // 从官方文档中找到url,以及要求get请求
    // 官方文档:https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
    const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${}&secret=${app_secret}`;
    const res = await axios.get(url).catch(err => console.error(err)); 
    if (res.status === 200 && res.data?.access_token) {
        // res.data.access_token 就是我们想要的accessToken,它是微信提供给我们的一个临时通信秘钥
    }
}

第二步:消息推送

上文已经提到,模板消息(业务通知) 就是消息模板推送。

这里需要确定你要推送的人,在测试号中,我们让被推送者扫描这个二维码进行测试(注册成功后会生成一条记录,并且这里会展示我们下面推送消息所需的userid,或者也叫微信号):

image.png

然后我们需要创建消息模板,模板一部分内容是固定的,一部分内容是变化的(当然也可全部变化或不变):

1

模板的变量格式如下:{{xx.DATA}},其中花括号和.DATA是必定有的,这种格式的具体说明,见下方:

后续我们在调用推送接口时,我们要进行传参:

const param = {
    touser: '', // 被推送人的微信号,上面说过。
    template_id: '', // 消息模板id,上图红框标明
    topcolor: '#FF0000', // 顶部颜色?不明白,我设置了红色,但是没效果,貌似已经无用
    url: 'https://www.baidu.com', // 推送消息的详情按钮点击后跳转的地址,如果没有这个属性,则不展示按钮
    data: { // 这里就是配置消息模板里面的值和字体颜色了
        'xx': {
            value: '你好,clw', // 上述中{{xx.DATA}}所代表的值
            color: '#FF0000', // 变量的字体颜色
        } 
    }
}

ok,我们还可以去获取时间,天气,谚语,古诗词,然后拼接成上述模板,最后请求接口即可。

我们封装成方法:

/**
 * 使用微信测试号功能推送
 *
 * 官方文档:https://mp.weixin.qq.com/debug/cgi-bin/readtmpl?t=tmplmsg/faq_tmpl
 * */
async function sendMsgByWechatTest(accessToken) {
    // 文档可知,下方就是推送接口
    const url = `https://api.weixin.qq.com/cgi-bin/message/template/send?access_token=${accessToken}`
    // 文档可知,下方是接口所需参数
    const data = {
        touser: config.user.id,
        template_id: config.template_id,
        url: 'https://www.baidu.com', // 推送消息的详情按钮点击后跳转的地址,如果没有这个属性,则不展示按钮
        topcolor: '#FF0000',
        data: config.template_data
    };
    const res = await axios.post(url, data, {
        headers: {
            'Content-Type': 'application/json',
            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36'
        }
    }).catch(err => console.error(err));

    if (res.data?.errcode === 0) {
        console.log('推送成功');
    } else {
        console.log('推送失败', res.data);
    }
}

最后,一个完整的实现

gitee.com/yozhiyuan/9…