微信小程序客服消息功能开发指南与实践教程

我是一名独立负责微信小程序前后端开发的开发者，对这一领域有着深刻的体会。在客服消息的开发过程中，我发现网上资料不够全面，问题也颇多。今天，我想和大家分享一份针对新手的开发指南，希望能给大家带来帮助。同时，也欢迎各位前辈提出宝贵意见。

了解入口

开展微信小程序客服消息的开发工作，得先找到那个关键的进入点。这就像是要进入一个复杂的迷宫，那个入口是至关重要的。这里的按钮介绍就相当于那个入口，可能不太容易发现，但一定要有耐心去寻找。找到之后，你将开始处理会话事件，这标志着客服消息开发的起点。虽然这一步看起来很简单，但对于初学者来说，如果不注意，后续的开发可能会变得非常困惑。我在摸索这一步上投入了大量的时间，因为相关资料不多，而且很多内容都很模糊。这是整个开发过程中必须稳固走好的第一步，如果这一步不清晰，那么接下来的工作将会更加困难。

起初，入口定位不顺畅，这导致后续步骤一直中断不断。因此，入口这一环节必须特别留意。

数据包结构

客服交流中，数据包的构成尤为关键。需弄清用户发送文字信息时形成的数据包结构。我那时如同在黑夜中摸索前行，缺乏详尽指引，只能逐字逐句查阅官方资料。这过程犹如拆解一个复杂的机械，必须了解每个部件的布局与功能。

此外，还需关注向客户发送客服信息的数据包构造。这两个构造的理解对信息的正确发送和接收至关重要。鉴于众多网络资料不够详实，我们只能逐字逐句地对照文档进行测试。这一过程充满未知，唯有不断试验。数据仿佛加密的密码，需逐步解开。

图片消息素材获取

图片信息的素材获取并不简单。特别要注意的是，微信公众号和小程序的获取方式各不相同。我之前没有留意这个细节，结果浪费了不少时间。这就像误入歧途，最后还得回头重新来过。

每个小错误都可能带来一连串麻烦，尤其是对于新手来说，这些微小的差异不易察觉，往往是在遭受损失后才会留下深刻印象。

两种客服消息类型

官方将客服信息分为两类。一类是通过在小程序中点击带有标签的消息进入的，另一类则是网页版的。在小程序中，一旦相关设置完成，顾客便可以直接操作进入客服信息流程。至于第二种，即添加客服人员的操作，这里就不再赘述。但需注意这两种类型的差异，在开发时需根据不同需求进行相应设置。起初我对此并不清楚，经过反复查阅官方文档，才逐渐理解，这也让我认识到了仔细阅读文档的重要性。

配置消息推送

   
   

     
     

      
      

     
     
     
     

      
      

       
       $signature = $_GET[
       
       “signature”];
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       $timestamp = $_GET[
       
       “timestamp”];
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       $nonce = $_GET[
       
       “nonce”];
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       $token = TOKEN;  //TOKEN 写自己在微信平台填入的token
$tmpArr = 
       
       array($token, $timestamp, $nonce);
sort($tmpArr, SORT_STRING);
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       $tmpStr = implode( $tmpArr );
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       $tmpStr = sha1( $tmpStr );
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       if( $tmpStr == $signature ){
      
      
     
     

     
     

      
      

     
     
     
     

      
      
     
       
       return 
       
       true;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
       
       else{
      
      
     
     

     
     

      
      

     
     
     
     

      
      
     
       
       return 
       
       false;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
      
      
     
     
   
   

网络资料普遍指出，要实现“客服消息”的第一种功能，必须开启“消息推送”。具体步骤是：首先登录小程序平台，接着点击“设置”，再进入“开发设置”，找到“消息推送”，最后点击“启用”。这一过程如同走流程，每一步都至关重要，不容有误。

使用后需填写网址，就好比为流程指定一个具体位置。同时，token需谨慎填写，确保与网址对应的php中的token一致。个人建议使用json格式，可根据个人需求进行选择。完成这些后，便是提交环节。若token验证通过，则提交成功。这一环节至关重要，若出现任何问题，需逐一检查所填信息。

   
   

     
     

      
      

     
     
     
     

      
      

       
          define(
       
       "TOKEN", 
       
       "");  
       
       //填写自己的token
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      
   
       
       if (
       
       isset($_GET['echostr'])) {			//校验服务器地址URL
		valid();
	}else{
		responseMsg();
	}
     function valid()
    {
        $echoStr = $_GET["echostr"];
        if(checkSignature()){
            header('content-type:text');
            echo $echoStr;
            exit;
        }else{
            echo $echoStr.'+++'.TOKEN;
            exit;
        }
    }
     function checkSignature()
    {
        $signature = $_GET["signature"];
        $timestamp = $_GET["timestamp"];
        $nonce = $_GET["nonce"];
    
        $token = TOKEN;
        $tmpArr = array($token, $timestamp, $nonce);
        sort($tmpArr, SORT_STRING);
        $tmpStr = implode( $tmpArr );
        $tmpStr = sha1( $tmpStr );
    
        if( $tmpStr == $signature ){
            return true;
        }else{
            return false;
        }
    }
     function responseMsg()
    {
        $postStr = file_get_contents('php://input');   //此处推荐使用file_get_contents('php://input')获取后台post过来的数据
 
        if (!empty($postStr) && is_string($postStr)){
		$postArr = json_decode($postStr,true);
            if(!empty($postArr['MsgType']) && $postArr['MsgType'] == 'text'){   //用户发送文本消息
                $fromUsername = $postArr['FromUserName'];   //发送者openid
                $media_id = '';   //输入想要回复的图片消息的media_id
                $data=array(
                    "touser"=>$fromUsername,
                    "msgtype"=>"image",
                    "image"=>array("media_id"=>$media_id)
                );
                $json = json_encode($data,JSON_UNESCAPED_UNICODE);  //php5.4+
                requestAPI($json);
            }elseif(!empty($postArr['MsgType']) && $postArr['MsgType'] == 'image'){ //用户发送图文消息
                $fromUsername = $postArr['FromUserName'];   //发送者openid
		$media_id = '';   //输入想要回复的图片消息的media_id
                $data=array(
                    "touser"=>$fromUsername,
                    "msgtype"=>"image",
                    "image"=>array("media_id"=>$media_id)
                );
                $json = json_encode($data,JSON_UNESCAPED_UNICODE);  //php5.4以上版本才可使用
                requestAPI($json);				
            }elseif($postArr['MsgType'] == 'event' && $postArr['Event']=='user_enter_tempsession'){ //用户进入客服
                $fromUsername = $postArr['FromUserName'];   //此处为文字回复，不同的回复方式可参考文章顶部第三个链接“回复客户消息”里查看
                $content = '你好,你的专属海报正在制作中,请稍后回复“1”获取海报';
                $data=array(
                    "touser"=>$fromUsername,
                    "msgtype"=>"text",
                    "text"=>array("content"=>$content)
                );
                $json = json_encode($data,JSON_UNESCAPED_UNICODE);  //php5.4+
                requestAPI($json);   
            }else{
                exit('error');
            }
        }else{
            echo "empty";
            exit;
        }
    }
	function requestAPI($json){
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
            $access_token = get_accessToken();
		/* 
		 * POST发送https请求客服接口api
		 */
		$url = 
       
       "https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=".$access_token;
		//以'json'格式发送post的https请求
		$curl = curl_init();
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               curl_setopt($curl, CURLOPT_URL, $url);
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
            curl_setopt($curl, CURLOPT_POST, 1); // 发送一个常规的Post请求
		curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 
       
       FALSE);
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
              curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
		if (!empty($json)){
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                  curl_setopt($curl, CURLOPT_POSTFIELDS,$json);
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
              curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
		//curl_setopt($curl, CURLOPT_HTTPHEADER, $headers );
		$output = curl_exec($curl);
		if (curl_errno($curl)) {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
            
       
       echo 
       
       'Errno'.curl_error($curl);//捕抓异常
		}
		curl_close($curl);
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       if($output == 0){
			echo 'success';exit;
		}
	}		
    /* 调用微信api，获取access_token，有效期7200s*/
    function get_accessToken(){
	$url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx****&secret='***'; //替换成自己的小程序id和secret
	@$weixin = file_get_contents($url);
	@$jsondecode = json_decode($weixin);
	@$array = get_object_vars($jsondecode);
	$token = $array['access_token'];
	return $token;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           }
      
      
     
     
   
   

后续注意事项

最后进入自己的微信小程序，在需要的地方添加contact-button标签即可
   
   

提交成功后，还有一些细节需留意。比如，修改后台代码后，务必清除微信缓存。这样做是为了确保彻底退出小程序，然后再进入测试，这样才能确保改动能即时更新。这其实是我从实践中得到的经验教训。记得有一次，我没有清除缓存就进行了测试，误以为代码出了问题，排查了很久才发现问题根源在于缓存。

   
   

     
     

      
      

     
     
     
     

      
      

       
       <contact-button 
      
      
     
     

     
     

      
      

     
     
     
     

      
      
          
       
       type=
       
       "default-light" 
      
      
     
     

     
     

      
      

     
     
     
     

      
      
          
       
       size=
       
       "27"             
      
      
     
     

     
     

      
      

     
     
     
     

      
      
          
       
       session-from=
       
       "weapp"
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       >
       
       </contact-button>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       
      
      
     
     
   
   

不知道大家在微信小程序客服消息的开发中是否遇到过类似难题？若有过，欢迎在评论区交流心得，同时也希望大家能点赞并转发此篇文章。