两分钟实现 给女朋友推送暖心微信公众号消息

·  阅读 4424
两分钟实现 给女朋友推送暖心微信公众号消息

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第 23 天,点击查看活动详情

start

事情的起因是因为女朋友看到了别人秀的:

1661157065871.png

巴拉巴拉......看着还蛮有意思的,走我们也去实现一个。

2 分钟实现 极简版 微信公众号模板消息推送

为了方便有和我类似需求的小伙伴,我带你 2 分钟实现上图的效果;

步骤一:代码哪里来?

git clone https://github.com/lazy-tomato/wechat_message.git
复制代码

直接 clone ,然后 npm i 安装依赖;

步骤二:公众号哪里来?

只有企业认证的服务号才有推送模板消息功能,我们个人注册的公众号是没有这个功能的。但是好在微信提供了一个用来测试公众号功能的平台,我们就暂时使用这个测试平台。

mp.weixin.qq.com/debug/cgi-b…

步骤三:个性化配置

为了方便大家使用,所有配置均在 /src/config/config.js修改。

/src/config/config.js说明:

{
  appid: 'wxb98e44f5e7a9XXXX',
  secret: 'a55ef17ddaa3c5bf0cabd344XXXXX',
  touser: 'ohqRj6EBIUp4gzIQXXXXXXXXXX',
  template_id: 'LvDuTb8njKAv-nG_2L2GT-bkZPCJi_xXXXXXXXXXX',
}
复制代码
  • appidsecret 其实就是公众号的唯一标识,测试平台是有提供的,直接复制过来即可。 1661157288354.png
  • touser 其实就是to user, 填写对应用户的唯一标识即可。关注测试平台的测试公众号后即可获取。 image.png
  • template_id 其实就是模板id, 新建一个模板即可获得这个 id。 image.png

为了再方便一点大家使用,模板示例我也给你提供一份。

{{nowDate.DATA}} 城市:{{city.DATA}}

天气: 晴

最低气温: {{low.DATA}}

最高气温: {{high.DATA}}

今天是我们恋爱的 {{loveDate.DATA}} 天


{{txt.DATA}}
复制代码

步骤四

代码中 npm start 即可。

后续:

剩下的就打开手机查看效果吧。

我的示例

1661158432960.png

主干逻辑

我写这个功能的时候,花时间最多的地方是:注册公众号。注册了个人的公共号后才发现,个人的订阅号是没有这个功能的。无奈

最后只好在 微信的测试环境进行调试;

我们的目标,就是想通过公众号,给用户发消息。

但是由于没有真实的公众号,我就放弃了接入微信的认证逻辑,直接调用两个接口搞定。

第一个接口:通过 appid secret获取公众号的认证令牌 access_token

第二个接口:拿到令牌,调用一个微信提供的,推送消息的接口即可。

调用两个接口,比较简单就不细说了,可以查看源代码即可。不过有几个注意事项需要注意:

注意事项一:

access_token 获取次数是有限制的,所以做了一下持久化,保存到了本地文件中。

获取access_token

var axios = require('axios')
var path = require('path')
var fs = require('fs')
const moment = require('moment')

function getToken(params) {
  return new Promise((resolve, reject) => {
    const tokenFile = path.join(__dirname, 'token.json')
    fs.readFile(tokenFile, 'utf-8', function (err, data) {
      if (err) {
        reject(err)
      } else {
        if (data) {
          const token = JSON.parse(data)
          // 历史的access_token没有过期,直接return数据
          if (token.expires_in > moment().unix()) {
            resolve(token.access_token)
            return
          }
        }
        /* ...过期了就重新获取 access_token,后续代码已省略 */
      }
    })
  })
}

module.exports = getToken
复制代码

注意事项二:

模板中的数据是可以设置成变量的,而且还可以自定义文字颜色;

例如我演示用的示例:

{{nowDate.DATA}} 城市:{{city.DATA}}

天气: 晴

最低气温: {{low.DATA}}

最高气温: {{high.DATA}}

今天是我们恋爱的 {{loveDate.DATA}} 天


{{txt.DATA}}
复制代码
const listConfig = {
  data: {
    nowDate: {
      value: '今天是 2022/08/21 周四 ',
      color: '#57E6E2',
    },
    city: {
      value: '北京',
      color: '#9CA2A0',
    },
    low: {
      value: '29℃',
      color: '#7CD47D',
    },
    high: {
      value: '37℃',
      color: '#CBA476',
    },
    loveDate: {
      value: '999',
      color: '#AEC5C8',
    },

    txt: {
      value: '我习惯在包里藏一瓶百无聊赖,打发人间的白云和苍狗设计睡着的未来',
      color: '#3C4244',
    },
  },
}
复制代码

简单总结一下:其实就是在调用推送消息的时候,传入一个配置 JSON 对象即可。

end

最后随便唠唠: 考虑到各种天气 api 不是非常稳定; 结构太过于复杂,对新手不够友好; 本身就没有企业级的服务号,只能在测试公众号;

最最最重要的是 本身就是写着玩,图一个乐子,就不花太多时间啦 所以:

  • 我这里的模板消息是本地编写好的内容。
  • 触发方式改成了手动触发。

这本身就是看个人的取舍。

有能力的大佬请自行添加功能!

分类:
前端
收藏成功!
已添加到「」, 点击更改