创建下发模板消息实例

发布：2018-01-25 11:35浏览：次来源：网络作者：tianshu

鉴于目前网络上都还找不到小程序下发模板消息的相关资源，在多次阅读了官方文档今天终于把小程序的模版消息给测通了，接下来介绍在不使用服务器的情况下，前端开发人员在本地怎么测试模板消息的发送。

1、在微信公众平台-小程序的模板中心先申请一个下发消息模板

创建下发模板消息实例(图1)

2、根据文档提及的下发模板消息做法分两个步骤

2-1、获取token，这里我直接使用微信公众平台接口调试工具【https://mp.weixin.qq.com/debug/】上得到token串，在有效期内测试。假如多处请求需要token的话，最好设置一个公共变量存储，这里我提前把appid、secret、token存储在app.js的globalData里头了。

创建下发模板消息实例(图2)

2-2、发起模版消息请求，根据接口post参数说明，还需要提前获取openid，也就是接收者（登录小程序用户）的openid。

2-2-1、获取openid，这里我是在app.js发起请求得到openid在存储到本地上，具体代码如下：【将这段代码放入onLoad生命周期内】

//获取openid
var user=wx.getStorageSync('user') || {};
if(typeof user=='object' && !user.openid && (user.expires_in || Date.now()) < (Date.now() + 600)){//不要在30天后才更换openid-尽量提前10分钟更新
wx.login({
success: function(res){
// success
var d=that.globalData.wxData;//这里存储了appid、secret、token串
var l='https://api.weixin.qq.com/sns/jscode2session?appid='+d.appId+'&secret='+d.appSecret+'&js_code='+res.code+'&grant_type=authorization_code';
wx.request({
url: l,
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function(res){
var obj={};
obj.openid=res.data.openid;
obj.expires_in=Date.now()+res.data.expires_in;
wx.setStorageSync('user', obj);//存储openid
}
});
}
});
}else{
console.log(user);
}

获得openid后，接下来就是组装发起下发模版消息请求啦~代码如下：

test.wxml：：

<form name='pushMsgFm' report-submit bindsubmit='orderSign'>
enter product:<input type="text" name="product" value='' placeholder="enter your name" />
detail: <input type="text" name='detail' placeholder="enter desc" />
select sex:<switch type="switch" name='sex' />
<button form-type="submit">submit</button>
</form>

注意form组件一定要加report-submit属性，否则获取不到formId。

test.js：：

orderSign: function (e) {
var fId = e.detail.formId;
var fObj = e.detail.value;
var l = 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + App.globalData.wxData.token;
var d = {
touser: wx.getStorageSync('user').openid,
template_id: 'dKyw9dIDjncWW3VuFIRK9o',//这个是1、申请的模板消息id，
page: '/pages/index/index',
form_id: fId,
value: {//测试完发现竟然value或者data都能成功收到模板消息发送成功通知，是bug还是故意？？【鄙视、鄙视、鄙视...】下面的keyword*是你1、设置的模板消息的关键词变量
"keyword1": {
"value": fObj.product,
"color": "#4a4a4a"
},
"keyword2": {
"value": fObj.detail,
"color": "#9b9b9b"
},
"keyword3": {
"value": new Date().getDate(),
"color": "#9b9b9b"
},
"keyword4": {
"value": "201612130909",
"color": "#9b9b9b"
},
"keyword5": {
"value": "$300",
"color": "red"
}
},
color: '#ccc',
emphasis_keyword: 'keyword1.DATA'
}
wx.request({
url: l,
data: d,
method: 'POST',
success: function(res){
console.log("push msg");
console.log(res);
},
fail: function(err) {
// fail
console.log("push err")
console.log(err);
}
});
}