微信小程序消息通知打卡考勤-即速应用

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

浏览量：756 时间：2019-12-23 来源：达达前端小酒馆

小程序

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

效果:

小程序

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

index.js

//index.jsconst app = getApp()// 填写微信小程序appidvar 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

!--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;}