微信小程式訊息通知-打卡考勤

小程式開發 · 發表 2018-11-29 19:23:18

摘要：標題圖微信小程式訊息通知-打卡考勤效果: 在這裡插入圖片描述稍微改一下js就行,有不必要的錯誤,我就不改了,哈哈! index.js //index.js const app = ge...

標題圖

微信小程式訊息通知-打卡考勤

效果:

在這裡插入圖片描述

稍微改一下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後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通

簡書部落格： ofollow,noindex">https://www.jianshu.com/u/c785ece603d1

結語

下面我將繼續對其他知識深入講解，有興趣可以繼續關注
小禮物走一走 or 點贊

微信小程式訊息通知-打卡考勤

結語

您可能也會喜歡…