vue 微信公众号定时发送模版消息

目录

      • 第一步:公众号设置 网页授权
      • 第二步:引导用户去授权页面并获取code
      • 第三步:通过code换取网页授权access_token&openid
      • 第四步:后端处理绑定用户和发送消息

相关文档链接:
1、微信开发文档
2、订阅号/服务号/企业号区别
3、模版消息接口

1、根据文档说明 要想使用【发送消息-模板消息接口(发送业务通知)】 只能是【微信认证的服务号】;
2、因为发送模版消息需要拿到用户的 openid,所以需要一个前端交互(网页授权文档)来拿到。

第一步:公众号设置 网页授权

公众号设置=》功能设置=》网页授权域名 (这里设置的是当用户同意授权后的回调页面,这个页面需事先经过微信验证)
在这里插入图片描述
在这里插入图片描述

第二步:引导用户去授权页面并获取code

1、授权页面路径:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

2、实际例子:

   let param = {
      appid: '',// 公众号的唯一标识
      redirect_uri: encodeURIComponent("https://xxx.com"),//授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理
      response_type: 'code',//返回类型,请填写code
      scope: 'snsapi_base',//应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )
      state: 'xx', //重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节
      forcePopup:false,//强制此次授权需要用户弹窗确认;默认为false;需要注意的是,若用户命中了特殊场景下的静默授权逻辑,则此参数不生效
    }
    let cur = 'https://open.weixin.qq.com/connect/oauth2/authorize'
    let url = `${cur}?appid=${param.appid}&redirect_uri=${param.redirect_uri}&response_type=${param.response_type}&scope=${param.scope}&state=${param.state}#wechat_redirect`
    window.location.href = url;

第三步:通过code换取网页授权access_token&openid

  created () {
    let href = window.location.href;
    let url = href && href.split('?')[1]
    let urlArray = url && url.split('&')
    let params = {}
    if (urlArray && urlArray.length) {
      urlArray.forEach(item => {
        let paramsKey = item.split('=')[0]
        let paramsValue = item.split('=')[1]
        params[paramsKey] = paramsValue
      });
    }
    console.log(params.code)
    // 拿到回调路径上的code,回调路径上还有state
    this.formData.code = params.code
  },
    methods: {
    onVerify () {
		// 请求后端接口根据code 获取access_token&openid
		// https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
		{
		  "access_token":"ACCESS_TOKEN",
		  "expires_in":7200,
		  "refresh_token":"REFRESH_TOKEN",
		  "openid":"OPENID",
		  "scope":"SCOPE",
		  "is_snapshotuser": 1,
		  "unionid": "UNIONID"
		}
    }
  },

第四步:后端处理绑定用户和发送消息

1、openid跟用户进行绑定
2、使用消息模版和定时任务给用户发送消息
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/656439.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Hadoop伪分布式搭建

1 配置SSH免密登录 1.生成密钥 # ssh-keygen -t rsa 注意:需要经过4次回车 查看密钥及公钥 # cd /root/.ssh 拷贝公钥 # cp id_rsa.pub authorized_keys 2 测试本地免密登录 2 下载Hadoop安装包 使用wget命令从华为云上下载Hadoop安装文件 # wget -P /opt https://m…

Py列表(list)

目录 正向索引: 反向索引: 嵌套列表: 修改列表中的值 列表常用的方法 实例 练习: 正向索引: 从0开始,依次递增。第一个元素的索引为0,第二个元素的索引为1,依此类推。 列表的下标…

Kubernetes集群调度

一.List-Watch 1.调度约束 Kubernetes 是通过 List-Watch **** 的机制进行每个组件的协作,保持数据同步的,每个组件之间的设计实现了解耦。 用户是通过 kubectl 根据配置文件,向 APIServer 发送命令,在 Node 节点上面建立 P…

Let‘s Encrypt 免费证书申请

填写邮箱,申请的域名 单域名:www.example.com 泛域名: *.example.com yum -y install certbot sudo certbot certonly --server https://acme-v02.api.letsencrypt.org/directory --manual --preferred-challenges dns --email xxexample…

Golang | Leetcode Golang题解之第102题二叉树的层序遍历

题目&#xff1a; 题解&#xff1a; func levelOrder(root *TreeNode) [][]int {ret : [][]int{}if root nil {return ret}q : []*TreeNode{root}for i : 0; len(q) > 0; i {ret append(ret, []int{})p : []*TreeNode{}for j : 0; j < len(q); j {node : q[j]ret[i] …

如何选择序列化协议:关键因素与场景分析

如何选择序列化协议&#xff1a;关键因素与场景分析 序列化协议的选择直接影响着系统的性能、可维护性及跨平台兼容性。以下是针对不同场景下&#xff0c;几种常见序列化协议的选择建议&#xff1a; 1. 公司间系统调用&#xff08;性能要求宽松&#xff09; SOAP (基于XML)&a…

vue深度选择器(:deep​)

处于 scoped 样式中的选择器如果想要做更“深度”的选择&#xff0c;也即&#xff1a;影响到子组件&#xff0c;可以使用 :deep() 这个伪类&#xff1a; <style lang"scss" scoped> .evaluation-situation-details :deep .cl-icon-arrow-right {display: none…

C语言学习笔记--C语言的实型数据

实型常量的表示方法&#xff08;掌握&#xff09; 实型也称为浮点型。实型常量也称为实数或者浮点数。在C语言中&#xff0c;实数只采用十进制。它有两种形式&#xff1a;十进制小数形式&#xff0c;指数形式。 1十进制数形式&#xff1a;由数码0~9和小数点组成。 例如&…

VSCODE中F12无法跳转,快捷键设置F12和insert混淆了

异常现象 最近用新电脑&#xff08;华为&#xff09;的时候&#xff0c;发现VSCODE经常按F12无法跳转&#xff0c;在快捷键设置当中&#xff0c;也是设置成功的&#xff1b; 此时重新去快捷键设置&#xff0c;会发现按 F12变为了Insert 解决方法 华为笔记本的Fx按键&#x…

淘宝扭蛋机小程序开发:探索无限惊喜的购物新体验

随着科技的不断进步&#xff0c;人们的生活方式也在发生翻天覆地的变化。在这个数字化、智能化的时代&#xff0c;淘宝扭蛋机小程序应运而生&#xff0c;为消费者带来了一种全新的购物体验。 淘宝扭蛋机小程序是一款集娱乐、互动、购物于一体的创新应用。它巧妙地将扭蛋机的乐…

FL Studio v21.2.3.4004中文破解版百度网盘下载

FL Studio v21.2.3.4004中文破解版是一款完整的软件音乐制作环境或数字音频工作站 (DAW)。代表了超过 18 年的创新发展&#xff0c;它在一个软件包中提供了您创作、编曲、录制、编辑、混音和掌握专业品质音乐所需的一切。FL Studio v21.2.3.4004中文破解版现在是世界上最受欢迎…

微信小程序中使用vantUI步骤

第一步&#xff0c;配置project.config.json 在setting中新增如下&#xff1a; "packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./"}], 第…

Java客户端SpringDataRedis(RedisTemplate)上手

文章目录 ⛄概述⛄快速入门❄️❄️导入依赖❄️❄️配置文件❄️❄️测试代码 ⛄数据化序列器⛄StringRedisTemplate⛄RedisTemplate的两种序列化实践方案总结 ⛄概述 SpringData是Spring中数据操作的模块&#xff0c;包含对各种数据库的集成&#xff0c;其中对Redis的集成模…

Vue3实战笔记(35)—集成炫酷的粒子特效

文章目录 前言一、vue3使用tsparticles二、使用步骤总结 前言 学习一个有趣炫酷的玩意开心一下。 tsparticles&#xff0c;可以方便的实现各种粒子特效。支持的语言框架也是相当的丰富. 官网&#xff1a;https://particles.js.org/ 一、vue3使用tsparticles 先来个vue3使用…

《智能水表计量平台技术架构:数字化管理助力节水环保》

随着科技的不断发展&#xff0c;智能水表计量平台作为一种新型的水资源管理工具&#xff0c;正在逐渐受到关注和应用。本文将深入探讨智能水表计量平台的技术架构设计与实现&#xff0c;以及如何通过数字化管理助力节水环保事业。 ### 1. 系统架构概述 智能水表计量平台的技术…

智能高效的IDE GoLand v2024.1全新发布 - 进一步升级AI辅助工具

GoLand 使 Go 代码的阅读、编写和更改变得非常容易。即时错误检测和修复建议&#xff0c;通过一步撤消快速安全重构&#xff0c;智能代码完成&#xff0c;死代码检测和文档提示帮助所有 Go 开发人员&#xff0c;从新手到经验丰富的专业人士&#xff0c;创建快速、高效、和可靠的…

Java入门基础学习笔记48——ArrayList的应用案例

掌握从容器中找出某些数据并成功删除的技巧&#xff1a; 需求&#xff1a; 现在加入购物车中存储了如下这些商品&#xff1a;Java入门&#xff0c;宁夏枸杞&#xff0c;黑枸杞&#xff0c;人字拖&#xff0c;特级枸杞&#xff0c;枸杞子。现在用户不想买枸杞了&#xff0c;选…

java多线程创建方式

1. 继承Thread类 这种方式是通过创建一个新的类继承自Thread类&#xff0c;并覆盖run()方法来创建线程。然后通过创建这个类的对象并调用其start()方法来启动线程。 public class MyThread extends Thread { public void run() { // 在这里定义线程的执行逻辑 …

Scala的简单认识

Scala编程基础 小白的Scala学习笔记 2024/5/21 上午某一时刻 文章目录 Scala编程基础spark是用Scala开发出来的Scala的优点 打开idea 搜索scala&#xff0c;安装 如果不小心点了取消&#xff0c;或者没有上图的提示&#xff0c;就在依赖里面添加 spark是用Scala开发出来的 类比…

VUE3 学习笔记(6):data数据的监听、表单绑定、操作DOM

data数据的监听&#xff08;侦听&#xff09; 对于data的值的监听&#xff0c;可以用watch中与data中的参数命名一致的值做为函数进行获取监听变动前后的值再做逻辑判断&#xff0c;如下图所示。 示例代码 <template><div><p :class"classDemo">{…