微信小程序发送模版消息（事例）

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

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.以上的接口都应该为自己的服务器调取，由于自己做的测试，只能自己来操作！