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

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

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

相关文章

来自专栏pangguoming

Git可视化教程——Git Gui的使用

在Git简介一文中已经对Git进行了简单的介绍,但是理论知识过于枯燥,加上本人专业知识不够扎实,使得初学者在Git的使用上还是会有很大的困难。虽然我更推荐使用G...

2963
来自专栏iOS 开发杂谈

CornerStone的使用

对于我们程序员来说,不管你是大神,还是小鱼小虾,进入公司之后,都用过源码管理工具,不然你就不是一个合格的程序员,现在各个公司用于源码管理工具通常有下面两种:

3811
来自专栏技术博文

关于微信二次分享,描述变链接的解决方法(一)----文档说明

声明: 本篇博文只是个人工作中的分享总结,仅代表个人观点,虽然解决了不少网友的问题,但同时也引来了一些网友的不满,所以特此声明,当您遇到本博文解决不了的问题,可...

1.3K7
来自专栏知晓程序

开发 | 无需后端编码,10 分钟教你实现一个朋友圈小程序

虽然目标功能的业务逻辑并不复杂,但其背后需要一套靠谱的权限控制系统,也意味着需要一个完整的后端服务系统来支持运行。

1994
来自专栏酷玩时刻

IDE中显示 *.properties 为中文

之前做过几个开源项目(极速开发微信公众号weixin_guide以及IJPay 让支付触手可及),Demo中有涉及到一些配置文件。有些同学下载了之后反馈说有乱码...

1102
来自专栏24K纯开源

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

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

2855
来自专栏数据和云

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

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

4135
来自专栏魏艾斯博客www.vpsss.net

网站目录/绝对路径/相对路径-零基础搭建wordpress教程

网站基本知识包括很多方面,网站结构、网页路径、域名、服务器、建站等等,我们已经写过域名和新手如何选择服务器了,正好最近遇到群友对网站基本知识有些疑问,魏艾斯博客...

4671
来自专栏嵌入式程序猿

【速来围观】IAR环境下代码覆盖率功能的使用

在设计测试程序,验证是否所有的代码都被执行到时,就要考虑到代码覆盖率,IAR环境下的代码覆盖率是一个在这方面很有用的功能,且使用方便,今天我们就来讲讲这一功能如...

4266
来自专栏前端杂货铺

XSS分析及预防

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

3597

扫码关注云+社区

领取腾讯云代金券