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);
      },
    });
  });
};
相关推荐
weixin_lynhgworld8 小时前
盲盒抽卡机小程序系统开发:连接线上线下娱乐新桥梁
小程序·娱乐
程知农8 小时前
uniapp_微信小程序_根据胶囊按钮计算出的导航栏高度为什么不是44px?
微信小程序·小程序·uni-app
鲲鹏猿11 小时前
微信小程序——早餐小程序
微信小程序·小程序
说私域11 小时前
基于开源AI智能名片链动2+1模式与S2B2C商城小程序的微商品牌规范化运营研究
人工智能·小程序·开源
2501_9159090611 小时前
iOS 加固工具实战解析,主流平台审核机制与工具应对策略
android·ios·小程序·https·uni-app·iphone·webview
The_era_achievs_hero11 小时前
UniappDay04
vue.js·微信小程序·uni-app
2501_9151063214 小时前
iOS WebView 调试实战,第三方脚本加载失败与内容安全策略冲突问题排查指南
android·ios·小程序·https·uni-app·iphone·webview
paopaokaka_luck18 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
前端程序猿-秦祥18 小时前
uniapp拦截返回事件
uni-app
雪芽蓝域zzs1 天前
uniapp input 如何只读禁用输入可点击
uni-app