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/view6.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后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通简书博客:https://www.jianshu.com/u/c785ece603d1
结语下面我将继续对其他知识深入讲解,有兴趣可以继续关注小礼物走一走or点赞
微信小程序消息通知-打卡考勤-如何创建微信打卡小程序-微信考勤打卡小程序
浏览量:3426
时间:
来源:达达前端
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

最新资讯
-
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
阿坝小程序代理
阿坝藏族羌族小程序代理公司有哪些?阿坝藏族羌族小程序代理平台哪个好?阿坝藏族羌族小程序代理商怎么收费,代理政策如何?下面就让即速应用产品经理jisuapp.cn来告诉你吧!