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

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

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

相关文章

来自专栏纯洁的微笑

springcloud(九):配置中心和消息总线

我们在springcloud(七):配置中心svn示例和refresh中讲到,如果需要客户端获取到最新的配置信息需要执行 refresh,我们可以利用webho...

35312
来自专栏Spark生态圈

自动化管理工具Rundeck

Rundeck(http://rundeck.org)是开源软件,可以帮助你自动化管理日常操作程序,Rundeck提供了许多特性,将缓解耗时的繁重任务。Rund...

872
来自专栏云计算教程系列

如何在Ubuntu 16.04上使用Distillery和edeliver自动化Elixir-Phoenix部署

Elixir构建于Erlang编程语言之上,是一种功能性编程语言,因其专注于开发人员的工作效率以及因为编写高度并发和可伸缩的应用程序而易于使用而闻名。

740
来自专栏木头编程 - moTzxx

ThinkPHP 5.1自定义404界面的配置

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1012
来自专栏张戈的专栏

WP Super Cache静态缓存插件纯代码版(兼容多域名网站)

中午,小熊发来一篇来自歧路亡羊博客的精彩教程:《wordpress 利用代码来实现缓存》。粗略看了一下,发现这个代码在几个月之前我就用过,不过由于此代码无法区分...

3957
来自专栏王小雷

实例解析Docker数据卷+数据卷容器+flocker数据共享+DockerHub操作

Docker内部数据管理和Docker之间的数据共享为数据卷和数据卷容器,实例解析1.将本地的文件作为容器的数据卷,2.数据卷flocker插件实现容器集群(或...

3016
来自专栏小俊博客

DNSmasq详细解析及详细配置

Dnsmasq 提供 DNS 缓存和 DHCP 服务功能。作为域名解析服务器(DNS),dnsmasq可以通过缓存 DNS 请求来提高对访问过的网址的连接速度。...

1.1K2
来自专栏Laoqi's Linux运维专列

Jenkins发布php代码

1863
来自专栏康怀帅的专栏

DHCP 服务器配置

DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议,使用 UDP 协议工作,给内部网络或...

2915
来自专栏木头编程 - moTzxx

TP5 验证码功能实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

842

扫码关注云+社区