uniapp 微信小程序 订阅消息功能实现

该网址 https://api.weixin.qq.com 上线后不可访问,调用该网址操作需在后端( 重要! 重要! 重要!)

1.首先拿到的三个码

复制代码
//微信公众平台
//https://mp.weixin.qq.com
const wxappid = "管理-开发管理-AppID(小程序ID)";
const wxsecret = "管理-开发管理-AppSecret(小程序密钥)";
const tmplIds = "基础功能-订阅消息-模板ID";

2.点击提示确认框,确认发送消息

复制代码
//订阅确认框
const subscriptionLicense = () => {
  uni.requestSubscribeMessage({
    tmplIds: [tmplIds],
    success(res) {
      if (res[tmplIds] === "accept") {
        uni.showToast({
          title: "订阅成功",
          icon: "none",
          duration: 2000,
        });
      }
    },
  });
};

3.点击发送订阅消息

复制代码
//发送订阅消息
const sendMsg = async () => {
  const js_code = await getJsCode();

  const openid = await getOpenId(js_code);

  const access_token = await getAccessToken();

  uni.request({
    url:
      "https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=" +
      access_token,
    method: "POST",
    data: {
      touser: openid,
      template_id: tmplIds, // 模板id
      page: "pages/index/index", // 点击消息卡片跳转地址
      data: {
        // data是模板内容,属性名为模板中所给,value值是需要传递的。
        thing13: {
          value: "张三",
        },
        date5: {
          value: "2020年3月1日",
        },
        date2: {
          value: "17:45",
        },
        thing6: {
          value: `信用卡及分期通业绩`,
        },
        thing15: {
          value: `请在8:00-9:00之间完成打卡`,
        },
      },
    },
    success: (res) => {
      console.log(res);

      uni.showToast({
        title: "成功",
        icon: "none",
        duration: 1500,
      });
    },
  });
};

//获取jsCode用于获取OpenId
const getJsCode = () => {
  return new Promise((resolve, reject) => {
    uni.login({
      success(res) {
        console.log("getCode", res.code);
        resolve(res.code);
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
};

//获取OpenId用于发送消息
const getOpenId = (js_code) => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: `https://api.weixin.qq.com/sns/jscode2session`,
      data: {
        appid: wxappid,
        secret: wxsecret,
        js_code: js_code,
        grant_type: "authorization_code",
      },
      success: (res) => {
        console.log("getOpenId", res.data);
        resolve(res.data.openid);
      },
      fail(err) {
        reject(err);
      },
    });
  });
};

// 获取access_token用于发送消息
const getAccessToken = () => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: "https://api.weixin.qq.com/cgi-bin/token",
      data: {
        appid: wxappid,
        secret: wxsecret,
        grant_type: "client_credential",
      },
      success: (res) => {
        console.log("getAccessToken", res.data);
        resolve(res.data.access_token);
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
};
相关推荐
梦梦代码精5 小时前
《全栈开源智能体:终结企业AI拼图时代》
人工智能·后端·深度学习·小程序·前端框架·开源·语音识别
米饭同学i9 小时前
微信小程序实现动态环形进度条组件
前端·微信小程序
Rysxt_11 小时前
uni-app x 教程:下一代跨平台开发框架
uni-app·uni-app x
说私域12 小时前
基于AI智能名片链动2+1模式服务预约小程序的旅拍消费需求激发路径研究
大数据·人工智能·小程序
小白学大数据14 小时前
某程旅行小程序爬虫技术解析与实战案例
爬虫·小程序
小小王app小程序开发14 小时前
家政服务小程序特殊玩法开发全解析:技术实现+架构支撑+合规落地
小程序·架构
游戏开发爱好者814 小时前
2025年iOS应用上架App Store全指南,开发者必看
android·ios·小程序·https·uni-app·iphone·webview
集成显卡15 小时前
CVE检索工具 | 开发一款检索漏洞信息的小程序
网络安全·小程序·uni-app·cve·漏洞信息
luffy545915 小时前
微信小程序实现图片横向滑动的示例
微信小程序·小程序
万岳软件开发小城15 小时前
直播电商系统源码搭建直播带货APP/小程序的完整流程
小程序·php·软件开发·直播带货系统源码·直播电商app开发