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

栏目: IOS · Android · 发布时间: 5年前

内容简介:微信小程序消息通知-打卡考勤效果:

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

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

效果:

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

稍微改一下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 点赞

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

商业模式新生代

商业模式新生代

亚历山大•奥斯特瓦德 (Alexander Osterwalder)、伊夫•皮尼厄 (Yves Pigneur) / 王帅、毛心宇、严威 / 机械工业出版社 / 2011-8-15 / 88.00元

中文官网:http://www.bizmodel.org 内容简介:当你愉快的看完第一章:商业模式画布,赫然发现这些构成要素全 都交织成一幅清晰的图像在脑海中呈现,它们如何互相影响、如何交互作用全都历历在目。利用商业模式画布分析瑞士银行、Google、Lego、Wii 、Apple等跨国企业,归纳出三种不同的产业 模式,也涵括新近的热门现象免费效应及长尾理论等。在这些有趣的例子中,我们不仅更......一起来看看 《商业模式新生代》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具