月度归档:2014年10月

js自动给url加入新参数

前阵子做了个项目,客户要求用户手机登陆时分享链接给好友可以带上自己的uid,并且所有的页面都要带上自己的ID,原程序猿的写法是将所有要跳转的页面href中都加入全局变量用户ID,发现问题颇多还比较麻烦,所以找到了这个JS来解决问题,它可以自动判断加的参数之前是?还是&,十分实用。

function UrlUpdateParams(url, name, value) {
var r = url;
if (r != null && r != ‘undefined’ && r != “”) {
value = encodeURIComponent(value);
var reg = new RegExp(“(^|)” + name + “=([^&]*)(|$)”);
var tmp = name + “=” + value;
if (url.match(reg) != null) {
r = url.replace(reg, tmp);
}
else {
if (url.match(“[?]“)) {
r = url + “&” + tmp;
} else {
r = url + “?” + tmp;
}
}
}
return r;
}
var uid = “{$smarty.session.user_id}”;
var ouid = “{$smarty.get.u}”
if(uid!=” && ouid == ”){
window.location.href = UrlUpdateParams(window.location.href, “u”, uid);
}

用chrome模拟微信浏览器访问需要OAuth2.0网页授权的页面

现在很流行微信网页小游戏,用html5制作的小游戏移过来,可以放到微信浏览器中打开,关键是可以做成微信分享朋友圈的形式,大大提高游戏的传播,增强好友的游戏互动。

微信浏览器中打开网页游戏效果还不错,对手机要求不高,而且微信网页游戏不用考虑手机兼容性问题,采用html5,而且大部分手机浏览器,特别是微信浏览器对html5的支持很高。

怎么把别人的微信网页游戏移植到自己的网站上并分享给好友呢?

许多网站的微信网页游戏都设置了判断浏览器,只有使用微信浏览器打开才能访问,这使我们在电脑上打开网址找不到源代码。方法很简单,我们可以伪造微信浏览器HTTP_USER_AGENT,从而在pc上可以访问,这样就可以获取你想要的css,js,html等资源,移植到自己的网站上。

如何伪造微信浏览器HTTP_USER_AGENT

使用谷歌浏览器非常方便伪造微信浏览器HTTP_USER_AGENT,打开你需要伪造HTTP_USER_AGENT的网页,按F12,进入开发者模式,下面默认是显示css调试的工具,你找到下面一排,有个图片所示的地方:

用谷歌浏览器如何伪造微信浏览器HTTP_USER_AGENT

用谷歌浏览器伪造微信浏览器HTTP_USER_AGENT

这里有一个模拟器,既可以设置模拟很多型号的手机设备,也可以伪造你想要的HTTP_USER_AGENT。选择USER_AGENT,选other,微信的HTTP_USER_AGENT是:

在iPhone下,返回

Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B176 MicroMessenger/4.3.2

在Android下,返回

Mozilla/5.0 (Linux; U; Android 2.3.6; zh-cn; GT-S5660 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 MicroMessenger/4.5.255

经过这样的设置之后,你刷新就可以访问之前不能访问的网页了,现在你就是伪装成微信浏览器访问,同时你使用谷歌浏览器查看源代码,就可以找到资源的路径了。

php 异步发送邮件

在某系统里,上传完一个产品的补丁文件或发布产品的更新信息,需要给使用该产品的用户(用户数量较多)发送一封电子邮件,发送后提示发送完毕!

我们常用的PHP代码写法如下:

<?php
// ……
//查找出所有使用该产品的用户email地址,假设存放在$email数组中
for($i=0;$i<count($email);$i++){
sendemail();
}
function sendemail(){
//发送邮件代码
}
//……

假设该次发送100封邮件。本次操作会出现什么结果呢?

用户体验:用户等待->发送邮件完毕->返回信息(这期间极有可能,脚本执行超时)

本次操作由于需要发送大量的邮件,导致php执行时间过长,用户烦躁的等待。当apache或者nginx等待超过允许执行时间,将返回超时错误。这个时候用户不明确本次操作到底成功与否,到底发出了几封邮件。

由此我们可以看出以上代码用户体验极差,并且不能够顺利完成任务。

那么如何解决这个用户体验较差的问题呢?

这里提到一个概念,异步执行

用户体验:用户等待->发送完毕

朋友们就会问,怎么缺少发信环节?

OK,发信环节就在用户提交请求的时候,把发信任务转给了一个单独处理发信的php程序处理了,当用户看见“发送完毕”的时候其实信还没发送完,这个时候,发信程序正在后台努力的工作着,一封一封的向外发送。

<?php
$domain=”www.phpernote.com”;
$url=”/sendEmail.php”;
$par=”email=1@163.com,2@163.com,3@163.com&time=”.time();
$header=”POST $url HTTP/1.0rn”;
$header.=”Content-Type: application/x-www-form-urlencodedrn”;
$header.=”Content-Length: “.strlen($par).”rnrn”;
$fp=@fsockopen ($domain,80,$errno,$errstr,30);
fputs($fp,$header.$par);
fclose($fp);
echo ‘发送完毕’;

PHP中file_get_contents与curl比较

最近做接口项目,总是会用到这两个PHP方法,也查阅了相关的文章,收集了以下这些比对

(1)fopen/file_get_contents 每次请求远程URL中的数据都会重新做DNS查询,并不对DNS信息进行缓存。但是CURL会自动对DNS信息进行缓存。对同一域名下的网页或者图片的请求只需要一次DNS 查询。这大大减少了DNS查询的次数。所以CURL的性能比fopen/file_get_contents 好很多。

(2)fopen/file_get_contents在请求HTTP时,使用的是http_fopen_wrapper,不会keeplive。而curl却可以。这样在多次请求多个链接时,curl效率会好一些。(设置header头应该可以)

(3)fopen/file_get_contents函数会受到php.ini文件中allow_url_open选项配置的影响。如果该配置关闭了,则该函数也就失效了。而curl不受该配置的影响。

(4)curl可以模拟多种请求,例如:POST数据,表单提交等,用户可以按照自己的需求来定制请求。而fopen/file_get_contents只能使用get方式获取数据。

(5)fopen/file_get_contents 不能正确下载二进制文件。

(6)fopen/file_get_contents 不能正确处理ssl请求。

(7)curl 可以利用多线程。

(8)使用 file_get_contents 的时候如果 网络出现问题, 很容易堆积一些进程在这里。

(9)如果是要打一个持续连接,多次请求多个页面。那么file_get_contents就会出问题。取得的内容也可能会不对。所以做一些类似采集工作的时候,用curl做替代是一个比较正确的选择。

总体比较下来,curl请求优化性比file_get_contents是仁者见仁智者见智,不过在对应的环境中还是要选择合适的请求方法最佳。

利用@media screen实现网页布局的自适应

经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,

优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小

只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值

@media screen and (min-width:1200px){
	#page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px}
}

@media screen and (min-width: 960px) and (max-width: 1199px) {
	#page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px}
}
@media screen and (min-width: 768px) and (max-width: 959px) {
	#page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px}
}
@media only screen and (min-width: 480px) and (max-width: 767px){
	#page{ width: 450px; }#content,.div1{width: 420px;position: relative; }#secondary{display:none}#access{width: 450px; }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none}
}
@media only screen and (max-width: 479px) {
	#page{ width: 300px; }#content,.div1{width: 300px;}#secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px}
}