专栏首页娱乐心理测试微信小程序发送模版消息(事例)

微信小程序发送模版消息(事例)

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

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

模版图

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

82064030-1028-44B7-8539-B65CF8F7FFBB.png

1).获取access_token

//获取access_token
  getAccess_token(){
    var that = this;
    var appId = 'wxbd2******51';
    var secret = '3666********012d621261';
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + appId + '&secret=' + secret,
      data: {},
      header: {
        'content-type': 'json'
      },
      success: function (res) {
        console.log("access_token"+res)
        that.setData({
          access_token: res.data.access_token
        })
      },
      fail:function(res){
        console.log("失败"+res)
      }
    })
  },

其中里面的appId,secret是从微信公众平台获取的,(注意:AppSecret的查看需要点击该行后面的“重置”或者“查看”链接。查看后要记起来,不然每次重置,会对上次造成影响)。 2)获取openid

// 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        if (res.code) {
          var code = res.code; //返回code
          var appId = 'wxbd2******51';
        var secret = '3666********012d621261';
          wx.request({
            url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appId + '&secret=' + secret + '&js_code=' + code + '&grant_type=authorization_code',
            data: {},
            header: {
              'content-type': 'json'
            },
            success: function (res) {
              var openid = res.data.openid //返回openid
              that.globalData.openid = openid
            }
          })
        }
      }
    })

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

需要的参数都已准备好,接下来就是组装发起下发模版消息请求啦~代码如下 .wxml 代码

 <form bindsubmit='formSubmit' report-submit='true' bindreset='formReset' >
  <view class='btn-area' >
   <input name="input" placeholder='222'/>
   <button form-type='submit' >提交</button>
  </view>
</form>

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

.js 代码

 //提交
  formSubmit(e){
   var that = this;
   var fId = e.detail.formId;
   var fObj = e.detail.value;
   var data = {
     touser: app.globalData.openid,
     template_id: 'YJNCc4ugTPLpPA-6nnNmatxIIQq2o2EyqJmWC82CBNI',//这个是1、申请的模板消息id,  
     page: '/pages/index/index',
     form_id: fId,
     data: {
       "keyword1": {
         "value": fObj,
         "color": "#9b9b9b"
       },
       "keyword2": {
         "value": "我们都是",
         "color": "#9b9b9b"
       }
     },
     color: '#ccc',
     emphasis_keyword: 'keyword1.DATA'
   } 
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + that.data.access_token,
      data: data,
      method: 'POST', 
      success: function (res) {
        console.log(res);
      }
    })
  }

最后编译,输入文本点击提交发起请求,这里只能手机调试,我用开发工具打印出来的formId: "the formId is a mock one"并不是数字串。

微信官方 下发条件说明

  1. 支付 当用户在小程序内完成过支付行为,可允许开发者向用户在7天内推送有限条数的模板消息(1次支付可下发3条,多次支付下发条数独立,互相不影响)
  2. 提交表单 当用户在小程序内发生过提交表单行为且该表单声明为要发模板消息的,开发者需要向用户提供服务时,可允许开发者向用户在7天内推送有限条数的模板消息(1次提交表单可下发1条,多次提交下发条数独立,相互不影响)

有些我自己的遇到的问题: 1.errcode: 40037, errmsg: "invalid template_id(用手机预览测试OK) 2.errcode: 41028, errmsg: "invalid form id(真机测试两次OK) 3.以上的接口都应该为自己的服务器调取,由于自己做的测试,只能自己来操作!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序的网络请求封装

    honey缘木鱼
  • mpvue网络接口请求封装

    在mpvue中我们同样使用小程序的原生API wx.request进行请求,具体方法如下:

    honey缘木鱼
  • 关于小程序的一些基本常识

        a. 如果小程序需要与你的服务器进行数据交换,那么你就必须注册域名,即使是开发环境也需要;

    honey缘木鱼
  • 微信小程序模板消息详解

    先放代码 wxml: <form name='pushMsgFm' report-submit bindsubmit='orderSign'> <vi...

    李文杨
  • 【思路分享】如何在Win下查杀Linux恶意文件

    在对linux系统应急处理时,常需要查杀系统中是否存在恶意文件,但纯手工检查的话,难免会有遗漏,虽然在linux系统中也有一些专门门的查杀工具,但终究维护的人少...

    FB客服
  • 微信小程序的接口请求

    用户4344670
  • 维护你的请求队列,处理token异常

    网络请求是开发中最基础也是最核心的需求,封装一个稳定且可用性高的请求也显得尤为重要。通常封装的内容除了入参之外,更多的是请求中的异常处理。本文分享下我在处理 t...

    WahFung
  • koa框架生成微信公众号二维码

    demo的github地址:https://github.com/xuedingmiaojun/koa-demo.git

    薛定喵君
  • 微信小程序云存储秘籍

    很长时间没写过文章了,前段时间参加了腾讯云物联网的一个应用创新比赛获得了个二等奖,真感谢腾讯云同学和其他大牛的支持及帮助。经过这次比赛发现物联网控制跟微信小程序...

    谭广健
  • 【融职培训】Web前端学习 第9章 教务管理系统开发5 前端代码讲解

    导航守卫主要用于实现在页面发生跳转时,检测token的存在,如果token没有或失效,网页则回到登录页面,代码如下。

    学习猿地

扫码关注云+社区

领取腾讯云代金券