利用新浪微博接口生成漂亮的微博卡片

新浪微博開放平台（https://open.weibo.com/）提供了大量的接口API，如粉絲，微博，評論，用戶讀取等26個接口，共分為微博相關API，公共服務API，地理信息API等三大板塊API。開發者隻需注冊開放平台App Key，即可利用開放平台提供的API測試工具測試各個不同的接口。本站很多地方都用到這些接口，如留言板中的地理位置，博客右側的新浪用戶卡片……

本文主要說的是利用新浪用戶讀取（https://api.weibo.com/2/users/show.json）接口生成一個漂亮的用戶微博卡片。新浪接口授權相對嚴格，而此接口需要access_token和（uid或screen_name）兩個必填參數，其中參數uid與screen_name二者必選其一，且隻能選其一；並且接口升級後，對未授權本應用的uid，將無法獲取其個人簡介、認證原因、粉絲數、關注數、微博數及最近一條微博內容。 完整URL如下：https://api.weibo.com/2/statuses/public_timeline.json?access_token=你的access_token&uid=要獲取信息的用戶uid，該接口返回一個包含了該用戶各種信息的json對象。

以下內容將以本站封裝後的接口為例（與原接口字段稍有出入，請以原接口字段為準）講解

JSON返回值

{
    "status": 1,
    "data": {
        "nick": "Smohan", //用戶昵稱
        "location": "四川 成都", //地理位置
        "description": "我是一名程序員，個人網站：www.smohan.net", //用戶簡介
        "rank": 14, //用戶等級
        "photo": "https://tp2.sinaimg.cn/3061825921/180/40005623228/1", //用戶頭像
        "fans": 200, //粉絲數
        "friends": 36, //粉絲數
        "weibos": 339, //微博數
        "verified": true, //是否認證
        "verifiedType": 5, //認證類型
        "verifiedReason": "水墨寒個人網站  www.smohan.net 官方微博" //認證說明
    }
}

HTML結構

<?php
    $uid = $_GET['uid'];
    $data = Curl::get("https://www.smohan.net/api.php?apiname=auth&method=GetWeiboInfo&uid={$uid}",true);
    /**
    * 注意，Curl類為本站自定義類（By 坤哥），本站在不得到作者授權的情況下不提供，如果你對PHP有基礎，應該明白。
    * 如果實在不明白，請百度，或者使用PHP內置方法file_get_contents來獲取;
    * 當然，你也完全可以通過ajax（跨域後）讀取
    */
?>
<div id="weiboShow">
    <div class="grid-weibo-show shadow-hover">
        <header>&nbsp;</header>
        <div class="content">
            <div class="avatar">
                <img src="<?php echo $data['data']['photo'];?>">
                <?php
                  if($data['data']['verified']){
                    echo '<span  ></span>';
                  }
                ?>
            </div>
            <h3 class="f-tac fs-16 fc-323"><?php echo $data['data']['nick'];?>"></h3>
            <p class="mt05 fs-12 fc-7e8 f-tac">
                <?php echo $data['data']['verifiedReason'] ? 
                      $data['data']['verifiedReason'] : 
                      $data['data']['description'];?>
            </p>
            <a class="u-btn-submit f-tdn" href="//weibo.com/<?php $uid;?>" target="_blank">
                <i class="icon-weibo"></i>立即關注
            </a>
        </div>
        <footer>
            <ul>
                <li><strong><?php echo $data['data']['friends'];?>"></strong><span>關注</span></li>
                <li><strong><?php echo $data['data']['fans'];?>"></strong><span>粉絲</span></li>
                <li><strong><?php echo $data['data']['weibos'];?>"></strong><span>微博</span></li>
            </ul>
        </footer>
    </div>
</div>

CSS樣式

#weiboShow{
    background-color: #fff;
    min-height: 110px;
}
.grid-weibo-show{
    background-color: rgba(255,255,255,.7);
}
.grid-weibo-show header{
    height: 110px;
    background: url(../img/weibo.jpg) bottom center no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    animation: scaleBackground 2s linear;
}
@keyframes scaleBackground {
    from{transform: scale(1.3)}
    to{transform: scale(1)}
}
.grid-weibo-show .content{
    padding: 20px 20px 5px 20px;
}
.grid-weibo-show .avatar{
    width: 90px;
    height: 90px;
    padding: 5px;
    background-color: rgba(255,255,255,.3);
    border-radius: 100%;
    margin: -80px auto 0 auto;
    position: relative;
    z-index: 2;
}
.grid-weibo-show .avatar img{
    width: 90px;
    height: 90px;
    border-radius: 100%;
}
.grid-weibo-show .avatar .rank{
    display: block;
    width: 26px;
    height: 26px;
    background: url(../img/smohan_icons.png) -130px 0 ;
    position: absolute;
    bottom: 8px;
    right: 2px;
}
.grid-weibo-show .u-btn-submit{
    display: block;
    margin: 10px auto;
    width: 70%;
    border-radius: 2px;
}
.grid-weibo-show .u-btn-submit:hover{
    color: #fff;
}
.grid-weibo-show .u-btn-submit i{
    position: relative;
    top: 1px;
    margin-right: 5px;
}
.grid-weibo-show footer{
    border-top: 1px solid #e5e5e5
}
.grid-weibo-show footer ul{
    font-size: 0;
}
.grid-weibo-show footer li{
    display: inline-block;
    width: 33.333%;
    text-align: center;
    font-size: 14px;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 0;
}
.grid-weibo-show footer li a{
    display: block;
    padding: 10px 0;
    text-decoration: none!important;
}
.grid-weibo-show footer li strong,.grid-weibo-show footer li span{
    display: block;
    margin: 0 auto;
    color: #474646;
}
.grid-weibo-show li strong{
    font-family: Georgia;
    font-weight: 400;
    font-size: 18px;
    margin-top: -2px!important;
}
.grid-weibo-show footer li span{
    font-size: 12px;
    color: #7e878c;
    font-weight: normal;
}