微信小程序模板消息详解

先放代码

wxml:

<form name='pushMsgFm' report-submit bindsubmit='orderSign'>  
   <view> 单号: 0</view>
   <view> 商家名称: 腾讯早餐店</view>
    <view>实付金额:66元</view>
    <view>物品名称:包子</view>
    <view>付款金额:68元</view>
    <view>付款时间: 2018年1月1日 </view>
    <button form-type="submit">发送模板消息</button>  
</form>

js:

  Page({
  
    /**
     * 页面的初始数据
     */
    data: {
      openid:"" 
      
         },
    orderSign: function (e) {
      wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”  
        title: '加载中',
        icon: 'loading',
      });
      var fId = e.detail.formId;
      var l = 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + getApp().globalData.token;
      var d = {
        "keyword1": {
          "value": "00273",
          "color": "#4a4a4a"
        },
        "keyword2": {
          "value": "腾讯早餐店",
          "color": "#9b9b9b"
        },
        "keyword3": {
          "value": "66元",
          "color": "#9b9b9b"
        },
        "keyword4": {
          "value": "包子",
          "color": "#9b9b9b"
        },
        "keyword5": {
          "value": "68元",
          "color": "#9b9b9b"
        },
        "keyword6": {
          "value": "2015年01月05日 12:30", 
          "color": "#9b9b9b"
        }
      };
      console.log(d)
      wx.request({
        url: l,
     //注意不要用value代替data
        data: {
          touser: this.data.openid,
          template_id: 'id',//申请的模板消息id,  
          page: '/pages/mes/mes',
          form_id: fId,
          data:d,
          color: '#ccc',
          emphasis_keyword: 'keyword1.DATA'
        },
        method: 'POST',
        success: function (res) {
          wx.hideLoading();
          console.log("发送成功");
          console.log(res);
        },
        fail: function (err) {
          // fail  
          console.log("push err")
          console.log(err);
        }
      });
    },  
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      var that = this;
      wx.login({
        success:(res)=>{
          if(res.code){
            wx.request({
              url: "https://api.weixin.qq.com/sns/jscode2session",
              data:{
                appid: getApp().globalData.appId,//你的appid
                secret: getApp().globalData.secret,//你的secret
                js_code:res.code,
                grant_type:"authorization_code"
              },
              success:(res)=>{
                console.log(res);
                that.setData({
                  openid: res.data.openid //存储openid
                })
              }
            })
          }
        }
      })
    }
  })

再放图

最后放教程

0.页面的 <form/> 组件,属性report-submittrue时,可以声明为需发模板消息,此时点击按钮提交表单可以获取formId,用于发送模板消息。或者当用户完成支付行为,可以获取prepay_id用于发送模板消息。

1.在公众平台申请一个模板,获得模板id

2.获取openid,正常应该是在app.js里将openid和token获取下来存为公共变量调用

onLoad: function (options) {
      var that = this;
      wx.login({
        success:(res)=>{
          if(res.code){
            wx.request({
              url: "https://api.weixin.qq.com/sns/jscode2session",//换openid的接口地址
              data:{
                appid: getApp().globalData.appId,
                secret: getApp().globalData.secret,
                js_code:res.code,
                grant_type:"authorization_code"
              },
              success:(res)=>{
                console.log(res);
                that.setData({
                  openid: res.data.openid//将openid存起来
                })
              }
            })
          }
        }
      })
    }

3.获取token,这里我直接使用微信公众平台接口调试工具【http://mp.weixin.qq.com/debug/】上得到token串,输入你的appid和secret就可以得到token了,注意token是有过期时间的,应当在有效期内测试,access_token 的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的 access_token 失效。假如多处请求需要token的话,最好设置一个公共变量存储,这里我提前把token存储在app.js的globalData里头了。

4.发起模板消息请求

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

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

5.成功

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏游戏杂谈

H5小游戏的坑点小结

1) iOS 9.1 的safari中,在onTouchBegan方法中调用cc.audioEngine.playEffect播放音效是没有效果的,如果在onT...

1301
来自专栏hightopo

基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)

1402
来自专栏理论坞

那些你不知道的Photoshop冷知识④——不安分的Adobe

本来已经打算将 第三期 作为这一系列的完结篇的~但我发现Adobe在这次更新变更了我常用的功能键使用方式(后文详述),于是我查看了PS的更新日志,发现这几次更新...

1043
来自专栏张戈的专栏

百度分享无法抓取图片及摘要的折中解决办法

前天,cy 在《仿异次元百度分享工具条张戈修改版》一文留言告知,部分百度分享无法抓取图片: ? 亲自试了下,发现还真是抓不到图片,而且分享的内容也很单调!就一个...

3889
来自专栏知晓程序

开发 | 如何为你的微信小程序体积瘦身?

众所周知,微信小程序在发布的时候,对提交的代码有 2 MB 大小的限制。所以,如果你正在写一个功能稍微复杂一点的小程序,就必须得时刻小心注意你的代码是不是快触及...

812
来自专栏腾讯Bugly的专栏

【特斯拉组件】iOS高性能PageController

1.组件介绍 Page是企鹅FM研发的分页组件,包括支持分页非交互切换(通过方法调用导航切换)和交互切换(屏幕的手势滑动),多个分页Controller和Vie...

4615
来自专栏HT

基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)

今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 Web...

2307
来自专栏Bug生活2048

微信小程序版博客——授权登录的修改(wx.getUserInfo)

之前的授权登录优化这里看下原来的这篇文章,主要是在需要的时候才弹出用户授权,同时通过wx.openSetting来实现用户拒绝后的二次授权,因为授权获取用户基本...

4742
来自专栏大前端开发

如何为你的微信小程序瘦身?

众所周知,微信小程序在发布的时候,对提交的代码有1M大小的限制!所以,如果你正在写一个功能稍微复杂一点的小程序,就必须得时刻小心注意你的代码是不是快触及这个底线...

885
来自专栏CRPER折腾记

React 折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现

collapsed,onCollapse这些是控制侧边栏缩小的,接受的是外部的props

2843

扫码关注云+社区