小程序

微信小程序发送订阅消息

2020-05-27  本文已影响0人  w晚风

小程序模板消息即将被废弃掉,于是有了新接口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)
      }
    })
  }
})

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

上一篇下一篇

猜你喜欢

热点阅读