微信小程序发送模版消息(事例)

鉴于目前网络上都还找不到小程序下发模板消息的相关资源,在仔细阅读了官方文档今天终于把小程序的模版消息给测通了,接下来介绍在不使用服务器的情况下,前端开发人员在本地怎么测试模板消息的发送。

1、在微信公众平台-小程序的模板中心先申请一个下发消息模板,

模版图

2、根据文档提及的下发模板消息做法分两个步骤:

82064030-1028-44B7-8539-B65CF8F7FFBB.png

1).获取access_token

//获取access_token
  getAccess_token(){
    var that = this;
    var appId = 'wxbd2******51';
    var secret = '3666********012d621261';
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + appId + '&secret=' + secret,
      data: {},
      header: {
        'content-type': 'json'
      },
      success: function (res) {
        console.log("access_token"+res)
        that.setData({
          access_token: res.data.access_token
        })
      },
      fail:function(res){
        console.log("失败"+res)
      }
    })
  },

其中里面的appId,secret是从微信公众平台获取的,(注意:AppSecret的查看需要点击该行后面的“重置”或者“查看”链接。查看后要记起来,不然每次重置,会对上次造成影响)。 2)获取openid

// 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        if (res.code) {
          var code = res.code; //返回code
          var appId = 'wxbd2******51';
        var secret = '3666********012d621261';
          wx.request({
            url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appId + '&secret=' + secret + '&js_code=' + code + '&grant_type=authorization_code',
            data: {},
            header: {
              'content-type': 'json'
            },
            success: function (res) {
              var openid = res.data.openid //返回openid
              that.globalData.openid = openid
            }
          })
        }
      }
    })

获取openid,这里我是在app.js发起请求得到openid在存储到本地上,具体代码如下:【将这段代码放入onLoad生命周期内】

需要的参数都已准备好,接下来就是组装发起下发模版消息请求啦~代码如下 .wxml 代码

 <form bindsubmit='formSubmit' report-submit='true' bindreset='formReset' >
  <view class='btn-area' >
   <input name="input" placeholder='222'/>
   <button form-type='submit' >提交</button>
  </view>
</form>

注意form组件一定要加report-submit属性,否则获取不到formId。

.js 代码

 //提交
  formSubmit(e){
   var that = this;
   var fId = e.detail.formId;
   var fObj = e.detail.value;
   var data = {
     touser: app.globalData.openid,
     template_id: 'YJNCc4ugTPLpPA-6nnNmatxIIQq2o2EyqJmWC82CBNI',//这个是1、申请的模板消息id,  
     page: '/pages/index/index',
     form_id: fId,
     data: {
       "keyword1": {
         "value": fObj,
         "color": "#9b9b9b"
       },
       "keyword2": {
         "value": "我们都是",
         "color": "#9b9b9b"
       }
     },
     color: '#ccc',
     emphasis_keyword: 'keyword1.DATA'
   } 
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + that.data.access_token,
      data: data,
      method: 'POST', 
      success: function (res) {
        console.log(res);
      }
    })
  }

最后编译,输入文本点击提交发起请求,这里只能手机调试,我用开发工具打印出来的formId: "the formId is a mock one"并不是数字串。

微信官方 下发条件说明

  1. 支付 当用户在小程序内完成过支付行为,可允许开发者向用户在7天内推送有限条数的模板消息(1次支付可下发3条,多次支付下发条数独立,互相不影响)
  2. 提交表单 当用户在小程序内发生过提交表单行为且该表单声明为要发模板消息的,开发者需要向用户提供服务时,可允许开发者向用户在7天内推送有限条数的模板消息(1次提交表单可下发1条,多次提交下发条数独立,相互不影响)

有些我自己的遇到的问题: 1.errcode: 40037, errmsg: "invalid template_id(用手机预览测试OK) 2.errcode: 41028, errmsg: "invalid form id(真机测试两次OK) 3.以上的接口都应该为自己的服务器调取,由于自己做的测试,只能自己来操作!

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏跟着阿笨一起玩NET

原创C# 各种通用类集合 终于出炉了,觉得有用尽管拿去吧

已经开源,欢迎 Fork    https://github.com/chrisyanghua/MyHelper.git

2852
来自专栏即时通讯技术

SSE技术详解:一种全新的HTML5服务器推送事件技术

一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询、Comet技术、We...

1174
来自专栏月色的自留地

golang子进程的启动和停止,mac与linux的区别

2115
来自专栏24K纯开源

QT程序在发布的时候应注意的地方

---恢复内容开始---     我们用QT开发好的应用程序,如果要发布到其他计算机上运行怎么办呢?我们在用VC编程时,单独运行编译好的可执行文件时,经常会发现...

2395
来自专栏前端杂货铺

XSS分析及预防

XSS(Cross Site Scripting),又称跨站脚本,XSS的重点不在于跨站点,而是在于脚本的执行。在WEB前端应用日益发展的今天,XSS漏洞尤其容...

3307
来自专栏耕耘实录

使用awk命令批量删除指定范围的账号

版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注明出处,谢谢

653
来自专栏数据小魔方

异步加载的基本逻辑与浏览器抓包一般流程

本篇内容不涉及任何R语言或者Python代码实现,仅从异步加载的逻辑实现过程以及浏览器抓包分析的角度来给大家分享一下个人近期学习爬虫的一些心得。 涉及到的工具有...

3464
来自专栏Hadoop和Spark

用AWS部署一个无服务架构的个人网站

在这篇文章里我想介绍下怎样利用AWS(hjlouyoujuqi360com)部署一个无服务架构的个人网站。这个个人网站将具备以下特点:

2234
来自专栏java一日一条

9 个使用前必须再三小心的 Linux 命令

Linux Shell/terminal 命令非常强大,即使一个简单的命令就可能导致文件夹、文件或者路径文件夹等被删除。

591
来自专栏数据和云

5分钟速成Oracle 12.2 RAC 专家(附ppt下载)

Oracle 12c 在RAC方面提出了很多新的解决方案和特性。这些方案和特性使得Oracle 集群在云和大数据的时代环境下,帮助企业用户上云更具优势。今天我们...

3815

扫码关注云+社区