小程序订阅服务通知、消息订阅

需要的小程序信息：

1. appId小程序ID
2. secret小程序密钥
   
3. templateId模板id
4. openId 可通过服务端获取，前端提供wxCode\

先附上官网地址：uniapp订阅消息

前端

使用框架：uniapp

前端要做的事情其实很简单，只需要调用uniapp官方的requestsubscribemessageApi， 并在成功的回调中调用服务端接口告诉服务端订阅成功即可。
以下为示例代码：

1. 通过uni.login 获取wxCode, 提供给服务端用作获取openId

const getOpenId = () => {
  uni.login({
    provider: 'weixin',
    success: (res) => {
      uni.request({
        url: 'http://localhost:3000/getOpenId', // 需修改为实际对应的url
        method: 'POST',
        data: {
          code: res.code
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
        },
        success(r: any) {
          openId.value = r.data.data
        }
      })
    }
  })
}

2. 获取到openId之后，调用uni.requestSubscribeMessage弹出订阅提示，并在回调中调用服务端接口。

const subscribe = () => {
  uni.requestSubscribeMessage({
    tmplIds: ['自己的模板id'],
    success(res) {
      uni.request({
        url: 'http://localhost:3000/subscribe',// 需修改为实际对应的url
        method: 'POST',
        data: {
          openId: openId.value,
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
        },
        success(res) {
          console.log(res)
        }
      })
    },
  })
}

到这里，前端要做的事情就差不多了，剩下的交给服务端了。

后端

使用语言：node.js

appId, secret 文章开头有获取途径

1. 获取openId

app.post('/getOpenId', async (req, res) => {
  const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${secret}&js_code=${req.body.code}&grant_type=authorization_code`;
  const resData = await request.get(url)
  res.send({ data: resData.data.openid, status: 200 })
})

2. 前端在订阅成功的回调中使用的接口

app.post('/subscribe', async (req, res) => {
  // 获取access_token, 供调用微信接口发起服务通知使用
  const tokenRes = await request.get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret')
  const data = {
    touser: req.body.openId,
    template_id: '模板id',
    page: 'pages/index/index',
    data: { // 这里为模板字段配置
      "thing1": {
        "value": '测试1'
      },
      "thing3": {
        "value": '测试2'
      },
    }
  }
  // 调用微信接口，向用户发起服务通知，此接口调用时机可自行把握，此处为实时通知。
  const messageRes = await request.post(`https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=${tokenRes.data.access_token}`, data)
  res.send({ data: circularJSON.stringify(messageRes), status: 200 })
})

到这里，服务端代码也差不多了。

微信公众平台后台模板配置

需要微信小程序具有管理权限的人登录小程序公众平台后台，对模板进行相应的配置。

1. 开启订阅消息，并配置模板。
   
2. 查看模板详情
   
   这里详细内容中的字段是我们需要用到的

  const data = {
    touser: req.body.openId,
    template_id: '模板id',
    page: 'pages/index/index',
    data: { // 这里为模板字段配置
      "thing1": {
        "value": '测试1'
      },
      "thing3": {
        "value": '测试2'
      },
    }
  }

thing1，thing3就对应模板中详细内容的值，value则为实际值

以上则为 小程序订阅服务通知主要代码实现 的主要代码