微信小程序消息通知-打卡考勤

痛定思痛。 2021-09-17 03:32 548阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]

> 微信小程序消息通知-打卡考勤

效果:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 1]

稍微改一下js就行,有不必要的错误,我就不改了,哈哈!

> index.js

//index.js
    const app = getApp()
    // 填写微信小程序appid
    var appid = '';
    // 填写微信小程序secret  
    var secret = '';
    Page({
      // 页面数据
      data: {
        access_token: '',
        openid: '',
      },
    
      // 表单请求
      formRequst: function (e) {
        var that = this;
        // 登录
        wx.login({
          success: res => {
            // 调用接口获取登录凭证（code）
            console.log("获取code 成功", res.code);
            var code = res.code;
            // 获取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' //默认值
              },
              success: function (res) {
                console.log("获取openid 成功", res.data.openid);
                var openid = res.data.openid;
                that.setData({
                  openid: openid
                })
                // wx.setStorageSync("openid", openid)
    
                // 获取 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' //默认值
                  },
                  // 成功
                  success: function (res) {
                    console.log("获取小程序 access_token 成功", res.data.access_token);
                    that.setData({
                      access_token: res.data.access_token
                    })
    
                    // 上上一步
                  },
                  // 失败
                  fail: function (err) {
                    console.log("获取小程序 access_token 失败", err);
                  }
                })
    
                // 上一步
              },
              fail: function (err) {
                console.log("获取openid 失败", err);
              }
            })
          }
        })
      },
      // 提交表单
      formSubmit: function (e) {
        console.log('form发生了submit事件，携带数据为：', e.detail.value);
        console.log('form发生了submit事件，携带数据为：', e.detail.formId);
    
    
        var that = this;
        // 发送模板消息
        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"),
            // 模板消息的id
            "template_id": "",
            // "form_id": "FORMID",
            "form_id": e.detail.formId,
            data: {
              "keyword1": {
                "value": "2018.10.10"
              },
              "keyword2": {
                "value": "小红"
              }
            },
            "emphasis_keyword": "keyword1.DATA"
          },
          method: 'POST',
          // 成功
          success: function (res) {
            var data = res.data;
            console.log("sendTemplateMessage 成功", data);
            wx.showToast({
              title: '发送成功',
              icon: 'success'
            })
          },
          // 失败
          fail: function (err) {
            console.log("sendTemplateMessage 失败", err);
          }
        })
      },
    
    
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        // this.formSubmit();
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        this.formRequst();
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

> index.wxml

<view class='page'>
      
      <view class='title'>
        <text>考勤打卡</text>
      </view>
      <form class="text" report-submit="true" bindsubmit='formSubmit' bindreset='formReset'>
        
        <input name="date" placeholder='日期' class='input'></input>
        <input name="name" placeholder='姓名' class='input'></input>
        
        <view class='btn'>
          <button form-type='submit' type='primary'>提交</button>
          <button form-type='reset' type='primary'>重置</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;
    }

> 往后余生，唯独有你  
> 简书作者：达叔小生  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]: /images/20210724/91a727976bc0428ca562bfcd9c74e354.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 1]: /images/20210724/40e74e104c2d4db793e3ae47c654fad5.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1