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


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 相关文章推荐
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
js中开关变量使用实例
Feb 24 Javascript
layui导航栏实现代码
May 19 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
javascript 缓冲运动框架的实现
Sep 29 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
js实现AI五子棋人机大战
May 28 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
php判断两个浮点数是否相等的方法
2015/03/14 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
pycharm修改file type方式
2019/11/19 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
电台实习生求职信
2014/02/25 职场文书
学生自我评语大全
2014/04/18 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
社会工作专业求职信
2014/07/15 职场文书
教师节大会主持词
2015/07/06 职场文书
个人售房合同协议书
2016/03/21 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书