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

博客简介

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

  • 步骤一:获取模板 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)请求并不复杂,重要的是参数的获取,发送请求我们至少需要这些参数:

数据包部分: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请求,可以看到用户成功接收到订阅消息:
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页