首頁 > 開發者 > PHP

php版微信api製作多客服外掛程式例子

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

其實多客服外掛程式很簡單，就是簡單的HTML結構。當然結合非同步AJAX來擷取資料。至於微信後台怎麼設定外掛程式的URL這裡不多說了，看看API，別告訴我你不懂？做個外掛程式代碼中只需要調用微信官方給出的window.external.PutMsg(JSON)就可以選定的三種內容（文本、圖片、圖文）調到多客服軟體的發送框！下面以發送圖片為例。過程中是AJAX後台取圖片，然後顯示出來，再按一下滑鼠點選發送。（注意微信發圖片有大小限制，請看官方API）
效果圖：
client
一、我們要組織的JSON格式：
{
        msg:{
            head:{
                random:(new Date()).valueOf().toString()
            },
            body:[{
                type:1,
                content:{
                    picUrl:imageUrl
                }
            }]
        }
    }

二、外掛程式my_plugin.html排版布局的HTML（即外掛程式視窗）最好是響應式，不過寫固定寬度也行，官方給出的推薦寬度是420px
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
</head>
<style>
body {
  font-family: "Microsoft Yahei", Arial, sans-serif;
  font-size: 14px;
  background: #FFF;
  overflow-x:hidden;
}
.title{font-size: 15px;margin-bottom:5px;}
.content{margin-bottom:10px;}
.textarea{background-color: #FFFCEC;}
.module{background: #eee;border: 1px solid #DDDDDD; padding:5px; margin-bottom:10px;}
.button {
    margin-top: 8px;
 padding: 0 20px;
 text-align: center;
 text-decoration: none;
 font: 12px/25px Arial, sans-serif;
 border-radius: 5px;
}
.green {color: #3e5706; background: #a5cd4e;}
.img {width:170px;height:120px;}
li.left{float:left;margin:8px 0 0 5px;padding:0;border:1px solid #0088d0;}
.gallery{
    list-style: none;
    margin: 0; padding: 0;
    width: 100%;
    font-size: 0; /* fix inline-block spacing */
}
.gallery li{
    display: inline-block;
    *display: inline;
    zoom:1;
    width: 170px; height: 120px;
    margin: 2px;
    border: 5px solid #fff;
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
    box-shadow: 0 2px 2px rgba(0,0,0,.1);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
 
.gallery:hover li:not(:hover){
    -webkit-filter: blur(2px) grayscale(1);
    -moz-filter: blur(2px) grayscale(1);
    -o-filter: blur(2px) grayscale(1);
    -ms-filter: blur(2px) grayscale(1);
    filter: blur(2px) grayscale(1);
    opacity: .7; /* fallback */
}
</style>
<body  style="">
<div>
    <div class="module">
        <div class="title">
            <span style="margin-left:39%;color:#C62A2A;">最新產品圖</span>
        </div>
        <div class="content">
            <ul class="gallery">
            </ul>
        </div>
        <div style="text-align: center;clear:both;">
            <input type="button" class="button" id="add" onclick="get()" value="重取"/>
        </div>
        <div>
            <span id="putmsgret" style="color:red;font-size: 11px"></span>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://static.paipaiimg.com/js/victor/lib/jquery.min.js"></script>
<script type="text/javascript" src="json2.min.js"></script>
<script>
var ul = $("ul");
get();
function get() {
    $("li").remove();
    $.getJSON('http://www.wp83.net/getImages.php',null,function(data){
        $.each(data,function(index, url){
            var li = '<li class="left">';
            li += '<img class="img" src="thumb.php?src='+url+'&w=165&h=130" /></li>';
            $("ul").append(li);
        });
    });
}
 
function MCS_ClientNotify(EventData) {
    EventData = strToJson(EventData);
    switch(EventData['event']){
        case 'OnUserChange':{
            OnUserChange(EventData);
            break;
        }
    }
}
 
ul.on('click', ".img",function() {
    var $img = $(this);
    var thumbUrl = $img.attr('src');
    var imageUrl = thumbUrl.substring(thumbUrl.indexOf('=')+1,thumbUrl.indexOf('&'));
    var json = setmsg(imageUrl);
    var strReturn = window.external.PutMsg(json);
    document.getElementById('putmsgret').innerHTML= 'Status: ' + strReturn;
    setTimeout(close_tips,3000);
});
 
/*ul.on('mouseenter mouseout', ".img",function(event) {
    var $li = $(this).parents("li");
    if (event.type == 'mouseenter') {
        $li.css({background:'#EDED00'});
    } else {
        $li.css({background:'#FFF'});
    }
});*/
function close_tips(){
    document.getElementById('putmsgret').innerHTML = '';
}
 
function setmsg(imageUrl) {
    var json = {
        msg:{
            head:{
                random:(new Date()).valueOf().toString()
            },
            body:[{
                type:1,
                content:{
                    picUrl:imageUrl
                }
            }]
        }
    };
    return JSON.stringify(json);
}
 
function OnUserChange(data) {
    document.getElementById('toUser').innerHTML = data['userid'];
}
 
function strToJson(str){
    var json = (new Function("return " + str))();
    return json;
}
</script>
</body>
</html>
三、後台PHP要處理的擷取圖片目錄的代碼：（這個自由發揮了）
<?php
class GetImage {
    const
        HOST = 'http://www.wp83.net/',
        JPG = 'jpg';
    public
        $files = array();
    protected static
        $allow_types = array(self::JPG);
 
    public function __construct($dir){
        $this->get_allfiles($dir, $this->files);
    }
 
    private function get_allfiles($path,&$files) {
        if(is_dir($path)){
            $dp = dir($path);
            while ($file = $dp ->read()){
                if($file !="." && $file !=".."){
                    $this->get_allfiles($path."/".$file, $files);
                }
            }
            $dp ->close();
        }
        if(is_file($path)){
            $type = substr($path,-3);
            if(in_array($type, self::$allow_types))
                $files[] =  self::HOST.$path;
        }
    }
}
$dir = 'wp-content/uploads';
$images = new GetImage($dir);
echo json_encode($images->files);
然後我們可以直接用瀏覽器調試運行沒問題，再去微信後台設定外掛程式的url。因為它只是個html
在瀏覽器調試效果：

 


這樣一個簡單的發送圖片外掛程式就完成了。
點選圖片後發送效果：
最後，可以自己發揮，應用於支付情境，如訂單、維權單、當使用者接入多客服時，調出該使用者的相關訂單

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
php instagram api php instagram api free whois api php gmail api php tutorial ebay api php captcha api php alibaba api php amazon product api php
相關文章
監控伺服器swap並重啟php的Shell指令碼_linux shell
PHP(5)“最長公用首碼”演算法問題
30個很棒的PHP開源CMS內容管理系統
php調用dll經驗小結
PHP匯入匯出Excel方法
PHP 擷取當前url的函數及參數

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More