微信小程序实现发送模板消息功能示例【通过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 相关文章推荐
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 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绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
PHP答题类应用接口实例
2015/02/09 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
Python实现从url中提取域名的几种方法
2014/09/26 Python
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
公司业务主管岗位职责
2013/12/07 职场文书
实习教师自我鉴定
2013/12/12 职场文书
大学自主招生自荐信
2013/12/16 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
大学军训决心书
2015/02/05 职场文书
教师节寄语2015
2015/03/23 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
2015团员个人年度总结
2015/11/24 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python