First, login wechat public platform to find their own template message Settings, set the template message they want, get the template message ID, and then prepare their own small program appID, small program secret key. All three of these are ready to go straight to the code.

Page({
 
      data: {
            openid:"".session_key:"".access_token:"",},onLoad: function (options) {
            var that = this
            // The first step is to obtain 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: "Your appid".secret: "Small program secret key".js_code: data.code//wx.login Indicates the obtained 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,
                                    })
                              }
                        })
                  }
            })
            // The second step is to obtain access_token
            wx.request({
                  url: 'your appid&secret = https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid= you little program secret key'.method: "GET".success: function (res) {
                      
                        console.log("xxx");
                        console.log(res);
                        that.setData({
                              access_token: res.data.access_token,// Obtained access_token}}}})),form: function (e) {
            console.log(e);
            var that = this;
            var fId = e.detail.formId; // Network request
            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, // The user's openID
                  template_id: 'Template message ID'.page: '/pages/index/index'.form_id: fId,
                  data: {           // The template message should correspond to several write several avoid empty template
                        "keyword1": {
                              "value": "Hotel"."color": "#4a4a4a"
                        },
                        "keyword2": {
                              "value": "2018-03-22"."color": "#9b9b9b",},"keyword3": {
                              "value": "$300"."color": "#9b9b9b"
                        },
                        "keyword4": {
                              "value": "China"."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); }}); }})Copy the code

The above is js

The following is WXML

There is one formID that needs to be noted. To send template messages you must use formID or PayID

If the formID returns a string of English, it is because you did not debug on the real machine, there will be no formID returned to you. The official wechat document has the return value of formID

For reasons I’m not going to explain here.

<form bindsubmit="form" report-submit='true' >
<button form-type="submit" class='xx'>
<text>Sending service Notifications</text>
</button>
</form>
Copy the code

The effect is as follows:

Ps: Test case