微信小程序发模板消息给用户
第一步：index.wxml，其代码如下所示
第二步：index.wxss，其代码如下所示：
/**index.wxss**/
.container{
width: 100%;
display: flex;
flex-wrap: wrap;
margin-bottom: 5px;
font-size: 12px;
}
.title {
width: 120px;
height: 20px;
line-height: 20px;
font-size: 11px;
background-color: blue;
color: white;
text-align: center;
border: solid 1px deepskyblue;
border-radius: 2px;
margin: 0 10px;
}
.select-list{
width: 130px;
height: 20px;
line-height: 20px;
font-size: 11px;
text-align: center;
background-color: white;
border: solid 1px black;
border-radius: 2px;
}
.select-box{
width: 130px;
height: 60px;
position: relative;
font-size: 14px;
margin-left: 142px;
background-color: red;
text-align: center;
border: solid 1px red;
border-radius: 2px;
}
.select{
height: 20px;
line-height: 20px;
}
.img_select{
position: absolute;
width: 15px;
height: 10px;
left: 255px;
top: 35px;
}
.input_title{
margin: 0 auto;
width: 140px;
height: 20px;
border:solid 1px black;
flex: center;
text-align: center;
font-size: 10px;
}
.input_name{
width: 170px;
border:solid 1px black;
}
.font{
font-size: 12px;
line-height: 20px;
}
.date{
display: flex;
height: 20px;
}
.date text,.date input{
justify-self: start;
line-height: 20px;
}
.date_year{
width: 70px;
}
.date_time{
width: 40px;
}
.button{
border-radius: 5px;
background-color: wheat;
font-size: 12px;
height: 30px;
}
.mails{
height: 200px;
width: 320px;
border: solid 1px black;
}
第三步：index.js，其代码如下所示：
//index.js
//获取应用实例
const app = getApp()
var arr = new Array();
Page({
data: {
select: false,
class_name: '',
meet_titlt: "",
user_name: "",
selectName: '第一会议室',
startDate: '2016-09-01',
startTime: '12:01',
endDate: '2016-09-02',
endTime: '12:02',
mail: "",
mails: [],
color: "deepskyblue",
isClick: true,
titleFlag: false,
nameFlag: false,
endDataFlag: true,
endTimeFlag: true,
mailFlag: false,
code: "a",
formId:""
},
onLoad: function (options) {
},
// 显示下拉框
bindShowMsg() {
if (this.data.select == false) {
this.setData({
select: true
})
} else {
this.setData({
select: false
})
}
},
// 选择下拉框
mySelect(e) {
var name = e.currentTarget.dataset.name
this.setData({
selectName: name,
class_name: name,
select: false
})
},
// 选择开始日期
bindStartDateChange: function (e) {
this.setData({
startDate: e.detail.value
})
},
// 选择开始时间
bindStartTimeChange: function (e) {
this.setData({
startTime: e.detail.value
})
},
// 选择截止日期
bindEndDateChange: function (e) {
var endDate = e.detail.value;
if (endDate < this.data.startDate) {
wx.showModal({
title: '提示',
content: '请选择正确的日期',
});
this.setData({
endDate: this.data.startDate
});
} else {
this.setData({
endDate: endDate,
endDateFlag: true
})
}
},
// 选择截止时间
bindEndTimeChange: function (e) {
var endTime = e.detail.value;
if (this.data.startDate == this.data.endDate) {
if (endTime <= this.data.startTime) {
wx.showModal({
title: '提示',
content: '请选择正确的时间',
});
this.setData({
endTime: this.data.startTime
});
}
} else {
this.setData({
endTime: endTime,
endTimeFlag: true
})
}
},
// 提交表单
formSubmit: function (e) {
// 得到formid
var formId = e.detail.formId;
console.log(formId);
// 验证所有输入项是否正确
if (this.data.titleFlag && this.data.nameFlag && this.data.endDataFlag && this.data.endTimeFlag && this.data.mailFlag) {
var class_name = e.detail.value.class_name;
var meet_title = e.detail.value.meet_title;
var user_name = e.detail.value.user_name;
var startDate = e.detail.value.startDate;
var startTime = e.detail.value.startTime;
var endDate = e.detail.value.endDate;
var endTime = e.detail.value.endTime;
var mails = this.data.mails;
//var code = "";
console.log(class_name + ";" + meet_title + ";" + user_name + ";" + startDate + ";" + startTime + ";" + endDate + ";" + endTime + ";" + mails + ";");
var openid = "";
// 登录
wx.login({
success: function (res) {
if (res.code) { //wx.login获取code。
var access_token = "";
wx.request({
url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的小程序appid&secret=你的小程序密匙',
type: "get",
dataType: "json",
async: true,
success: function (result) {
let _access_token = result.data.access_token;
let url = 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + _access_token;
wx.request({
url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + "你的小程序appid" + '&secret=' + "你的小程序密匙" + '&js_code=' + res.code + '&grant_type=authorization_code',
data: {},
header: {
'content-type': 'json'
},
success: function (res) {
// 得到用户的openid
openid = res.data.openid //返回openid
var user = "";
// 拼接参会人
for (var i = 0; i < mails.length; i++) {
if (mails.length == 1) {
user += mails[i];
} else {
user += mails[i] + ";";
}
}
if (user.lastIndexOf(";") > 0) {
user = user.substring(0, user.length - 1);
}
console.log(user);
// 设置模板消息的data值
let _jsonData = {
touser: openid,
template_id: '你的小程序模板id',
form_id: e.detail.formId,
page: "pages/index/index",
data: {
// 会议时间
"keyword1": { "value": startDate + " " + startTime, "color": "#173177" },
// 参会人
"keyword2": { "value": user, "color": "#173177" },
// 主持人
"keyword3": { "value": user_name, "color": "#173177" },
// 会议室
"keyword4": { "value": class_name, "color": "#173177" },
// 会议名称
"keyword5": { "value": meet_title, "color": "#173177" },
}
};
// 开始发送模板消息
wx.request({
url: url,
data: _jsonData,
method: "post",
success: function (res) {
console.log(res)
}
});
}
});
},
});
// 发送邮件
wx.request({
url: 'http://localhost:8080/TestSpringMVC/sendMail',
data: {
"class_name": class_name,
"meet_title": meet_title,
"user_name": user_name,
"startDate": startDate,
"startTime": startTime,
"endDate": endDate,
"endTime": endTime,
"mails": mails
},
header: {
'Content-Type': 'application/json'
},
success: function (res) {
wx.showToast({
title: '发送成功',
icon: 'success',
duration: 2000
})
},
fail: function () {
wx.showModal({
title: '提示',
content: '发送失败',
})
}
})
}
}
});
} else {
wx.showModal({
title: '提示',
content: '请输入全部正确的信息',
})
}
},
// 验证邮箱
setMail: function (e) {
var email = e.detail.value;
var reg = new RegExp('^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$');
var flag = reg.test(email);
if (flag) {
this.setData({
mail: email,
mailFlag: true
})
} else {
wx.showModal({
title: '提示',
content: '请输入正确的邮箱',
})
}
},
// 添加参会人邮箱
addMail: function () {
var email = this.data.mail;
var reg = new RegExp('^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$');
var flag = reg.test(email);
var isExit = true;
if (flag) {
if (arr != null) {
for (var i = 0; i < arr.length; i++) {
//判断是否存在
if (email == arr[i]) {
isExit = false;
wx.showModal({
title: '提示',
content: '该邮箱已存在',
});
}
}
if (isExit) {
arr.push(this.data.mail);
this.setData({
mails: arr
});
}
}
} else {
wx.showModal({
title: '提示',
content: '请输入正确的邮箱',
})
}
},
// 删除邮箱
delMail: function () {
if (arr != null) {
for (var i = 0; i < arr.length; i++) {
if (this.data.mail == arr[i]) {
arr.splice(i, 1);
}
}
}
this.setData({
mails: arr
});
},
//验证标题
checkTitle: function (e) {
var title = e.detail.value;
if (title != null && title != "") {
this.setData({
meet_title: title,
titleFlag: true
})
} else {
wx.showModal({
title: '提示',
content: '会议名称不能为空',
})
}
},
// 验证主持人姓名
checkName: function (e) {
var name = e.detail.value;
if (name != null && name != "") {
this.setData({
user_name: name,
nameFlag: true
})
} else {
wx.showModal({
title: '提示',
content: '主持人姓名不能为空',
})
}
},
})