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);
      },
    });
  });
};
相关推荐
HuYi_code32 分钟前
WeChat 小程序下载文件实现
微信小程序·uni-app
00后程序员张1 小时前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
一匹电信狗2 小时前
【C++】C++风格的类型转换
服务器·开发语言·c++·leetcode·小程序·stl·visual studio
2501_915921432 小时前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q5110082854 小时前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app
李慕婉学姐4 小时前
【开题答辩过程】以《自习室预约微信小程序》为例,不会开题答辩的可以进来看看
微信小程序·小程序
LB21125 小时前
苍穹外卖-购物车 前端修改(小程序主页与购物车模块显示不一致)
小程序
peachSoda75 小时前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序
ღ᭄ꦿ࿐Never say never꧂6 小时前
微信小程序 Button 组件 open-type 完全指南:从用户信息获取到客服分享的实战应用
spring boot·微信小程序·小程序·uni-app·vue3
你真的可爱呀8 小时前
uniapp学习【路由跳转 +数据请求+本地存储+常用组件】
前端·学习·uni-app