Bing 搜索每天都会更换一张精美的图片作为壁纸，除了特殊时候不太好看外（比如春节那几天），没多大问题。移动端还有上每日故事，与图片现配。现在我的博客首屏图片就是 Bing 每日壁纸，有没有感觉 B 格满满^_^。本文将介绍如何把 Bing 每日壁纸和故事扒到自己博客。
获取 API 接口
首先我们进入Bing 首页，会发现自动转到中国版。不过这没关系，中国版更符合国情，速度也比国际版快一些。
通过抓包，可以发现http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1这里可以获取到无水印的图片。
那每日故事呢？通过模拟 UA，访问移动版。同样发现了 API 接口http://cn.bing.com/cnhp/coverstory/。不过这里的图片是有水印的。
接口已经得到了，接下来就是写代码了。因为我既想使用无水印的图片，也想获取每日故事，所以我把两个接口结合起来使用。
代码
<?php
/**
* 获取Bing每日壁纸和故事
* @author giuem
*/
function bingImgFetch(){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1');
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'User-Agent: Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.137 Safari/537.36'
));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$re = curl_exec($ch);
curl_close($ch);
$re = json_decode($re,1);//电脑版返回内容
$re2 = json_decode(file_get_contents('http://cn.bing.com/cnhp/coverstory/'),1);//移动版返回内容
return array(
/* 更改图片尺寸，减小体积 */
'url' => str_replace('1920x1080','1366x768',$re['images'][0]['url']),
/* 结束日期 */
'date' => date('j',strtotime($re['images'][0]['enddate'])),
/* 故事标题 */
'title' => $re2['title'],
/* 内容 */
'd' => $re2['para1']
);
}
?>使用示例
如果是 wordpress，可以把上面的代码丢进function.php，然后该怎么用就怎么用。
$bingimg= bingImgFetch();
echo $bingimg['url'];//输出图片地址
echo $bingimg['title'];
echo $bingimg['d'];我的使用方法
因为我用的是静态博客，不能在后端完成这些操作，所以只能通过 js 获取。同时把代码放在国内访问较快的SAE中，使用Memcache缓存内容。而且我在获取后还把数据储存在localStorage中，这样可以减少请求次数。
为什么要缓存？因为不缓存的话，别人每访问一次你都要获取一次，IP 可能会被被 Bing ban 了。
当然，你也可以缓存到数据库中，这些你都可以结合实际情况修改代码。
PHP in SAE
<?php
header('Access-Control-Allow-Origin: *');
$mmc=memcache_init();
if($mmc==false){
/* 如果memcache启动失败，直接获取 */
$bingimg = json_encode(bingImgFetch());
}else {
$bingimg = memcache_get($mmc,'bing_url');
$date = memcache_get($mmc,'bing_url_date');
/* 判断日期进行更新 */
if(date('j') != $date || !$bingimg || !$date){
$bingimg = json_encode(bingImgFetch());
/* 写入 */
memcache_set($mmc,"bing_url",$bingimg);
memcache_set($mmc,"bing_url_date",date('j'));
}
}
echo $bingimg;
function bingImgFetch(){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1');
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'User-Agent: Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.137 Safari/537.36'
));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$re = curl_exec($ch);
curl_close($ch);
$re = json_decode($re,1);
$re2 = json_decode(file_get_contents('http://cn.bing.com/cnhp/coverstory/'),1);
return array(
'url' => str_replace('1920x1080','1366x768',$re['images'][0]['url']),
'date' => date('j',strtotime($re['images'][0]['enddate'])),
'title' => $re2['title'],
'd' => $re2['para1']
);
}HTML
<section id="hero">
<div class="hero-warp">
<p id="hero-title"></p>
<p id="hero-d"></p>
</div>
</section>CSS
html,
body {
height: 100%;
}
#hero {
position: relative;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
text-align: center;
color: #fff;
display: table;
}
.hero-warp {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#hero-title {
font-size: 28px;
margin-bottom: 8px;
}
#hero-d {
width: 80%;
margin: 0 auto;
}JS
如果你使用jQuery，可以把这里的 ajax 换成$.ajax()实现。
(function () {
//bing pic load
var $data = {
title: localStorage.getItem('bing_title')
? localStorage.getItem('bing_title')
: '',
d: localStorage.getItem('bing_d') ? localStorage.getItem('bing_d') : '',
url: localStorage.getItem('bing_url')
? localStorage.getItem('bing_url')
: '',
date: localStorage.getItem('bing_date')
? localStorage.getItem('bing_date')
: '',
};
if (
new Date().getDate() != $data.date ||
$data.title == '' ||
$data.d == '' ||
$data.url == ''
) {
ajax('GET', '//giuem.sinaapp.com/bing/', function ($data) {
localStorage.setItem('bing_title', $data.title);
localStorage.setItem('bing_d', $data.d);
localStorage.setItem('bing_url', $data.url);
localStorage.setItem('bing_date', new Date().getDate());
setHero($data);
});
} else {
setHero($data);
}
})();
function setHero($data) {
var $hero = document.getElementById('hero');
if (!$hero) {
return;
}
if ($data) {
$hero.style.cssText += 'background-image:url(' + $data.url + ')';
document.getElementById('hero-title').innerHTML = $data.title;
document.getElementById('hero-d').innerHTML = $data.d;
}
}
function ajax(type, url, opts, callback) {
var xhr = new XMLHttpRequest();
if (typeof opts === 'function') {
callback = opts;
opts = null;
}
xhr.open(type, url);
var fd = new FormData();
if (type === 'POST' && opts) {
for (var key in opts) {
fd.append(key, JSON.stringify(opts[key]));
}
}
xhr.onload = function () {
callback(JSON.parse(xhr.response));
};
xhr.send(opts ? fd : null);
}