首先登陆微信公众平台  找自己的模板消息设置， 设置自己想要的模板消息，拿到模板消息ID，再准备好自己小程序的appid,小程序秘钥。这三个都准备好了以后直接看代码。

js:
Page({

      data: {
            openid:"",
            session_key:"",
            access_token:"",
      },
      
      onLoad: function (options) {
            var that = this
            //第一步获取openid
            wx.login({
                  success: function (data) {
                        console.log(data.code, data) 
                        console.log("12345");
                        wx.request({
                              url: \'https://api.weixin.qq.com/sns/jscode2session\',
                              data:{
                                    appid: "你的appid",
                                    secret: "小程序秘钥",
                                    js_code: data.code//wx.login获取到的code
                              },
                              method: "post",
                              header: {
                                    "Content-Type": "application/x-www-form-urlencoded"
                              },
                              success: function (res) {
                                    console.log(res);
                                    that.setData({
                                          openid: res.data.openid,
                                          session_key: res.data.session_key,
                                    })
                              }
                        })
                  }
            })
            //第二步  获取access_token
            wx.request({
                  url: \'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的appid&secret=你的小程序秘钥\',
                  method: "GET",
                  success: function (res) {
                      
                        console.log("xxx");
                        console.log(res);
                        that.setData({
                              access_token: res.data.access_token,//获取到的access_token
                        })
                  }
            })
      },
      form: function (e) {
            console.log(e);
            var that = this;
            var fId = e.detail.formId; // 网络请求    
            var l = \'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=\' + that.data.access_token; 
            var d = {
                  touser: that.data.openid, //用户的openid      
                  template_id: \'模板消息ID\',
                  page: \'/pages/index/index\',
                  form_id: fId,
                  data: {           //模板消息要对应 有几个写几个  避免为空模板
                        "keyword1": {
                              "value": "酒店",
                              "color": "#4a4a4a"
                        },
                        "keyword2": {
                              "value": "2018-03-22",
                              "color": "#9b9b9b",
                        },
                        "keyword3": {
                              "value": "$300",
                              "color": "#9b9b9b"
                        },
                        "keyword4": {
                              "value": "中国",
                              "color": "#9b9b9b"
                        },
                  },
                  color: \'#ccc\',
                  emphasis_keyword: \'keyword1.DATA\'
            }
            wx.request({
                  url: l,
                  data: JSON.stringify(d),
                  method: \'POST\',
                  success: function (res) {
                        console.log(res);
                  },
                  fail: function (err) {
                        console.log(err);
                  }
            });
      },
})

 以上是js

下面是wxml

其中有一个formid需要注意下，想要发送模板消息必须借助formid 或者payid 

formid 有返回值  如果返回一串英文，那是因为你没有在真机调试，不会有formid返回给你，微信官方文档有关于formid的返回值

原因，在这我都不一 一解释了。

wxml


<form bindsubmit="form" report-submit=\'true\' >
<button form-type="submit" class=\'xx\'>
<text>123</text>
</button>
</form>

当到最后要成功时，你可能还会遇到坑，js中form方法最后请求微信官方服务器，success回调会有一个errorcode，这个errorcode有各种各样的返回值，这是我看了几种

还有一种是errorcode为0，原因可能是由于发送请求时没有设置UT8编码导致的,需设置编码，但是我将发送的data转了下json格式，应该不会出现什么问题，我的也返回了errorcode 为0  但是，模板消息发送成功了  收到了微信服务通知。

效果如下