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);
      },
    });
  });
};
相关推荐
千寻技术帮2 小时前
50022_基于微信小程序同城维修系统
java·mysql·微信小程序·小程序·同城维修
说私域6 小时前
“开源AI智能名片链动2+1模式S2B2C商城小程序”在县级市场的应用与挑战分析
人工智能·小程序·开源
anyup6 小时前
支持鸿蒙!开源三个月,uView Pro 开源库近期更新全面大盘点,及未来计划
前端·vue.js·uni-app
千寻技术帮7 小时前
50024_基于微信小程序的食品购商城
小程序·源码·项目·文档·ppt
阿斌_bingyu7099 小时前
uniapp实现android/IOS消息推送
android·ios·uni-app
说私域13 小时前
定制开发AI智能名片S2B2C预约服务小程序的定制开发与优势分析
大数据·人工智能·小程序
茶憶13 小时前
UniApp RenderJS中集成 Leaflet地图,突破APP跨端开发限制
javascript·vue.js·uni-app
云起SAAS1 天前
名字姓名起名打分评分抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·名字姓名起名打分评分
说私域1 天前
从裂变能力竞争到技术水平竞争:开源AI智能名片链动2+1模式S2B2C商城小程序对微商企业竞争格局的重塑
人工智能·小程序·开源
开发加微信:hedian1161 天前
短剧小程序开发全攻略:技术选型与实现思路
微信·小程序·架构·aigc·交互