1.

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

2.

效果:

3.

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

4.

index.js

//index.jsconstappgetApp()//填写微信小程序appidvarappid'';//填写微信小程序secretvarsecret'';Page({//页面数据data:{access_token:'',openid:'',},//表单请求formRequst:function(e){varthatthis;//登录wx.login({success:res{//调用接口获取登录凭证（code）console.log("获取code成功",res.code);varcoderes.code;//获取openIdwx.request({url:'https://api.weixin.qq.com/sns/jscode2session?appid'+appid+'secret'+secret+'grant_typeauthorization_codejs_code'+code,header:{'content-type':'application/json'//默认值},success:function(res){console.log("获取openid成功",res.data.openid);varopenidres.data.openid;that.setData({openid:openid})//wx.setStorageSync("openid",openid)//获取access_tokenwx.request({url:'https://api.weixin.qq.com/cgi-bin/token?grant_typeclient_credentialappid'+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);varthatthis;//发送模板消息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){vardatares.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(){}})复制代码5.

index.wxml

!--index.wxml--viewclass'page'!--标题--viewclass'title'text考勤打卡/text/viewformclass"text"report-submit"true"bindsubmit'formSubmit'bindreset'formReset'!--考勤填表--inputname"date"placeholder'日期'class'input'/inputinputname"name"placeholder'姓名'class'input'/input!--按钮设置--viewclass'btn'buttonform-type'submit'type'primary'提交/buttonbuttonform-type'reset'type'primary'重置/button/view/form/view复制代码6.

index.wxss

/**index.wxss**/.page{margin:0rpx50rpx50rpx50rpx;font-size:50rpx;background-color:lavender;}.title{text-align:center;}.input{margin:0rpx0rpx50rpx0rpx;width:100%;}.btn{display:flex;flex-direction:row;}复制代码7.

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

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