微信小程序模板消息推送的两种实现方式


Posted in Javascript onAugust 27, 2019

最近在做微信小程序,为了让用户能更加方便的获取到小程序内部的通知,便想着用模板消息来解决此类问题。首先介绍一下两种方法

第一种是传统的按照微信开发文档来实现模板消息的获取,首先要明确的是你要有一个第三方的服务器,因为微信现在规定在小程序内部不能直接请求微信的服务器,而是要请求第三方服务器,由第三方服务器来请求微信的服务器

1.传统方式实现模板消息

1.1获取用户openId

这一步可以在wx.login方法内获取,用来标注模板消息的接受者

1.2获取模板ID

有两个方法可以获取模版ID

通过模版消息管理接口获取模版ID(在微信公众平台手动配置获取模版ID登录https://mp.weixin.qq.com 获取模板,如果没有合适的模板,可以申请添加新模板,审核通过后可使用

1.3获取access_token

access_token 是全局唯一接口调用凭据,开发者调用各接口时都需使用 access_token,请妥善保存。access_token 的存储至少要保留512个字符空间。access_token 的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的 access_token 失效。

公众平台的 API 调用所需的 access_token 的使用及生成方式说明:

  • 为了保密 appsecrect,第三方需要一个 access_token 获取和刷新的中控服务器。而其他业务逻辑服务器所使用的 access_token 均来自于该中控服务器,不应该各自去刷新,否则会造成 access_token 覆盖而影响业务;
  • 目前 access_token 的有效期通过返回的 expires_in 来传达,目前是7200秒之内的值。中控服务器需要根据这个有效时间提前去刷新新 access_token。在刷新过程中,中控服务器对外输出的依然是老 access_token,此时公众平台后台会保证在刷新短时间内,新老 access_token 都可用,这保证了第三方业务的平滑过渡;
  • access_token 的有效时间可能会在未来有调整,所以中控服务器不仅需要内部定时主动刷新,还需要提供被动刷新 access_token 的接口,这样便于业务服务器在 API 调用获知 access_token 已超时的情况下,可以触发 access_token 的刷新流程。

开发者可以使用 AppID 和 AppSecret 调用本接口来获取 access_token。AppID 和 AppSecret 可登录微信公众平台官网-设置-开发设置中获得(需要已经绑定成为开发者,且帐号没有异常状态)。AppSecret 生成后请自行保存,因为在公众平台每次生成查看都会导致 AppSecret 被重置。注意调用所有微信接口时均需使用 https 协议。如果第三方不使用中控服务器,而是选择各个业务逻辑点各自去刷新 access_token,那么就可能会产生冲突,导致服务不稳定。

以上内容是微信开发文档给出的access_token的说明,总的来说就是两点,(1)access_token是发送模板消息的凭证,需要用微信小程序的AppID 和AppSecret 调用接口来获取,有效时间为2小时,(2)如果在此获取access_token则会导致前一个access_token失效,有多个公众号和小程序的开发者一定要注意这一点!

接口地址:

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

HTTP请求方式:

GET

参数说明 :

参数 必填 说明
grant_type 获取 access_token 填写 client_credential
appid 第三方用户唯一凭证
secret 第三方用户唯一凭证密钥,即appsecret

代码:

function onRequest(request, response, modules) {
var http = modules.oHttp;
//发起Get请求
http('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=XXX&secret=XXX', function (error, res, body) {
    response.send(body);
});
}

返回结果:

Response Body
        {
        "code": 200,
        "msg":
        {"access_token":"6_R8kOFxRLeRtWOq_haIU29XB0hbAoKxFGRqQTZt_HhzCSEvT_xDJ4WLgf9A_dt2pRTCugfUk7IkxR2sfu5zckCwKKWEghCtqlrrQlhdJmCxmkBAaDEdW7AU98D23rUJO5PYruNYOLQ3cpH3iAVTNiADAECW","expires_in":7200}
        }

1.4发送模板消息

接口地址:(ACCESS_TOKEN 需换成上文获取到的 access_token)

https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=ACCESS_TOKEN

HTTP请求方式:

POST

POST参数说明:

参数 必填 说明
touser 接收者(用户)的 openid
template_id 所需下发的模板消息的id
page 点击模板卡片后的跳转页面,仅限本小程序内的页面。支持带参数,(示例index?foo=bar)。该字段不填则模板无跳转。
form_id 表单提交场景下,为 submit 事件带上的 formId;支付场景下,为本次支付的 prepay_id
data 模板内容,不填则下发空模板
color 模板内容字体的颜色,不填默认黑色
emphasis_keyword 模板需要放大的关键词,不填则默认无放大

formid说明:页面的 <form/> 组件,属性report-submittrue时,可以声明为需发模板消息,此时点击按钮提交表单可以获取formId代码:

var temp = {
"touser": touser,//用户的openid
"template_id": template_id,//模板id
"page": "",
"form_id": formid,//表单id
"data": {
"keyword1": {
"value": title,
"color": "#173177"
},
"keyword2": {
"value": gettime()
},
},
"emphasis_keyword": "keyword1.DATA" //将keyword1放大
}

1.5测试效果

微信小程序模板消息推送的两种实现方式

2.基于Bmob后端云的模板消息实现

第一种方法实现起来过于繁琐,在使用过程中也要中间服务器的帮助,如果没有中间服务器,或者服务器端的代码不太熟悉,那么Bmob后端云则可以帮助你实现你要的功能

只需要下载按照官网文档在小程序内初始化好Bmob,那么就可以调用Bmob模板消息的方法,如下所示

function send(title, formid, touser){
 var Bmob = require('bmob.js');
 var temp = {
 "touser": touser,
 "template_id": "ClYq9lc8bZh26uM993NNIknasAVBdk0wSYnDrkClK40",
 "page": "",
 "form_id": formid,
 "data": {
  "keyword1": {
  "value": title,
  "color": "#173177"
  },
  "keyword2": {
  "value": gettime()
  },
 
 },
 "emphasis_keyword": "keyword1.DATA"
 }
 
 Bmob.sendMessage(temp).then(function (obj) {
 console.log('发送成功');
 },
 function (err) {
  common.showTip('失败' + err)
 });
}

这样模板消息就解决了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
js实现二级导航功能
Mar 03 Javascript
js实现3D图片展示效果
Mar 09 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 #Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 #Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 #Javascript
vue使用codemirror的两种用法
Aug 27 #Javascript
微信小程序中为什么使用var that=this
Aug 27 #Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 #Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 #Javascript
You might like
解析php多线程下载远程多个文件
2013/06/25 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
require.js中的define函数详解
2017/07/10 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
python类继承用法实例分析
2014/10/10 Python
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
美术师范毕业生自荐信
2013/11/16 职场文书
服务员岗位责任制
2014/02/11 职场文书
年度考核自我鉴定
2014/03/19 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
颐和园导游词
2015/01/30 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL