请选择 进入手机版 | 继续访问电脑版
开启辅助访问
快捷导航
查看: 377|回复: 8

[经典案例] 微信小程序实例:创建下发模板消息实例

[复制链接]

该用户从未签到

14

主题

45

帖子

136

积分

注册会员

Rank: 2

积分
136
发表于 2016-12-14 11:27:43 | 显示全部楼层 |阅读模式
本帖最后由 草灯 于 2016-12-14 11:29 编辑

【本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处】

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


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

5_副本.jpg


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


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


6_副本.jpg



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


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


  1. //获取openid  
  2.     var user=wx.getStorageSync('user') || {};  
  3.     if(typeof user=='object' && !user.openid && (user.expires_in || Date.now()) < (Date.now() + 600)){//不要在30天后才更换openid-尽量提前10分钟更新  
  4.       wx.login({  
  5.         success: function(res){  
  6.           // success  
  7.           var d=that.globalData.wxData;//这里存储了appid、secret、token串  
  8.           var l='https://api.weixin.qq.com/sns/jscode2session?appid='+d.appId+'&secret='+d.appSecret+'&js_code='+res.code+'&grant_type=authorization_code';  
  9.           wx.request({  
  10.             url: l,  
  11.             data: {},  
  12.             method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT  
  13.             // header: {}, // 设置请求的 header  
  14.             success: function(res){  
  15.               var obj={};  
  16.               obj.openid=res.data.openid;  
  17.               obj.expires_in=Date.now()+res.data.expires_in;  
  18.                
  19.               wx.setStorageSync('user', obj);//存储openid  
  20.             }  
  21.           });  
  22.         }  
  23.       });  
  24.     }else{  
  25.       console.log(user);  
  26.     }  
复制代码

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

      test.wxml::

  1. <form name='pushMsgFm' report-submit bindsubmit='orderSign'>  
  2.     enter product:<input type="text" name="product" value='' placeholder="enter your name" />  
  3.     detail: <input type="text" name='detail' placeholder="enter desc" />  
  4.     select sex:<switch type="switch" name='sex' />  
  5.     <button form-type="submit">submit</button>  
  6. </form>  
复制代码

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

  test.js::

  1. orderSign: function (e) {  
  2.     var fId = e.detail.formId;  
  3.     var fObj = e.detail.value;  
  4.     var l = 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + App.globalData.wxData.token;  
  5.     var d = {  
  6.       touser: wx.getStorageSync('user').openid,  
  7.       template_id: 'dKyw9dIDjncWW3VuFIRK9o',//这个是1、申请的模板消息id,  
  8.       page: '/pages/index/index',  
  9.       form_id: fId,  
  10.       value: {//测试完发现竟然value或者data都能成功收到模板消息发送成功通知,是bug还是故意??【鄙视、鄙视、鄙视...】 下面的keyword*是你1、设置的模板消息的关键词变量  
  11.   
  12.         "keyword1": {  
  13.           "value": fObj.product,  
  14.           "color": "#4a4a4a"  
  15.         },  
  16.         "keyword2": {  
  17.           "value": fObj.detail,  
  18.           "color": "#9b9b9b"  
  19.         },  
  20.         "keyword3": {  
  21.           "value": new Date().getDate(),  
  22.           "color": "#9b9b9b"  
  23.         },  
  24.         "keyword4": {  
  25.           "value": "201612130909",  
  26.           "color": "#9b9b9b"  
  27.         },  
  28.         "keyword5": {  
  29.           "value": "$300",  
  30.           "color": "red"  
  31.         }  
  32.       },  
  33.       color: '#ccc',  
  34.       emphasis_keyword: 'keyword1.DATA'  
  35.     }  
  36.     wx.request({  
  37.       url: l,  
  38.       data: d,  
  39.       method: 'POST',  
  40.       success: function(res){  
  41.         console.log("push msg");  
  42.         console.log(res);  
  43.       },  
  44.       fail: function(err) {  
  45.         // fail  
  46.         console.log("push err")  
  47.         console.log(err);  
  48.       }  
  49.     });  
  50.   }  
复制代码

最后编译,输入文本点击提交发起请求,这里只能手机调试,我用开发工具打印出来的formId: "the formId is a mock one"并不是数字串。最终微信助手下发如下信息,表示成功发送模板消息了


7_副本.jpg


顺便分享一下我的博客:阿灿的专栏




回复

使用道具 举报

该用户从未签到

14

主题

45

帖子

136

积分

注册会员

Rank: 2

积分
136
 楼主 发表于 2016-12-14 11:32:11 | 显示全部楼层
一会还会给大家分享更多~~~也欢迎大家多多分享
回复 支持 反对

使用道具 举报

该用户从未签到

128

主题

570

帖子

2277

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2277
发表于 2016-12-14 13:21:45 | 显示全部楼层
这个功能应该是小程序开放以后最常用的功能,毕竟用完即走还是很让人木有安全感的~~~
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

12

帖子

31

积分

新手上路

Rank: 1

积分
31
发表于 2016-12-14 15:22:33 | 显示全部楼层
这个太有用了,只是还没做到哪一步
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

12

帖子

31

积分

新手上路

Rank: 1

积分
31
发表于 2016-12-14 15:24:00 | 显示全部楼层
很多有时间限制
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

12

帖子

31

积分

新手上路

Rank: 1

积分
31
发表于 2016-12-14 15:27:22 | 显示全部楼层
666666666666666666666666666
回复 支持 反对

使用道具 举报

该用户从未签到

2

主题

54

帖子

199

积分

版主

Rank: 7Rank: 7Rank: 7

积分
199
发表于 2016-12-15 11:47:15 | 显示全部楼层
回复

使用道具 举报

该用户从未签到

2

主题

54

帖子

199

积分

版主

Rank: 7Rank: 7Rank: 7

积分
199
发表于 2016-12-15 11:47:21 | 显示全部楼层
回复

使用道具 举报

该用户从未签到

2

主题

6

帖子

19

积分

新手上路

Rank: 1

积分
19
发表于 2016-12-19 18:27:35 | 显示全部楼层
这个好,正需要这个
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 QQ登录

本版积分规则

关闭

进站必读上一条 /1 下一条