微信小程序订阅消息功能实现

博客简介

本篇博客介绍如何自建服务器使用微信小程序的订阅消息功能，消息能力是小程序能力中的重要组成，为实现服务的闭环和更优的体验。使用方法步骤如下：

• 步骤一：获取模板 ID
• 步骤二：获取下发权限
• 步骤三：调用接口下发订阅消息

步骤一：获取模板 ID

在使模板的过程中，我们必须知道要获取的是哪个模板，微信官方为我们提供了这样的模板，我们需要订阅模板，并且获取模板的唯一标识id：

• 在微信公众平台手动配置获取模板 ID
• 网址：https://mp.weixin.qq.com 获取模板
• 如果没有合适的模板，可以申请添加新模板，审核通过后可使用

步骤二：获取下发权限

下发权限的获取十分简单，只需要在小程序端调用requestSubscribeMessage API即可
参数如下：

使用方法：

wx.requestSubscribeMessage({
  tmplIds: [''],
  success (res) { }
})

这个时候我们可以看到调用时，屏幕下部弹出一个消息框：

步骤三：调用接口下发订阅消息

（1）下发消息的核心在于发送POST请求：subscribeMessage.send，通过此条请求我们将获得下发能力：

• subscribeMessage.send支持https调用和云调用
• 请求地址：POST https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=ACCESS_TOKEN
• 请求参数
• 请求示例：

{
  "touser": "OPENID",
  "template_id": "TEMPLATE_ID",
  "page": "index",
  "miniprogram_state":"developer",
  "lang":"zh_CN",
  "data": {
      "number01": {
          "value": "339208499"
      },
      "date01": {
          "value": "2015年01月05日"
      },
      "site01": {
          "value": "TIT创意园"
      } ,
      "site02": {
          "value": "广州市新港中路397号"
      }
  }
}

（2）请求并不复杂，重要的是参数的获取，发送请求我们至少需要这些参数：

• access_token接口调用凭证：参考博客：微信小程序获取access_token
• touser用户的 openid：参考博客：微信小程序获取openid
• 所需下发的订阅模板id
• 以上三个参数我们均已经获取，下面开始将数据传入服务器

数据包部分：data在前端填写好参数，传入服务器，注意数据包的参数规则：

例如，模板的内容为

姓名: {{name01.DATA}}
金额: {{amount01.DATA}}
行程: {{thing01.DATA}}
日期: {{date01.DATA}}

则对应的json为

{
  "touser": "OPENID",
  "template_id": "TEMPLATE_ID",
  "page": "index",
  "data": {
      "name01": {
          "value": "某某"
      },
      "amount01": {
          "value": "￥100"
      },
      "thing01": {
          "value": "广州至北京"
      } ,
      "date01": {
          "value": "2018-01-01"
      }
  }
}

• 用这样的参数规则我们将前端的参数传入后台：

  //发送订阅消息
  message: function () {
    var that = this;
    //订阅消息模板id
    var template_id ="fqgotens_HRal3Ygiy7_WafYLsvDyMxvnNv9P8uJ_Ro";
    wx.requestSubscribeMessage({
      tmplIds: ['fqgotens_HRal3Ygiy7_WafYLsvDyMxvnNv9P8uJ_Ro'],
      success(res) {
      //发送access_token请求
        wx.request({
          url: 'https://littlede.applinzi.com/message.php',
          data:{
            access_token: that.data.accessToken,
            //数据包
            data:{
            //openid
              "touser": that.data.openid,
            //模板id
              "template_id": template_id,
              "page": "index",
              "miniprogram_state": "developer",
              "lang": "zh_CN",
              "data": {
                "date1": {
                  "value": "2020年02月18日"
                },
                "phrase2": {
                  "value": "岳阳市"
                },
                "phrase3": {
                  "value": "晴"
                },
                "character_string4": {
                  "value": "15℃"
                }
              }
            }
          },
          success: function(res) {
            console.log("订阅成功");
            console.log(res);
          },
          fail: function(res) {
            console.log("订阅失败");
          },
        })
      }
    })
  },

• 服务器端代码：
  获取参数
  发送post请求

<?php
	//获取参数
	$access_token=$_GET["access_token"];
	$data=$_GET["data"];
	//拼接subscribeMessage.send的URL
	$api="https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token={$access_token}";
    //php post请求网络的方法
   function http_request($url,$data = null,$headers=array())
    {
        $curl = curl_init();
        if( count($headers) >= 1 ){
            curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
        }
        curl_setopt($curl, CURLOPT_URL, $url);

        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);

        if (!empty($data)){
            curl_setopt($curl, CURLOPT_POST, 1);
            curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
        }
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        $output = curl_exec($curl);
        curl_close($curl);
        return $output;
    }
	$str=http_request($api,$data);
	echo $str;
?>

最后我们调用函数，获取用户openid，获取access_token，获取模板id，发送subscribeMessage.send`post请求，可以看到用户成功接收到订阅消息：