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);
      },
    });
  });
};
相关推荐
iOS阿玮5 小时前
苹果卡审情况将逐步缓解,合规的开发者请耐心等待~
uni-app·app·apple
じòぴé南冸じょうげん7 小时前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
2501_916013748 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159184110 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张10 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
微三云-轩11 小时前
区块链:重构企业数字化的信任核心与创新动力
人工智能·小程序·区块链·生活·我店
阿隆_趣编程13 小时前
为了方便相亲,我用AI写了一款小程序
前端·javascript·微信小程序
耶啵奶膘1 天前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹1 天前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
吴传逞1 天前
记一次uniapp+nutui-uniapp搭建项目
uni-app