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

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

一、获取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

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

选用好了之后，可以在我的模板中查看。然后将其模板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!");
  }
 })

结果：

类似于这种

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

赞 (0)

相关推荐

  • 如何在微信小程序里面退出小程序的方法

    如何在微信小程序里面退出小程序的方法

    公司要求用小程序重构已有的微信公众号,于是没接触过小程序的我...好的,直接进入主题. 如何在小程序里面退出小程序. 这个功能基本上都会用到,而文档里面没有找到如微信一样直接的api: WeixinJSBridge.call('closeWindow'); 于是我就各种上网搜,好的,结果告诉我小程序已经出了这个api,但未公开= =||| 那就是说 现在 是没有这个api的(掀桌!),查了又查,是有一个方法,就是利用现有的api自己做一个. 是的,就是用这几个美丽的东西. 首先我们有两个页面,i

  • 详解微信小程序获取当前时间及日期的方法

    详解微信小程序获取当前时间及日期的方法

    获取当前时间 首先,在要获取时间的.js文件中加载util.js文件 然后在onload方法中,调用util.js中的formatTime方法获取当前时间 //获取当前时间 // 调用函数时,传入new Date()参数,返回值是日期和时间 var TIME = util.formatTime(new Date()); this.setData({ time: TIME, }); 这样就获取到了当前时间,但是我们发现在util.js中并没有获取当前日期的方法. 没事,别慌! 这个时候我们去看下u

  • 微信小程序事件对象中e.target和e.currentTarget的区别详解

    在小程序的事件回调触发时,会接收一个事件对象,事件对象的参数中包含一个target和currentTarget属性,接下来说说这二者的区别. 首先上代码: wxml部分: <view id='tar-father' bindtap='click'> 父组件 <view id='tar-children'>子组件</view> </view> wxss部分: #tar-father{ width: 300rpx; height: 300rpx; backgro

  • 微信小程序单选radio及多选checkbox按钮用法示例

    本文实例讲述了微信小程序单选radio及多选checkbox按钮用法.分享给大家供大家参考,具体如下: 1.单选:radio 实例: js: Page({ data : { radioId:"", loves:[ {id:1, name:"跑步" ,checked : 'true'}, {id:2, name:"篮球" }, {id:3, name:"足球" }, ] }, updataRadio:function(e){ v

  • 微信小程序按钮点击跳转页面详解

    微信小程序按钮点击跳转页面详解

    微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', }) 跳转到talkPage界面. 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:fail url "pages/index/talkPage" is not in app.j

  • 微信小程序常见页面跳转操作简单示例

    本文实例讲述了微信小程序常见页面跳转操作.分享给大家供大家参考,具体如下: 1.保留当前页面,跳转到应用内另一个页面:wx.navigateTo({ url: '页面路径', }) 实例: pageSkip :function(){ wx.navigateTo({ url: '/page/admin/details', }) }, 2.关闭当前页面,返回到上一级或多级页面:wx.navigateBack({ url: '页面路径', }) 实例: pageSkip :function(){ wx

  • 简单了解微信小程序 e.target与e.currentTarget的不同

    简单了解微信小程序 e.target与e.currentTarget的不同

    在小程序的点击事件中,我们经常使用这两个属性来传参,看起来效果一样,查了官方文档如下: target:事件源组件对象 currentTarget:当前组件对象 什么意思?我刚开始就有点不懂,那就直接上代码: <view id="outter" bindtap="tap1"> outer view <view id="middle" bindtap="tap2"> middle view <view

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

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

    本文实例讲述了微信小程序实现发送模板消息功能.分享给大家供大家参考,具体如下: 一.获取access_token access_token是接口调用的凭证,目前有效期为两个小时,需要定时刷新,重复获取将导致上次获取的access_token失效.(注:不建议每次调用需要access_token的接口,都去重新获取access_token,会导致失败) 获取access_token的接口地址: https://api.weixin.qq.com/cgi-bin/token?grant_type=c

  • 微信小程序实现添加手机联系人功能示例

    微信小程序实现添加手机联系人功能示例

    本文实例讲述了微信小程序实现添加手机联系人功能.分享给大家供大家参考,具体如下: 1.效果展示   2.关键代码 1)WXML文件 <view bindlongtap="phoneNumTap">{{phoneNum}}</view> 2)JS文件 Page({ data:{ phoneNum:'12345678901'//测试用的号码,并非真实号码 }, // 长按号码响应函数 phoneNumTap:function(){ var that=this; //

  • 微信小程序实现的自定义分享功能示例

    本文实例讲述了微信小程序实现的自定义分享功能.分享给大家供大家参考,具体如下: 大家都知道,小程序有分享的功能,可以分享整个程序,也可以自定义分享的内容 onShareAppMessage 在 Page 中定义 onShareAppMessage 函数,设置该页面的分享信息. 只有定义了此事件处理函数,右上角菜单才会显示"分享"按钮 用户点击分享按钮的时候会调用 此事件需要 return 一个 Object,用于自定义分享内容 示例代码: Page({ onShareAppMessag

  • 微信小程序实现的五星评价功能示例

    微信小程序实现的五星评价功能示例

    本文实例讲述了微信小程序实现的五星评价功能.分享给大家供大家参考,具体如下: 实现五星评价功能,效果图如下: .wxml文件: <view class="star-title">1.品质效果</view> <view class="star-pos"> <image class='stars' bindtap="changeColor" data-index='0' data-no="{{ite

  • 微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)

    微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)

    本文实例讲述了微信小程序导航栏滑动定位功能.分享给大家供大家参考,具体如下: 实现的效果 实现的原理 1. 通过对scroll的监听获取滚动条的scrollTop值; 2. 在导航的class判断scrollTop; 3. 切换position:fixed与position:relative. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="f

  • 微信小程序实现的一键拨号功能示例

    微信小程序实现的一键拨号功能示例

    本文实例讲述了微信小程序实现的一键拨号功能.分享给大家供大家参考,具体如下: 1. 在.wxml文件中绑定拨号事件 <button type="default" bindtap="calling">拨打电话</button> 2. 在.js文件中加入逻辑代码 calling: function () { wx.makePhoneCall({ phoneNumber: '***************', success: function (

  • 微信小程序实现的图片保存功能示例

    本文实例讲述了微信小程序实现的图片保存功能.分享给大家供大家参考,具体如下: 微信小程序保存图片分为两步: 1.下载文件资源到本地,客户端直接发起一个 HTTP GET 请求,返回文件的本地临时路径. 即:调用函数wx.downloadFile({}) 2.保存图片到系统相册. 即:调用函数wx.saveImageToPhotosAlbum({}) 具体代码如下: .wxml <button data-image='{{图片路径}}' bindtap="saveImage" &g

  • 微信小程序之发送短信倒计时功能

    微信小程序之发送短信倒计时功能

    点击后 代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="fidpas"> <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号&quo

  • 微信小程序WebSocket实现聊天对话功能

    本文实例为大家分享了微信小程序WebSocket实现聊天对话功能的具体代码,供大家参考,具体内容如下 js var app = getApp(); var socketOpen = false; var frameBuffer_Data, session, SocketTask; var url = 'ws://请填写您的长链接接口地址'; var upload_url ='请填写您的图片上传接口地址' Page({ data: { user_input_text: '',//用户输入文字 in

  • 微信小程序实现即时通信聊天功能的实例代码

    项目背景:小程序中实现实时聊天功能 一.服务器域名配置 配置流程 配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html 二.nginx中配置反向代理加密websocket(wss) upstream websocket{ hash $remote_addr consistent; server 127.0.0.1:9090 weight=5 max_fails=3 fail_timeout=30

随机推荐