跟着小猪来做小程序开发:体验模板消息

在上一篇结束时小猪本打算这一篇使用falsk来做后端存储formId然后走标准的小程序开发流程来实现模板消息的功能。

但是后来仔细想想,如果读者本身自是想做小程序开发,对后端开发并不感兴趣,或者后端框架也不一定是基于Python的Flask,那其实对是否使用flask来做后端是并不关心的。

所以小猪这一篇开始,能不用后端的就不用后端,因为小程序框架本身已经为我们封装了wx.request接口来访问网络了。我们可以方便的使用这个接口来代替服务器来做请求。

准备工作

设置微信后台的request合法域名

这个设置是用来限制我们的小程序中使用wx.request接口时可以调用哪些域名来进行访问,一般而言我们配置我们自己的域名。
因为本篇文章需要在小程序内部调用发送模板消息的接口,所以需要将https://api.weixin.qq.com/加入到合法域名里。

(此图片来源于网络,如有侵权,请联系删除! )

然后到微信《微信web开发者工具》里面的项目tag里刷新配置信息,如果不刷新的话可能会出现下述情况:


(此图片来源于网络,如有侵权,请联系删除! )

获取access_token

获取access_token的方法小猪很久之前就有单独的文章介绍过。和小猪一起搞微信公众号开发—获取Access_token

不过这里我们使用的是wx.request接口来请求,所以我们直接使用调试的方法:
1. 打开网址https://mp.weixin.qq.com/debug/,确认选择的调试接口为获取access_token
2. 属于我们的appid 和secret值。
3. 点击调试,获取数据,在下面的返回框里找到对应的access_token值,并取出,这个值在两个小时之内是有效的。

获取openid

直接使用跟着小猪来做小程序开发吧——获取用户Openid的方法来获取openid。

使用模板消息id

微信小程序后台的模板消息栏里添加合适的模板消息,并记录其对应的模板ID。

开始编写代码

因为我们只是为了体验下小程序的模板消息,所以我们把上面获取的信息先临时的保存在小程序的全局环境里:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //app.js App ( {    onLaunch : function ( ) {      //调用API从本地缓存中获取数据      var logs = wx . getStorageSync ( ‘logs’ ) || [ ]      logs . unshift ( Date . now ( ) )      wx . setStorageSync ( ‘logs’ , logs )    } ,    //…… 省略了其他代码    globalData : {      userInfo : null ,      openid : ‘oWv370DkivlAs-LPrxKKvQ9KP98w’ ,      appid : ‘wx8fa41e5f33e****’ ,      access_token : ‘********’    } } )

 

然后在对应的表单页的逻辑代码里sform.js:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 var app = getApp ( ) Page ( {    data : {      formId : null ,      template_id : null ,      openId : null ,      msg : null    } ,    formSubmit : function ( e ) {      console . log ( ‘form发生了submit事件,携带数据为:’ , e . detail . formId )      this . orderSign ( e )    } ,    formReset : function ( ) {      console . log ( ‘form发生了reset事件’ )    } ,    onLoad : function ( ) {        console . log ( ‘sform load’ )    } , orderSign : function ( e ) {      var fId = e . detail . formId ;      var that = this ;        var l = ‘https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=’ + app . globalData . access_token ;      var d = {        touser : app . globalData . openid ,        template_id : ‘quFqMrHJnAHiVwyfCXrK_EGbHAvtOy9UdIDhP-1l5xY’ , //模板消息id,        page : ‘/pages/index/index’ ,        form_id : fId ,        data : {            “keyword1” : {            “value” : “主题1111” ,            “color” : “#4a4a4a”          } ,          “keyword2” : {            “value” : new Date ( ) . getDate ( ) ,            “color” : “#9b9b9b”          } ,          “keyword3” : {            “value” : “地点是……” ,            “color” : “#9b9b9b”          } ,          “keyword4” : {            “value” : “描述一下这这是测试代码” ,            “color” : “#9b9b9b”          } ,          “keyword5” : {            “value” : “备注信息。” ,            “color” : “red”          }        } ,        color : ‘#ccc’ ,        emphasis_keyword : ‘keyword1.DATA’      }      wx . request ( {        url : l ,        data : d ,        method : ‘POST’ ,        success : function ( res ) {          that . setData ( { ‘formId’ : fId , ‘openId’ : app . globalData . openid , ‘template_id’ : d . template_id } )            that . setData ( { ‘msg’ : res } )          console . log ( “push msg” ) ;          console . log ( res ) ;        } ,        fail : function ( err ) {          // fail          console . log ( “push err” )          console . log ( err ) ;        }      } ) ;    } } )

 

对应的页面代码sform.wxml:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 < form bindsubmit = “formSubmit” bindreset = “formReset” report submit = “true” >      < view class = “section section_gap” >      < view class = “section__title” > checkbox < / view >      < checkbox group name = “checkbox” >        < label > < checkbox value = “checkbox1” / > checkbox1 < / label >        < label > < checkbox value = “checkbox2” / > checkbox2 < / label >      < / checkbox group >    < / view >    < view class = “btn-area” >      < button formType = “submit” > Submit < / button >      < button formType = “reset” > Reset < / button >    < / view > < / form > < view class = “section section_gap” >      < view class = “section_title” > { { formId } } < / view > < / view > < view class = “section section_gap” >      < view class = “section_title” > { { openId } } < / view > < / view > < view class = “section section_gap” >      < view class = “section_title” > { { template_id } } < / view > < / view > < view class = “section section_gap” >      < view class = “section_title” > { { msg } } < / view > < / view >

 

页面代码里为了方便调试我们加上了一些调试信息。
上述代码逻辑很简单,根据主要就是获取到formid之后组装调用模板消息的必要信息,然后调用微信模板消息API,调用成功之后将信息反馈到小程序界面。

代码编写完成之后,转到《微信web开发者工具》的项目tag,点击预览按钮,编译上传完成之后微信扫描二维码就可以体验。
点击提交表单时可看到我们的服务通知窗口里有了消息推送:

(此图片来源于网络,如有侵权,请联系删除! )

免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。

【小程序源码网资源版权风险说明】:
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » 跟着小猪来做小程序开发:体验模板消息
嘿,投喂下嘛!