微信小程式訂閱功能實作 前後端

微信小程式訂閱消息文檔位址 連結

官網文檔永遠是第一手資料

步驟一：擷取模闆 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;
}


           

完工