微信小程式發模板訊息給使用者
阿新 • • 發佈：2018-12-11
第一步：index.wxml，其程式碼如下所示
<!--index.wxml--> <form bindsubmit='formSubmit' report-submit='true'> <view class="container"> <input class='input_title' type='text' placeholder="會議室基本資訊和已預訂計劃"></input> </view> <view class="container"> <text class='title'>會議室名稱</text> <view bindtap='bindShowMsg' class='select-list'> <input disabled='true' name="class_name" value='{{selectName}}'></input> <image class='img_select' src='../../images/select.png'></image> </view> </view> <view class='select-box' wx:if="{{select}}" > <view class='selected' bindtap="mySelect" data-name='第一會議室'>第一會議室</view> <view class='selected' bindtap="mySelect" data-name='第二會議室'>第二會議室</view> <view class='selected' bindtap="mySelect" data-name='第三會議室'>第三會議室</view> </view> <view class="container"> <text class='title'>會議名稱(限90個位元組)</text> <input type='text' maxlength='90' class='input_name' name="meet_title" bindblur='checkTitle' ></input> </view> <view class="container"> <text class='title'>主持人姓名(限45個位元組)</text> <input type='text' maxlength='45' class='input_name' name="user_name" bindblur='checkName'></input> </view> <view class="container"> <text class='title'>會議開始時間</text> <picker mode="date" value="{{startDate}}" bindchange="bindStartDateChange"> <view class='date'> <text>日期:</text> <input disabled='true' name='startDate' value='{{startDate}}' class='date_year'></input> </view> </picker> <picker mode="time" value="{{startTime}}" bindchange="bindStartTimeChange"> <view class="date"> <text>時間:</text> <input disabled='true' name='startTime' value='{{startTime}}' class='date_time'></input> </view> </picker> </view> <view class="container"> <text class='title'>會議結束時間</text> <picker mode="date" value="{{endDate}}" bindchange="bindEndDateChange"> <view class='date'> <text>日期:</text> <input disabled='true' name='endDate' value='{{endDate}}' class='date_year' start="{{startDate}}" end="{{startTime}}"></input> </view> </picker> <picker mode="time" value="{{endTime}}" bindchange="bindEndTimeChange"> <view class="date"> <text>時間:</text> <input disabled='true' name='endTime' value='{{endTime}}' class='date_time'></input> </view> </picker> </view> <view class="container"> <text class='title'>參會組織/人郵件</text> <input type='text' maxlength='90' class='input_name' name="mail" bindblur='setMail'></input> </view> <view class="container"> <button class='button' bindtap='addMail'>新增</button> <button class='button' bindtap='delMail'>刪除</button> <scroll-view scroll-y class='mails' name="mails" > <view wx:for="{{mails}}" wx:for-index="index" wx:for-item="item"> <text>{{item}}</text> </view> </scroll-view> </view> <button form-type='submit' >提交</button> </form>
第二步：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_.-]