vue实战(16)——公众号发送订阅消息、模版消息

2020-05-25 本文已影响0人 wayne1125

1、应用场景

基于公众号开发的web页面通常会涉及到微信支付、卡券、授权登录、模版消息、订阅消息等功能，这些功能虽然都是非常成熟的内容，但由于调试起来不方便，问题排查麻烦原因很容易入坑，本节主要围绕订阅消息和模版消息应用场景以及使用方法

订阅消息：官方文档一次性订阅消息有详细介绍，这种订阅方式好处在于无需关注公众号就可以对同意授权的用户发送一次订阅消息，需要单次订阅单次发送，缺点就是每次都需要用户去订阅
模版消息：模版消息发送则需要在微信管理后台配置相应模版，参考模版消息接口中步骤，只能给已关注公众号的用户发送模版消息

2、一次性订阅消息

2.1、一次性订阅消息授权

首先是用户授权，访问链接：
https://mp.weixin.qq.com/mp/subscribemsg?action=get_confirm&appid=wxb38cf163da69b&scene=1000&template_id=1uDxHNXwYQfBmXOfPJcjAynHArD8aWMEFNRGSbCc&redirect_url=http%3a%2f%2fsupport.qq.com&reserved=test#wechat_redirect
其它参数文档中描述都很清楚，template_id需要说明下，这个是需要在微信公众号设置中取，千万别和模版消息中的模版id混淆
image.png
接下来就是在redirect_url跳转的页面取action("confirm"代表用户确认授权，"cancel"代表用户取消授权)、scene(订阅场景值)，场景值需传给后端，不然后端调取微信发送订阅消息时会始终提示用户未订阅

image.png

2.2、一次性订阅消息发送

请求体的scene和template_id取前端传过来的
发送接口相对简单些，主要是字段对应上一般都会成功的，这里就用第三方模拟请求
请求接口：https://api.weixin.qq.com/cgi-bin/message/template/subscribe?access_token=33_GOM0Uode_fwaGrriN7gFiZdTJHz9kiQUSTIHOfvciGJhZ1QUB_OmNgEWBMrvNJc_X9XacfGc8n7C-UYx3k91r5nACeBvfXETCDsk-NtHdT_PyEqW0kmv2aMdmgNLSESuEqnXXutXDUDSDSDEEEZ
body请求体、成功返回值

{
    "touser":"ola5v0pJ_d2OzIEzADFjNdOeko",
    "template_id":"L6t3Q5jnTr1YG7xLY54P2jD_n8OEjr_VUMoyk",
    "miniprogram":{
        "appid":"wx39867ed535e89",
        "pagepath":"index"    
    },
    "scene":"1000",
    "title":"商品发货通知",
    "data":{
        "content":{
            "value":"消息正文内容消息正文内容消息正文内容消息正文内容消息正文内容消息正文内容\n说明文字：描述内容",
            "color":"#f60"
        }
    }
}
// 成功返回值
{
  "errcode": 0,
  "errmsg": "ok"
}

用户订阅后只能接受一条订阅消息，否则会返回失败返回

{
  "errcode": 42001,
  "errmsg": "access_token expired hints: [FImcf8VhE-WRDEza!]"
}

一次性订阅消息

3、模版消息

模版消息相对简单点，需要用户关注公众号，并在微信公众号-模版消息设置添加相应模版

image.png

请求接口：https://api.weixin.qq.com/cgi-bin/message/template/send?access_token=33_wYNe1eOoT3QyqI_oh4Q7MKP0ff_3dz9qU2NsC_36iHpITgJwuYMnnxRUNt9Edo_P-zNfd8QbgyOarE_ZY9LLSOc_CiHdYnzUa1H_E_sTZoZc6806WU4HoRDFRJRUJYAfAFATIK
body请求体、成功返回值

{
           "touser":"ola5v0pJ_dzADDFSNdOeko",
           "template_id":"rdeBdYf9F1h9sj_3s78JJFdseUmaQIev1XcpV94",
           "url":"http://weixin.qq.com/download",          
           "data":{
                   "first": {
                       "value":"恭喜你购买成功！",
                       "color":"#173177"
                   },
                   "keyword1":{
                       "value":"巧克力",
                       "color":"#173177"
                   },
                   "keyword2": {
                       "value":"39.8元",
                       "color":"#173177"
                   },
                   "keyword3": {
                       "value":"2014年9月22日",
                       "color":"#173177"
                   },
                   "remark":{
                       "value":"欢迎再次购买！",
                       "color":"#173177"
                   }
           }
       }

模版消息

4、实现代码

授权一次性订阅消息方法

subscribeAuth() {
  let encodeHost = encodeURIComponent('https://www.tinl.com/active/#/materialResult'); 
  let appId = "wx1d0efh8e6718b";
  alert(encodeHost)
  let templeteId = 'L6t3Q89reTr1Y87MpeP2jDK3_n8OEjr_VUMoyk'
  window.location.href = `https://mp.weixin.qq.com/mp/subscribemsg?action=get_confirm&appid=${appId}&scene=1000&template_id=${templeteId}&redirect_url=${encodeHost}&reserved=test#wechat_redirect`
}

上报服务端发送消息

reportInfo () {
  const appKey = 'd7879fsdJFDF06bf87d817ec61aca6'
  const screat = 'FNKJFKFJC9D9F467313C321FE9B60'
  const openId = this.materialOpenid
  const appid = 'wx1d0ef78e6718b'
  let times = getMinutes()
  let data = {
    formId: "-1",
    openId: openId,
    projectCode: appid,
    userId: global.materialUserId && Number(global.materialUserId),
  }
  let signStr = `${screat}appKey${appKey}body${JSON.stringify(data)}timestamp${times}${screat}`
  let sign = md5(signStr)
  let response = await axios.post( `api/consumer-sms-feign/miniProgramManager/addUserFormId?appKey=${appKey}&timestamp=${times}&sign=${sign}`,data,{headers:{'x-access-token':global.materialToken}})
  console.log(response)
  if(response.data.code === '1'){
    if(response.data.data === 0){
      alert(`data=>>${response.data.data}订阅上报成功`)
    }
  }
},

由于上报发送消息关系到具体用户，所以上报服务端接口做了加密上报，一般是前后端约定的appKey和screat，再对请求体做好ASCII码进行排序
这里的时间是以分钟传输，方便后端对频繁发送做处理，默认1分钟内只能发一次