微信小程序订阅功能实现 前后端

微信小程序订阅消息文档地址 链接

官网文档永远是第一手资料

步骤一：获取模板 ID

地址

步骤二：获取下发权限

开发工具不能唤起，真机调试

以一次性订阅为例

这里我用按钮来实现的，自己根据实际项目修改

页面效果

前端代码

home.js

  authMessageTpl() {
    wx.requestSubscribeMessage({
      tmplIds: ['模板id'],
      success: (res) => {
        if (res['模板id'] === 'accept') {
          wx.showToast({
            title: '订阅OK！',
            duration: 1000,
          })
        }
      }
    })
  },

步骤三：调用接口下发订阅消息

先获取接口权限access_token，再根据你选择的模拟，去模板详情 配置数据参数

实现效果

前端代码

home.js

  sendMessage: function () {
    wx.request({
      url: 'http://xxxx:9527/wx/posden-spring-wx-user/getApiAccessToken',
      success: (res) => {
        const accessToken = res.data.data.access_token; // 获取权限access_token
        wx.request({
          url: 'http://xxxx:9527/wx/posden-spring-wx-user/sendMessageTpl',
          method: 'POST',
          header: {
            'content-type': 'application/json',
            'token': wx.getStorageSync('token') // 此处我是登入时自己jwt生成的token
          },
          data: {
            accessToken: accessToken,
            "touser": 'openId',
            "templateId": "templateId",
            "page": "/pages/home/home.wxml?xxx=xxx",
            "miniprogramState": "developer",
            "lang": "zh_CN",
            "data": {
              "character_string1": {
                "value": "M12345678936"
              },
              "phrase2": {
                "value": "已完成"
              },
              "time3": {
                "value": "2020-04-28 10:22:22"
              },
              "thing4": {
                "value": "订阅信息"
              }
            }

          },
          success: (res) => {
            console.log(res) // 此处要打印状态值。尤其不成功要提示状态码（消息），如果是授权问题，可重新唤起授权
          }
        })
      }
    })
  }

后端代码

    @GetMapping("/getApiAccessToken")  // 获取access_token 不推荐如此获取，仅供个人使用。企业级建议存放redis
    public ReturnParam<Object> getApiAccessToken() {
        String result = HttpUtil.get("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+appId+"&secret="+appSecret);
        JSONObject res = JSONObject.parseObject(result);
        ReturnParam<Object> returnParam = new ReturnParam<>(); // 自己返回类的封装
        returnParam.setSuccess(true);
        returnParam.setData(res);
        return returnParam;
    }


    @NeedLogin  // 自己定义的注解需要传递token 根据自己实际项目定制
    @PostMapping("/sendMessageTpl")
    public ReturnParam<Object> sendMessage(@RequestBody TplMessageDTO tplMessageDTO) {
        String accessToken = tplMessageDTO.getAccessToken();
        String lang = tplMessageDTO.getLang();
        String miniprogramState = tplMessageDTO.getMiniprogramState();
        String templateId = tplMessageDTO.getTemplateId();
        String touser = tplMessageDTO.getTouser();
        String page = tplMessageDTO.getPage();
        Object tpldata = tplMessageDTO.getData();

        Map<String , Object> data = new HashMap<>();
        data.put("touser",touser);
        data.put("template_id", templateId);
        data.put("page", page);
        data.put("data", tpldata);
        data.put("miniprogram_state", miniprogramState);
        data.put("lang", lang);
        Map<String , String> header = new HashMap<>();
        String response = HttpUtil.post("https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=" + accessToken, data, 1, header); // 自己封装的HttpUtil工具类
        
        ReturnParam<Object> returnParam = new ReturnParam<>(); // // 自己封装的返回类
        returnParam.setSuccess(true);
        Map<String,Object> parse = JSONObject.parseObject(response);
        returnParam.setData(parse);
        return returnParam;
    }



// TplMessageDTO 
package com.example.demo.wx.entity;

import lombok.Data;

@Data
public class TplMessageDTO {
    private String accessToken;
    private String touser;
    private String templateId;
    private String page;
    private String miniprogramState;
    private String lang;
    private Object data;
}

完工