微信小程序> 微信小程序消息通知-打卡考勤-如何创建微信打卡小程序-微信考勤打卡小程序

微信小程序消息通知-打卡考勤-如何创建微信打卡小程序-微信考勤打卡小程序

浏览量:3426 时间: 来源:达达前端
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点赞

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎