老哥,你的订单到了(前后端微信小程序订阅消息推送)

本文相关代码地址:github 原文链接: 原文链接

小程序消息推送种类

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

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

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

  • 小程序appid

  • 小程序密钥

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

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

小程序端

  • 开发前需要获取小程序设置模板 ID,没有设置模板消息时可以添加新的模板 https://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_tokenopenid,所以我们先要获取这两个参数

获取流程

流程

获取小程序客服端传参 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);
				}
			}
		);
	});
}

推送消息

我们获取到 openidaccess_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更新

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

  • 一次性订阅
  • 长期订阅

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

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


欢迎关注公众号,大家一起共同交流和进步。

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
《java面经-百度准入职老哥整理.pdf》是一份关于百度准入职面试的Java面经整理。这份面经是由百度准入职的老哥整理而成,其中记录了一些面试时可能会遇到的问题以及解答方法。 这份面经对于准备参加百度准入职面试的人来说非常有价值。首先,它列出了一些常见的面试问题,涵盖了Java语言的各个方面,包括基础知识、数据结构与算法、设计模式、多线程、网络编程等等。通过仔细研究和复习这些问题的答案,可以帮助面试者全面了解Java语言的特性和应用。 其次,这份面经还提供了问题的解答思路和方法,帮助面试者理清思路,正确回答问题。这对于很多面试者来说特别有帮助,因为在面试时有时会遇到一些棘手的问题,有了这份面经的指导,面试者可以更好地掌握应对策略。 不过需要注意的是,面经作为一份参考资料,不能完全依赖于它来准备面试。面试官可能会问一些不在面经中列出的问题,因此考生还是需要自己对Java语言有充分的了解,并能够熟练运用。同时,面试官还会关注考生的沟通能力、解决问题的能力以及对新技术的学习和掌握能力。 总体来说,《java面经-百度准入职老哥整理.pdf》是一份非常宝贵的资料,可以帮助面试者对Java面试中可能会遇到的问题有更深入的了解,提供了解答思路和方法。但记住,面试准备还需要多方面的知识积累和实践经验的积累,才能在面试中展现自己的优势。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值