专栏首页搞前端的李蚊子微信小程序模板消息详解

微信小程序模板消息详解

先放代码

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 条评论
登录 后参与评论

相关文章

  • Vue引发的getter和setter

    看着文档研究了一下vue的双向数据绑定,打印出Vue实例下的data对象里的属性时,发现了一个有趣的事情: ? 它的每个属性都有两个相对应的get和set方法,...

    李文杨
  • 基于Vue.js的大型报告页项目实现过程及问题总结(二)

    距离上一篇文章过去了二十多天了,期间一直想把第二部分写完,结果在测试过程中遇到了各种坑爹的问题,到今天才算基本完成,也许还有后续,但趁着今天有时间就写出来吧,也...

    李文杨
  • 使用箭头函数的几个注意事项

    刚才写一个需要递归操作的函数,在使用arguments.callee的时候,报错undefined,因为arguments.callee在严格模式下会失效,以为...

    李文杨
  • koa框架生成微信公众号二维码

    demo的github地址:https://github.com/xuedingmiaojun/koa-demo.git

    薛定喵君
  • 微信小程序发送模版消息(事例)

    honey缘木鱼
  • 谈谈基于Kerberos的Windows Network Authentication[上篇]

    Content: 基本原理 引入Key Distribution: KServer-Client从何而来 引入Authenticator : 为有效的证明自己提...

    蒋金楠
  • 轻松理解 Kerbreos 的认证过程

    前几天在给人解释 Windows 是如何通过 Kerberos 进行 Authentication 的时候,讲了半天也别把那位老兄讲明白,还差点把自己给绕进去。

    信安之路
  • 微信小程序云存储秘籍

    很长时间没写过文章了,前段时间参加了腾讯云物联网的一个应用创新比赛获得了个二等奖,真感谢腾讯云同学和其他大牛的支持及帮助。经过这次比赛发现物联网控制跟微信小程序...

    谭广健
  • HDU 1272 小希的迷宫(并查集判断有无成环)

    这是一道判断有没有成环的并查集的题,就是每两个点要有唯一的路可到达。不太懂并查集的可以看一下这篇博客传送门。

    Ch_Zaqdt
  • Java微信公众平台开发(六)--微信开发中的token获取

    引用:access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token。开发者需要进行妥善保存。access_token的存储...

    用户2417870

扫码关注云+社区

领取腾讯云代金券