首先登陆微信公众平台 找自己的模板消息设置, 设置自己想要的模板消息,拿到模板消息ID,再准备好自己小程序的appid,小程序秘钥。这三个都准备好了以后直接看代码。
js:
Page({
data: {
openid:"",
session_key:"",
access_token:"",
},
onLoad: function (options) {
var that = this
//第一步获取openid
wx.login({
success: function (data) {
console.log(data.code, data)
console.log("12345");
wx.request({
url: \'https://api.weixin.qq.com/sns/jscode2session\',
data:{
appid: "你的appid",
secret: "小程序秘钥",
js_code: data.code//wx.login获取到的code
},
method: "post",
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
success: function (res) {
console.log(res);
that.setData({
openid: res.data.openid,
session_key: res.data.session_key,
})
}
})
}
})
//第二步 获取access_token
wx.request({
url: \'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的appid&secret=你的小程序秘钥\',
method: "GET",
success: function (res) {
console.log("xxx");
console.log(res);
that.setData({
access_token: res.data.access_token,//获取到的access_token
})
}
})
},
form: function (e) {
console.log(e);
var that = this;
var fId = e.detail.formId; // 网络请求
var l = \'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=\' + that.data.access_token;
var d = {
touser: that.data.openid, //用户的openid
template_id: \'模板消息ID\',
page: \'/pages/index/index\',
form_id: fId,
data: { //模板消息要对应 有几个写几个 避免为空模板
"keyword1": {
"value": "酒店",
"color": "#4a4a4a"
},
"keyword2": {
"value": "2018-03-22",
"color": "#9b9b9b",
},
"keyword3": {
"value": "$300",
"color": "#9b9b9b"
},
"keyword4": {
"value": "中国",
"color": "#9b9b9b"
},
},
color: \'#ccc\',
emphasis_keyword: \'keyword1.DATA\'
}
wx.request({
url: l,
data: JSON.stringify(d),
method: \'POST\',
success: function (res) {
console.log(res);
},
fail: function (err) {
console.log(err);
}
});
},
})
以上是js
下面是wxml
其中有一个formid需要注意下,想要发送模板消息必须借助formid 或者payid
formid 有返回值 如果返回一串英文,那是因为你没有在真机调试,不会有formid返回给你,微信官方文档有关于formid的返回值
原因,在这我都不一 一解释了。
wxml
<form bindsubmit="form" report-submit=\'true\' >
<button form-type="submit" class=\'xx\'>
<text>123</text>
</button>
</form>
当到最后要成功时,你可能还会遇到坑,js中form方法最后请求微信官方服务器,success回调会有一个errorcode,这个errorcode有各种各样的返回值,这是我看了几种
还有一种是errorcode为0,原因可能是由于发送请求时没有设置UT8编码导致的,需设置编码,但是我将发送的data转了下json格式,应该不会出现什么问题,我的也返回了errorcode 为0 但是,模板消息发送成功了 收到了微信服务通知。
效果如下
请发表评论