美文网首页小程序
微信小程序发送订阅消息

微信小程序发送订阅消息

作者: w晚风 | 来源:发表于2020-05-27 16:28 被阅读0次

    小程序模板消息即将被废弃掉,于是有了新接口wx.requestSubscribeMessage
    订阅消息文档

    一,首先我们需要进入到微信公众平台进行配置我们所需要的消息模板,这大家都懂
    image.png
    二,获取下发权限

    详见小程序端消息订阅接口 wx.requestSubscribeMessage

    三:调用接口下发订阅消息

    详见服务端消息发送接口 subscribeMessage.send

    首先我们需要获取用户 openid 、access_token
    openid如何获取在另外一篇文章里有些,也简单 https://www.jianshu.com/p/5c5ac2bd9788

    如何获取access_token 微信官方也提供了对应接口 详见官方文档

    好吧,我这里也附上获取access_token代码
    //  获取access_token
      getAccess_token(){
        const that = this;
        const appid = "wxxxxxxxxxxxx" // 这里填写你的appid
        const secret = "af7xxxxxxxxxxxxxxxxxx" // 这里填写你的secret
        
        wx.request({
          url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`, 
          header: {
            'content-type': 'application/json' 
          },
          success(res) {
            that.setData({
              access_token: res.data.access_token
            })
          },
          fail(error){
            console.log(error)
          }
        })
      },
    

    之后就是直接调用官方api发送消息了

    // 点击现实是否订阅消息
        btn(){
            const that = this;
            wx.requestSubscribeMessage({
              tmplIds: ['OriYlnQpVuHtz1rxn4KmKIH69CB5rC0aliE4Ipv9KY4'],
              success(res) {
                  if(res.errMsg === 'requestSubscribeMessage:ok'){
                      that.sendMessage();
                  }
              },
              fail(error) {
                console.log(error)
              }
            })
        },
    
    // 发送消息
      sendMessage(){
        const access_token = this.data.access_token;
        const openId = "o30pHxxxxxxxxxxxxxxxxxx" // 这里填写你的 用户openId
    
        wx.request({
          url: `https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=${access_token}`, //仅为示例,并非真实的接口地址
          data: {
            "touser": openId,
            "template_id": "OriYlnQpVuHtz1rxn4KmKIH69CB5rC0aliE4Ipv9KY4",
            "data":{
              "name1": {
                "value": "张三"
              },
              "thing2": {
                "value": "办公室"
              },
              "date3": {
                "value": "2020/05/22"
              },
              "phone_number4": {
                "value": "18374009968"
              }
            }
          },
          method: 'post',
          header: { 'Content-Type': 'application/json' },
          success(res) {
            console.log("res",res)
          },
          fail(error){
            console.log("error",error)
          }
        })
      }
    

    这样就实现微信小程序发送订阅消息功能了


    image.png
    image.png
    image.png

    贴上完整代码
    wxml

    <!--index.wxml-->
    <view class="container">
      <button bindtap="btn" >订阅消息</button>
    </view>
    
    

    js

    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
        access_token:'',
      },
     
      onLoad: function () {
        this.getAccess_token();
      },
    
      // 获取access_token
      getAccess_token(){
        const that = this;
        const appid = "wxxxxxxxxxxxx" // 这里填写你的appid
        const secret = "af7xxxxxxxxxxxxxxxxxxxxxx" // 这里填写你的secret
        
        wx.request({
          url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`, 
          header: {
            'content-type': 'application/json' 
          },
          success(res) {
            that.setData({
              access_token: res.data.access_token
            })
          },
          fail(error){
            console.log(error)
          }
        })
      },
      
        // 点击现实是否订阅消息
        btn(){
            const that = this;
            wx.requestSubscribeMessage({
              tmplIds: ['OriYlnQpVuHtz1rxn4KmKIH69CB5rC0aliE4Ipv9KY4'],
              success(res) {
                  if(res.errMsg === 'requestSubscribeMessage:ok'){
                      that.sendMessage();
                  }
              },
              fail(error) {
                console.log(error)
              }
            })
        },
      // 发送消息
      sendMessage(){
        const access_token = this.data.access_token;
        const openId = "xxxxxxxxxxxxxxxxxxxxxxx" // 这里填写你的 用户openId
    
        wx.request({
          url: `https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=${access_token}`, //仅为示例,并非真实的接口地址
          data: {
            "touser": openId,
            "template_id": "OriYlnQpVuHtz1rxn4KmKIH69CB5rC0aliE4Ipv9KY4",
            "data":{
              "name1": {
                "value": "张三"
              },
              "thing2": {
                "value": "办公室"
              },
              "date3": {
                "value": "2020/05/22"
              },
              "phone_number4": {
                "value": "18374009968"
              }
            }
          },
          method: 'post',
          header: { 'Content-Type': 'application/json' },
          success(res) {
            console.log("res",res)
          },
          fail(error){
            console.log("error",error)
          }
        })
      }
    })
    

    开发中报错的话,在开发文档中都能找的到问题,

    相关文章

      网友评论

        本文标题:微信小程序发送订阅消息

        本文链接:https://www.haomeiwen.com/subject/uriwahtx.html