微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】


Posted in Javascript onMay 05, 2019

本文实例讲述了微信小程序实现发送模板消息功能。分享给大家供大家参考,具体如下:

一、获取access_token

access_token是接口调用的凭证,目前有效期为两个小时,需要定时刷新,重复获取将导致上次获取的access_token失效。(注:不建议每次调用需要access_token的接口,都去重新获取access_token,会导致失败)

获取access_token的接口地址:

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

返回参数格式:

{"access_token": "ACCESS_TOKEN", "expires_in": 7200}

二、发送模板消息

先在微信公众平台选用怒需要的模板id,例如

选用模板消息:

https://mp.weixin.qq.com/wxopen/tmplmsg?action=self_list&token=264012870&lang=zh_CN

选用的是购买成功的模板,关键字可以自己定义顺序,如果不符合你的情况,还可以自定义关键字

微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】

选用好了之后,可以在我的模板中查看。然后将其模板id复制过来。

类似于这样 : _CfGS7SqVyNPg9Op8OXzMp6aOl7X9rCkrRfiMcccms8

发送模板的消息接口地址:

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

参数:

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

例如

html

<form bind:submit="testSubmit" report-submit="true">
  <button formType="submit">发送模板消息</button>
 </form>

js

testSubmit:function(e){
 var self= this;
 let _access_token = '5_E1pZJQzTC-lC0r-JJz9wVAZv5Zv22CNtmV_7C1T0sqC9TV7mGE4FTmDX2B0PVM4LaGtaTfXwzfJLnD7fDKTg8DOICJNkKBQgn_Ot2zYmBJyY1g1VXoBNdtwUE0QaP8_9tWlbR-Zq7L1OyrrPKCIjAEAOGM';
 let url='https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token='+_access_token
; let _jsonData = {
  access_token: _access_token,
  touser: openid,
  template_id: '_CfGS7SqVyNPg9Op8OXzMp6aOl7X9rCkrRfiMcccms8',
  form_id: e.detail.formId,
  page: "pages/index/index",
  data: {
  "keyword1": { "value": "测试数据一", "color": "#173177" },
  "keyword2": { "value": "测试数据二", "color": "#173177" },
  "keyword3": { "value": "测试数据三", "color": "#173177" },
  "keyword4": { "value": "测试数据四", "color": "#173177" },
  }
 }
 wx.request({
  url: url,
  data: data,
  method: method,
  success: function (res) {
   console.log(res)
  },
  fail: function (err) {
   console.log('request fail ', err);
  },
  complete: function (res) {
   console.log("request completed!");
  }
 })

结果:

类似于这种

微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
JavaScript 继承详解(二)
Jul 13 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
js中switch case循环实例代码
Dec 30 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 Javascript
浅谈Node 异步IO和事件循环
May 05 #Javascript
vue的列表交错过渡实现代码示例
May 05 #Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 #Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 #Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 #Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 #Javascript
小程序关于请求同步的总结
May 05 #Javascript
You might like
个人站长制做网页常用的php代码
2007/03/03 PHP
PHP6 先修班 JSON实例代码
2008/08/23 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
Flask数据库迁移简单介绍
2017/10/24 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
简单分析python的类变量、实例变量
2019/08/23 Python
python操作toml文件的示例代码
2020/11/27 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
法律专业应届本科毕业生求职信
2013/10/25 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
《大海那边》教学反思
2014/04/09 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
运动员获奖感言
2014/08/15 职场文书
普通话演讲稿
2014/09/03 职场文书
四大名著读书笔记
2015/06/25 职场文书