风吹走了我

手机网站的宽度自适应

如何设置使得手机网站的宽度能够自动适应手机屏幕的大小呢?下面介绍两种方法解决这个问题。

方法一:

在网页的<head>中增加如下这段代码,可以让网页的宽度自动适应手机屏幕的宽度。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />

其中:

width=device-width :表示宽度是设备屏幕的宽度

initial-scale=1.0 :表示初始的缩放比例

minimum-scale=0.5 :表示最小的缩放比例

maximum-scale=2.0 :表示最大的缩放比例

user-scalable=yes :表示用户是否可以调整缩放比例

如果希望打开网页就自动以原始比例显示,不允许用户修改的话,则将以上代码修改为:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no” />

方法二:

把页面最顶部类似下面这段代码:

<!DOCTYPE ……..>

替换为:

<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

注:此方法在iPhone下横屏时宽度会超过屏幕宽度出现滚动条,解决方法就是加上方法一的代码。

如何判定用户是否关注微信公众号

if (empty($openid)){
        if (empty($_REQUEST["code"])) {
            $url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=".$APPID."&redirect_uri=".$redirect_url."&response_type=code&scope=snsapi_base&state=blinq#wechat_redirect";
            echo $this->assign('url', $url)->fetch('redirect');
            return;
        }else{
            $code = $_REQUEST['code'];
        
            $APPID = C("APPID");
            $SECRET = C("SECRET");
            $accessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" . $APPID . "&secret=" . $SECRET . "&code=$code&grant_type=authorization_code";
            $ch = curl_init($accessTokenUrl);
            curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 5.1; rv:21.0) Gecko/20100101 Firefox/21.0');
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
            $info = curl_exec($ch);
            $dataJson = json_decode($info, true);
            $openid = $dataJson['openid'];
            $userdata = $table->get_subscribe_res($openid);
            $subscribed = $userdata['data']['subscribed'];
            if($subscribed){
                session("openid", $openid);
            
            }else{
                $url="http://www.oschina.net/code/step1?catalog=";
                echo $this->assign('url', $url)->fetch('redirect');
                return;
            }
        }
    }

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}
}

前端优化之图片小述

<img src="small.jpg" data-fullsrc="large.jpg">

Date-fullsrc是html5中的一个定义文件的属性,宽度超过480px的屏幕,就会加载较大分辨率的图片(large.jpg),小屏幕分辨率的就会加载较小的图片(small.jpg)。

提升页面大小的效率,不仅仅是取决于使用精灵或是压缩代码,给定页面的请求数量在前端性能中也占有了很不小的重量。减少请求可以让你的网站加载更快,而其中一种减少页面请求的方法就是用Data URI代替图片的src属性:

<!-- 以前的写法 -->
<img src="http://images.cnblogs.com/logo.png" />

<!-- 使用data URI的写法 -->
<img src="data: image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fH ...." />

<-- 范例:  http://davidwalsh.name/demo/data-uri-php.php -->

当然页面大小会增加(如果你的服务器使用适当的gzip内容,这个增加会很小),但是你减少了潜在的请求,同时也在过程中减少了服务器请求的数量。现在大多数浏览器都支持Data URI,在CSS中的背景骨片也可以使用Data URI,因此这个策略现在已经可以在应用层级,广泛应用。

根据屏幕宽度自动缩放图片大小

在开发中,我们经常遇到需要适配屏幕宽度的应用,比如图片自动缩放到适合尺寸。

<script>
    window.onload = function () {
        ReImgSize();
    }
</script>
<script type="text/javascript" defer>
    function ReImgSize() {
        var clientWidth = document.body.clientWidth;// window.innerWidth; //
        //首页主体背景
        var indexH = 747 * clientWidth / 640;   
		$(".default img").css("width", clientWidth * changeTwoDecimal(600 / 640));		
    }

    function getElementsByClassName(classname) {
        var children = document.all; 
        var elements = new Array(); 
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            var classNames = child.className.split(' ');
            for (var j = 0; j < classNames.length; j++) {
                if (classNames[j] == classname) {
                    elements.push(child);
                    break;
                }
            }
        }
        return elements;
    }

    function changeTwoDecimal(x) {
        var f_x = parseFloat(x);
        if (isNaN(f_x)) {
            alert('function:changeTwoDecimal->parameter error');
            return false;
        }
        var f_x = Math.round(x * 100) / 100;
        return f_x;
    }
</script>

使用PHP的框架ThinkPHP必须要掌握的程序开发调试手段

使用ThinkPHP应该掌握的调试手段

经常看到有人问到findAll的返回数据类型是什么之类的问题,以及出错了不知道什么原因的情况,其实还是没有熟悉ThinkPHP内置的调试手段和方 法,抛开IDE本身自带的调试方式不说,如果你正在用或者打算用ThinkPHP开发的话,那么下面一些和调试相关的方法你是应该要了解和掌握的:
1、在项目配置文件里面打开调试模式DEBUG_MODE,这样能够让你发现大部分的错误原因
2、如果不想使用调试模式,可以单独开启页面Trace显示。发现很多人不想使用调试模式的原因居然是因为有页面Trace信息的输出,其实这里面有一个 误区,以为调试模式就一定会有页面Trace,但其实调试模式和页面Trace没有必然的关系,只是因为打开调试模式后,系统默认的调试配置文件会开启页 面 Trace显示,所以你完全可以给项目单独定义调试配置文件。
3、使用系统定义的dump函数,该方法同var_dump可以输出任何类型的变量信息,而且更加有利于在浏览器里面查看,例如:

    $User = D(“User”);$list    = $User->findAll();dump($list);

4、页面Trace信息只能显示当前页面执行的sql语句,但无法查看ajax方式执行的后台操作里面的sql语句,所以你还可以开启sql日志记录 SQL_DEBUG_LOG 来记录每一条执行的sql语句,并且可以查看到每条sql语句的执行时间 sql日志文件位于Logs目录下面,会自动按日期来区分每天的sql日志。
5、另外一个是在执行某个数据操作后怀疑sql执行有错误的话,可以使用模型类的getLastSql方法来查看上次执行的sql语句,以便分析具体的错误原因。例如:

    $User = D(“User”);$User->id = 3;$User->name = ‘ThinkPHp’;$User->save();echo $User->getLastSql();// 输出 update think_user set name=’ThinkPHP’ where id=3;

6、当需要调试某段代码的运行时间的时候,可以使用系统提供的debug_start($label)和debug_end($label)方法,例如:

    debug_start(‘demo’);// 这里是你的代码段…….debug_end(‘demo’);