Title Map

Effect:

Insert picture description here

Just change js a little. If there is any unnecessary error, I will not change it. Ha ha!

index.js

//index.js
const app = getApp()
// Fill in wechat applet appid
var appid = '';
// Fill in wechat applet secret  
var secret = '';
Page({
  // Page data
  data: {
    access_token: '',
    openid: '',
  },

  // Form request
  formRequst: function (e) {
    var that = this;
    // Sign in
    wx.login({
      success: res => {
        // Call interface to get login credentials (code)
        console.log("Obtain code Success", res.code);
        var code = res.code;
        // Get openId
        wx.request({
          url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&grant_type=authorization_code&js_code=' + code,
          header: {
            'content-type': 'application/json' //Default value
          },
          success: function (res) {
            console.log("Obtain openid Success", res.data.openid);
            var openid = res.data.openid;
            that.setData({
              openid: openid
            })
            // wx.setStorageSync("openid", openid)

            // Get access_token
            wx.request({
              url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + appid + '&secret=' + secret,
              method: 'GET',
              header: {
                'content-type': 'application/json' //Default value
              },
              // Success
              success: function (res) {
                console.log("Get applet access_token Success", res.data.access_token);
                that.setData({
                  access_token: res.data.access_token
                })

                // Last step
              },
              // fail
              fail: function (err) {
                console.log("Get applet access_token fail", err);
              }
            })

            // Previous step
          },
          fail: function (err) {
            console.log("Obtain openid fail", err);
          }
        })
      }
    })
  },
  // Submit Form
  formSubmit: function (e) {
    console.log('form It happened. submit Event with data as follows:', e.detail.value);
    console.log('form It happened. submit Event with data as follows:', e.detail.formId);


    var that = this;
    // Send template message
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + that.data.access_token,
      data: {
        // openid
        "touser": wx.getStorageSync("openid"),
        // The id of the template message
        "template_id": "",
        // "form_id": "FORMID",
        "form_id": e.detail.formId,
        data: {
          "keyword1": {
            "value": "2018.10.10"
          },
          "keyword2": {
            "value": "Xiaohong"
          }
        },
        "emphasis_keyword": "keyword1.DATA"
      },
      method: 'POST',
      // Success
      success: function (res) {
        var data = res.data;
        console.log("sendTemplateMessage Success", data);
        wx.showToast({
          title: 'Send successfully',
          icon: 'success'
        })
      },
      // fail
      fail: function (err) {
        console.log("sendTemplateMessage fail", err);
      }
    })
  },



  /**
   * Life cycle function -- listening to page loading
   */
  onLoad: function (options) {
    // this.formSubmit();
  },

  /**
   * Life cycle function -- listen to the completion of the first rendering of the page
   */
  onReady: function () {

  },

  /**
   * Life cycle function -- monitor page display
   */
  onShow: function () {
    this.formRequst();
  },

  /**
   * Life cycle function -- monitor page hidden
   */
  onHide: function () {

  },

  /**
   * Life cycle function -- monitor page unloading
   */
  onUnload: function () {

  },

  /**
   * Page related event processing function -- listening to user pull-down action
   */
  onPullDownRefresh: function () {

  },

  /**
   * Handling function of page pull bottom event
   */
  onReachBottom: function () {

  },

  /**
   * Users click the upper right corner to share
   */
  onShareAppMessage: function () {

  }
})

index.wxml

<!--index.wxml-->
<view class='page'>
  <!-- Title -->
  <view class='title'>
    <text>Attendance card</text>
  </view>
  <form class="text" report-submit="true" bindsubmit='formSubmit' bindreset='formReset'>
    <!-- Attendance record -->
    <input name="date" placeholder='date' class='input'></input>
    <input name="name" placeholder='Full name' class='input'></input>
    <!-- Button settings -->
    <view class='btn'>
      <button form-type='submit' type='primary'>Submission</button>
      <button form-type='reset' type='primary'>Reset</button>
    </view>
  </form>
</view>

index.wxss

/**index.wxss**/

.page {
  margin: 0rpx 50rpx 50rpx 50rpx;
  font-size: 50rpx;
  background-color: lavender;
}

.title {
  text-align: center;
}

.input {
  margin: 0rpx 0rpx 50rpx 0rpx;
  width: 100%;
}

.btn {
  display: flex;
  flex-direction: row;
}

epilogue

• Now I will continue to explain other knowledge in depth. If you are interested, you can continue to pay attention
• Let's go f or a little gift