内容简介:微信小程序消息通知-打卡考勤效果:
微信小程序消息通知-打卡考勤
效果:
稍微改一下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
<!--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
结语
- 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
- 小礼物走一走 or 点赞
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 云办公系统 skyeye v2.1.4 发布,新增手机端考勤打卡
- 爱打卡源码|爱打卡模式系统开发|爱打卡现成版
- ARTS第四周打卡(2019.04.08~2019.04.14)
- 实战分享:如何规划一款人脸识别考勤门锁产品
- 运动时谁还不来个姨妈:打卡小程序
- 力扣每日一题打卡:构建二叉树专题
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
商业模式新生代
亚历山大•奥斯特瓦德 (Alexander Osterwalder)、伊夫•皮尼厄 (Yves Pigneur) / 王帅、毛心宇、严威 / 机械工业出版社 / 2011-8-15 / 88.00元
中文官网:http://www.bizmodel.org 内容简介:当你愉快的看完第一章:商业模式画布,赫然发现这些构成要素全 都交织成一幅清晰的图像在脑海中呈现,它们如何互相影响、如何交互作用全都历历在目。利用商业模式画布分析瑞士银行、Google、Lego、Wii 、Apple等跨国企业,归纳出三种不同的产业 模式,也涵括新近的热门现象免费效应及长尾理论等。在这些有趣的例子中,我们不仅更......一起来看看 《商业模式新生代》 这本书的介绍吧!