短网址的实现原理就是有一个数据表会配置文件将短网址和实际网址进行对应,当请求某个短网址时,程序跳转到对应的实际网址上去,从而实现网址的访问。
方案1:PHP+MySQl实现短网址的生成和读取
常规的方案我们将生成好的短网址和原网址对应到一张数据表中,然后供读取使用。我们先来看如何生成唯一的短网址。
//生成短网址
function code62($x){
$show='';
while($x>0){
$s=$x % 62;
if ($s>35){
$s=chr($s+61);
}elseif($s>9&&$s<=35){
$s=chr($s+55);
}
$show.=$s;
$x=floor($x/62);
}
return $show;
}
function shorturl($url){
$url=crc32($url);
$result=sprintf("%u",$url);
return code62($result);
}
echo shorturl('http://www.111cn.net/');
//1EeIv2
使用以上PHP代码可以生成唯一的6位的短网址,然后我们将生成的短网址与原网址一起写入到MySQL表中,插入数据库的代码这里我就不写了,这是PHP基础。
接着,我们有一个link.php用来接收读取url并实现真实跳转。
include_once('connect.php'); //连接数据库
$url = $_GET['url'];
if(isset($url) && !empty($url)){
$sql = "select url from shorturl where codeid='$url'";
$query = mysql_query($sql);
if($row=mysql_fetch_array($query)){
$real_url = $row['url'];
header('Location: ' . $real_url);
}else{
header('HTTP/1.0 404 Not Found');
echo 'Unknown link.';
}
}else{
header('HTTP/1.0 404 Not Found');
echo 'Unknown link.';
}
代码中,如果得到短网址对应的真实url,会使用header跳转到真实的页面上去,否则返回404代码。这样我们可以使用如: http://yourdomain/link.php?url=xxx来实现短网址访问。
继续,我们使用URL rewrite即重写功能来实现诸如可以通过地址:http://yourdomain/xxx 来访问。
以下是rewrite规则:
#Apache规则:
RewriteRule ^/(.*)$ /link.php?url=$1 [L]
#如果使用nginx,规则这样写:
rewrite ^/(.*)$ /link.php?url=$1 last;
方案2:PHP+ini实现短网址技术
对于方案1使用数据库的做法好处就是操作方便,而大量短网址查询需要做优化。而方案2则放弃数据库,使用ini配置,我们将短网址和真实网址配置在ini文件中,PHP直接通过parse_ini_file()读取ini文件,几行代码就可以实现短网址的跳转。
links.ini文件像这样配置:
baidu = https://www.baidu.com/
qq = http://www.qq.com/
hw = http://www.111cn.net/
dm = http://m.111cn.net
而index.php的代码可以这样写:
$links = parse_ini_file('links.ini');
if(isset($_GET['l']) && array_key_exists($_GET['l'], $links)){
header('Location: ' . $links[$_GET['l']]);
}
else{
header('HTTP/1.0 404 Not Found');
echo 'Unknown link.';
}
当然,我们还需要配置下rewrite规则。
#Apache规则:
RewriteRule ^/(.*)$ /index.php?l=$1 [L]
#如果使用nginx,规则这样写:
rewrite ^/(.*)$ /index.php?l=$1 last;
php版微信数据统计接口其实是非常的好用了在前版本还没有此功能是后面的版本增加上去了,下面来看一个php版微信数据统计接口的例子具体如下微信在1月6日时放出了新的数据分析接口传送门:
请注意:
1、接口侧的公众号数据的数据库中仅存储了2014年12月1日之后的数据,将查询不到在此之前的日期,即使有查到,也是不可信的脏数据;
2、请开发者在调用接口获取数据后,将数据保存在自身数据库中,即加快下次用户的访问速度,也降低了微信侧接口调用的不必要损耗。
用户分析数据接口指的是用于获得公众平台官网数据统计模块中用户分析数据的接口,具体接口列表如下(暂无用户属性数据接口):
最大时间跨度是指一次接口调用时最大可获取数据的时间范围,如最大时间跨度为7是指最多一次性获取7天的数据。access_token的实际值请通过“获取access_token”来获取。
接口调用请求说明
用户分析数据接口(包括接口列表中的所有接口)需要向相应接口调用地址POST以下示例数据包:
{
"begin_date": "2014-12-02",
"end_date": "2014-12-07"
}
调用参数说明
粗略看了下,暂时还是内测阶段,不过因为是新接口,所以要改进下本站所用的微信高级接口的类。修改如下:
在类里加上新接口常量:
API_DATA_CUBE_URL = 'https://api.weixin.qq.com/datacube',
API_TYPE_DATA = 'datacube',
修改call方法:因为它要求URL参数只是access token所以跟以前JSON时一样,不过要在判断里加入datacube的判断(注:注释已经说明):
public function call($api_name, $params = array(), $type = self::GET, $api_type = self::API_TYPE_CGI) {
//加入datacube后,用switch来组接口URL
switch(true) {
case $api_type == self::API_TYPE_PAY :
$url = self::PAY_URL.$api_name;
break;
case $api_type == self::API_TYPE_DATA:
$url = self::API_DATA_CUBE_URL.$api_name;
break;
default :
$url = self::API_URL_PREFIX.$api_name;
}
if (in_array($api_name, self::$_no_need_token_apis)) {
$res = $this->request($url, $params, $type);
if ($res) {
return $res;
}
}
$this->_access_token = $this->getAccessToken();
if ($this->_access_token) {
//加多个or判断带上access_token
if ($type == self::JSON || $api_type == self::API_TYPE_DATA) {
$url = $url.'?access_token='.$this->_access_token;
} else {
$params['access_token'] = $this->_access_token;
}
$res = $this->request($url, $params, $type);
if ($res) {
return $res;
}
}
return false;
}
最后CLI方式call文档中一个getinterfacesummary接口调试(注意:是POST方式给接口):
if (isset($argc) && $argc >= 1 && $argv[0] == __FILE__) {
$client = new WechatJSON(array(
WechatJSON::APP_ID => 'wx78sfsd023744d51',
WechatJSON::APP_SECRET => '9ba3476db1fsfsff512esf2f630fb9',
));
$res = $client->call('/getinterfacesummary', array(
'begin_date' => '2014-12-01',
'end_date' => '2014-12-31'
), WechatJSON::POST, WechatJSON::API_TYPE_DATA);
if (!$res) {
var_dump($client->_error);
}
var_dump($res);
}
运行结果,虽然是API 未授权(毕竟还是内测有条件的合作伙伴有资料,公众号的就等吧):
后记,以后再做个linux任务让后台自己每隔一段时间(一周或30天)因为数据统计接口有的是7天,有的是30天。这样执行取到数据再写进库表,生成图报表,省下自己log一些官方已经给你log的统计!
其实多客服插件很简单,就是简单的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"" width=100% src="http://static.paipaiimg.com/js/victor/lib/jquery.min.js"></script>
<script type="text/javascript"" width=100% 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"" width=100% 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
在浏览器调试效果:
点选图片后发送效果:
测试地址为:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appid&redirect_uri=http://www.111cn.net /wx_agentAdd.php?response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect
我们直接在浏览器中打开此地址你会看到
Oops! Something went wrong:(
这个问题包括所有浏览器打开都会这样只能从微信中打开才会正常,包括我们pc版微信登录也是一样的。