微信小程序模板消息详解

先放代码

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

相关文章

来自专栏冷冷

【maven学习】划分模块

所有用Maven管理的真实的项目都应该是分模块的,每个模块都对应着一个pom.xml。它们之间通过继承和聚合(也称作多模块,multi-module)相互关联。...

1898
来自专栏逸鹏说道

如何在UWP中统一处理不同设备间的页面回退逻辑

在本篇缪文中,楼主打算给UWP开发的初学者讲述一个在开发中经常遇到的很现实的问题:页面回退逻辑 。 众所周知,UWP的应用程序理论上是可以运行在W...

3338
来自专栏散尽浮华

统计代码行数的方法梳理

在日常运维工作中,会碰到对一项项目下的代码行数进行统计的需求,下面对代码行数的统计方法进行梳理,以供参考。 1)最简单的是使用wc -l直接进行代码行数统计。(...

1977
来自专栏DeveWork

【译】WordPress 中的50个过滤器(3):第11-20个过滤器

本文为系列第三篇,原文:50 Filters of WordPress: Filters 11-20 原文地址 不多说,直接进入正题。 本系列文章翻译自tut...

1926
来自专栏BestSDK

.NET程序员必备的58个提高效率工具

1. Visual Studio Visual Studio Productivity Power tool:Visual Studio 专业版(及以上)的扩展...

3256
来自专栏Seebug漏洞平台

TP-LINK WR941N路由器研究

是TP-Link WR940N后台的RCE, 手头上正好有一个TP-Link WR941N的设备,发现也存在相同的问题,但是CVE-2017-13772文章中给...

3778
来自专栏FreeBuf

有工具了,如何快速发现Windows中毒(含工具下载)

本文是之前《没有外部工具,如何快速发现Windows中毒了》的姊妹篇,探讨Windows电脑感染多种典型病毒后,在没有专业杀毒软件情况下的快速检测方法。 Pro...

1789
来自专栏Golang语言社区

Go语言开发Windows应用

当第一次看到Go程序在windows平台生成可执行的exe文件,就宣告了windows应用也一定是Go语言的战场。Go不是脚本语言,但却有着脚本语言的轻便简单的...

3296
来自专栏编程思想之路

Android源码编译出错No rule to make...

在领导出差项目量产的节骨眼上,公司服务器出问题了,具体是硬盘问题,于是就派我这个刚入行半年的来重装ubuntu系统然后搭建服务器,好不容易在别人的指导下搭建起来...

2217
来自专栏向治洪

React Native网络请求

很多移动应用都需要从远程地址中获取数据或资源。你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容—...

22211

扫描关注云+社区