您当前的位置:首页 > 手机百科 > 微信

前后端微信小程序订阅消息推送

时间:2020-03-30 13:57:40  来源:  作者:

 

 

小程序消息推送种类

  • 订阅消息
  • 模板消息
  • 统一服务消息
  • 客服消息

由于模板消息已经下线,这里的示例消息是订阅消息

实现订阅消息我们开始需要知道几个小程序的参数值

  • 小程序Appid
  • 小程序密钥
  • 小程序订阅模板 id (template_id)

以上参数都可以在小程序管理后台上找到

小程序端

  • 开发前需要获取小程序设置模板 ID,没有设置模板消息时可以添加新的模板 mp.weixin.qq.com
  • 拥有模板 ID 后,需要获取到下发消息权限

用户下发推送消息权限

在订单或者其它操作完成时,调起客户端小程序订阅消息界面,获取到用户操作结果

// index.wxml
<button bindtap="bindSubscribeMessage"> 获取下发权限 </button>

// index.js
bindSubscribeMessage() {
  wx.requestSubscribeMessage({
    tmplIds: ['tmplIds'],
    success (res) { 
      console.log(res)
      }
  })
}
复制代码

传送用户 code

由于消息推送服务端需要小程序 openid 所以我们需要将通过 wx.login 登录小程序将 code 发送给服务端

bindLogin() {
  /* 1. 获取code 请求开发服务器 
    * 2. 开发服务器通过 code + appid + secret 请求微信服务器获取 openid
    */
  wx.login({
    success: res => {
      if (res.code) {
        const { task } = this.data;
        this.request(Object.assign(task, { code: res.code }));
      }
    }
  });
}
复制代码

服务端

这里由于是自己模拟服务端,使用的 Koa 来实现基本流程,其他后端实现流程应该是一样的

由于推送消息需要小程序 access_token 和 openid,所以我们先要获取这两个参数

获取流程

 

前后端微信小程序订阅消息推送

 

 

获取小程序客服端传参 code

通过客户端发送接口 app/send 拿到参数 code

function getBodyMessage(ctx) {
  const { body } = ctx.request;
  return body;
}
复制代码

获取 openid

通过 code + secret(小程序密钥) + appid 获取 openid

function getOpenId(js_code) {
    return new Promise(resolve => {
    	http(
    		{
    			url: `https://api.weixin.qq.com/sns/jscode2session`,
    			method: 'get',
    			qs: {
    				grant_type: 'authorization_code',
    				js_code,
    				appid: APP.appid,
    				secret: APP.secret
    			},
    			json: true //设置返回的数据为json
    		},
    		(error, response, body) => {
    			if (!error && response.statusCode == 200) {
    				resolve(body);
    			}
    		}
    	);
    });
}
复制代码

获取 access_token

function getAccessToken() {
	return new Promise(resolve => {
		http(
			{
				url: `${WX_API}/token`,
				method: 'get',
				qs: {
					grant_type: 'client_credential', // 注意 type 类型
					appid: APP.appid,
					secret: APP.secret
				},
				json: true //设置返回的数据为json
			},
			(error, response, body) => {
				if (!error && response.statusCode == 200) {
					const { access_token } = body;
					resolve(access_token);
				}
			}
		);
	});
}
复制代码

推送消息

我们获取到 openid 和 access_token 后就可以推送消息给用户了

function sendMessage({ access_token, openid, msg }) {
	const requestData = {
		touser: openid,
    template_id: APP.template_id,
    // 模板消息属性和属性值需要注意内容限制
		data: {
			thing1: {
				value: msg.taskName
			},
			thing10: {
				value: msg.remarks
			},
			thing9: {
				value: msg.className
			}
		}
  };
  console.log(requestData);
	return new Promise((resolve, reject) => {
		http(
			{
			    // 注意 access_token 需要在接口形式传送 
				url: `${WX_API}/message/subscribe/send?access_token=${access_token}`,
				headers: {
					'content-type': 'application/json'
				},
				method: 'post',
				body: requestData, // 需要注意是放在 body 上,而不是 form 上
				json: true // 设置返回的数据为json
			},
			(error, response, body) => {
				if (!error && response.statusCode == 200) {
					resolve(body);
				} else {
					reject();
				}
			}
		);
	});
}
复制代码

这里我们需要注意

  • 下发的消息模板需要注意订阅消息参数值内容限制,需要参考
  • 下发模板消息属性需要注意

 

前后端微信小程序订阅消息推送

 

 

  • 开发模式下,授权一次下发一次消息

 

前后端微信小程序订阅消息推送

 

 

  • 后端启动 npm run dev

实现效果

 

前后端微信小程序订阅消息推送

 

 

2020-03-05更新

小程序模板消息中有两种模板

  • 一次性订阅
  • 长期订阅

这两个模板根据小程序的服务类型来区分,只有部分服务类型:医疗、民生、交通、教育之类的线下服务开放长期订阅模板库选择。

社区有篇帖子详细的说明了一些区别

 

前后端微信小程序订阅消息推送


Tags:微信小程序   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
微信小程序“无障碍急救平台”日前上线,解决听障人士120急救呼叫难题。听障人士在日常生活、工作中常有信息缺失、沟通不良的困难。如果自身或身边人突发急症,则需要依靠他人...【详细内容】
2021-12-15  Tags: 微信小程序  点击:(10)  评论:(0)  加入收藏
现如今卖东西的渠道是越来越多,如今在微信小程序也能开店卖东西了,有的小伙伴想在小程序上卖东西但不知道该怎么做,下面就来讲讲微信小程序如何做店铺,利用微信小程序!但凡得到公...【详细内容】
2021-11-03  Tags: 微信小程序  点击:(32)  评论:(0)  加入收藏
作者:灰灰来源:JS每日一题 一、背景传统的web开发实现登陆功能,一般的做法是输入账号密码、或者输入手机号及短信验证码进行登录服务端校验用户信息通过之后,下发一个代表登录态...【详细内容】
2021-10-29  Tags: 微信小程序  点击:(43)  评论:(0)  加入收藏
一、微信服务号主要偏于服务交互(类似银行,114,提供服务查询),认证前后都是每个月可群发4条消息(不适用于个人)二、微信订阅号主要偏于为用户传达资讯(类似报纸杂志),认证前后都是每天...【详细内容】
2021-10-22  Tags: 微信小程序  点击:(82)  评论:(0)  加入收藏
总结列举微信小程序开放能力清单 硬件能力 蓝牙 NFC读写 连接WIFI设备 开放能力 ...【详细内容】
2021-09-27  Tags: 微信小程序  点击:(60)  评论:(0)  加入收藏
功能说明脱离公众号下的小程序,单独使用功能特点小程序:是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用...【详细内容】
2021-09-27  Tags: 微信小程序  点击:(46)  评论:(0)  加入收藏
微信小程序不愧是智能时代的宝藏发明,不用下载不占内存,点开就能用。今天介绍这7个小程序,个个都拥有超实用的功能,用了就知道有多香! 1.腾讯文档腾讯出品的在线文档编辑器,提供在...【详细内容】
2021-08-27  Tags: 微信小程序  点击:(101)  评论:(0)  加入收藏
微信上有很多好用的小程序,虽然不是很多人知道,但却很强大。这里就来分享8款相见恨晚的微信小程序,可以让手机更好用,还不知道的话,未免有点太可惜了,一起来看看吧。 1、专去水印...【详细内容】
2021-07-28  Tags: 微信小程序  点击:(101)  评论:(0)  加入收藏
微信小程序的出现让手机内存不再高负荷,同时也出现了很多实用的小程序例如以下这么几个。1、文章截图文章截图小程序主要实用功能可以通过截图实现保证精度的情况下进行无缝...【详细内容】
2021-07-14  Tags: 微信小程序  点击:(83)  评论:(0)  加入收藏
微信上有很多小程序,比起app更小巧,使用起来更加方便。这里就来为大家分享7个精心挑选的微信小程序,每一个都让人觉得相见恨晚,能让你的手机更好用。 1、群相册服务专属于一个群...【详细内容】
2021-07-13  Tags: 微信小程序  点击:(124)  评论:(0)  加入收藏
▌简易百科推荐
近日,微信上线“仅传输文件”功能,用户无需登录就可以进行文件传输。目前,该更新仅有Windows版本。首先,用户需要先将电脑版微信更新至最高版本。更新之后,无需登录,下方会出现“...【详细内容】
2021-12-28  闽南网    Tags:微信   点击:(4)  评论:(0)  加入收藏
今天在登录PC版微信的时候,发现了一个新的功能,在界面上多了一个,仅文件传输,出于好奇,我点击了一下。于是发现了一个新的天地。登录页面点击后,出来了一个二维码,微信居然出网页版...【详细内容】
2021-12-27  程序员老王聊科技    Tags:微信网页版   点击:(6)  评论:(0)  加入收藏
现在大家都非常喜欢用微信进行社交。如果微信上有一些重要的聊天记录,我们可以将它保存成文档,这样后续查找也更方便,还能防止丢失。小编带来了具体的介绍,赶紧来看下吧。微信聊...【详细内容】
2021-12-24  IE浏览器中文网     Tags:聊天记录   点击:(15)  评论:(0)  加入收藏
微信开放平台:微信扫码登录功能官方文档: https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html1. 授权流程说明微信OAuth2.0授权登...【详细内容】
2021-12-23  老炮说Java    Tags:微信扫码   点击:(9)  评论:(0)  加入收藏
大家好,欢迎来到大雨静听的生活。你们还在用微信授权登录吗?一个方法关闭微信授权登录,让微信更加安全。有些时候安装不明软件,用微信授权登录可能会影响微信的安全,那么今天就分...【详细内容】
2021-12-23  大雨静听生活    Tags:微信   点击:(8)  评论:(0)  加入收藏
华为手机怎样同时登录3个微信?相信很多人都有2、3个微信号,有家庭号、工作号、同学号等等,所以,我们经常会看到他们身上随身携带了2个或3个手机。如果你的手机是华为手机的话,就...【详细内容】
2021-12-21  码不亭蹄    Tags:微信   点击:(8)  评论:(0)  加入收藏
不管你是社交牛X还是社交自闭,出来工作后,微信列表上的好友数量只会随着工作时间增加而增多。躺在列表里的好友有很多其实并不是“好友”,有的甚至没讲过一句话,不知不觉就加上...【详细内容】
2021-12-17  雷科技    Tags:微信   点击:(17)  评论:(0)  加入收藏
1.首先打开微信-支付页面 2.点击进入 城市服务 3.点击进入 热门服务&mdash;&mdash;的社保综合 4.点击进入 山西城乡居民社保缴纳 5.点击进入 城乡居民医疗保险 6.输入缴费人...【详细内容】
2021-12-16  坚持住    Tags:微信   点击:(12)  评论:(0)  加入收藏
近日,微信虽然没有推出什么新版本,但是却悄悄上线了两项新功能,分别为“每日一看”和“查看名片”。目前,这项功能都属于灰度测试功能,因此只有拥有测试权限的用户可以使用。 至...【详细内容】
2021-12-16  果粉之家    Tags:微信   点击:(8)  评论:(0)  加入收藏
微信设置铃声语音之后,无论是朋友给你开视频还是开语音,你都由之前的“叮叮,叮叮,叮叮叮”的声音变成自己设置的铃声。那我们该如何设置呢?前提条件:你的微信版本最低要8.0.8+,当然...【详细内容】
2021-12-14  蜜蜂攻城狮    Tags:微信语音铃声   点击:(14)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条