网站建设

利用JS生成二维码图片,优化WEB性能及页面加载速度

移动互联网的蓬勃发展绝对离不开二维码的“推波助澜”,一张小小的图片,省去了繁琐的苦逼输入,也拉近了PC端和移动端的距离!虽然是东洋人最初发明的,但我还是要给32个赞! 一、意淫场景 2年前接触网站建设后,二维码也进入了我折腾的范围,当时意淫了这样一个场景:当用户首次在别人电脑上看到我们的网站时,突然有事要离开,但是这个网页内容很赞,实在难以割舍,他该怎么办? 我继续意淫了多个解决办法: ①、复制这个网页,通过QQ发送到我的设备(那时候貌似还没有这个功能。。。) ②、收藏到类似QQ云收藏等在线收藏夹,或保存为文本存在云盘,以后再看 ③、死记硬背也要记住这个网页地址,然后回家继续看 ④、赶紧掏出手机,在手机浏览器里面输入网页地址继续看 。。。。 N、尼玛这网页为毛就不能提供一个二维码,让我用QQ浏览器扫一扫继续看呢? 很明显,在这种场景下,网页上如果能提供一个二维码就能给网站增加一个忠实访客,甚至是粉丝。 二、后台实现 我这人把,技术不行,但只要有想法就立马付诸实践,认为技术再难也不会是瓶颈。 博客用的语言是php,因为第一时间用php实现了这个功能,应用到网站就是这个样子: 源码也非常简单,感兴趣的看下:https://zhang.ge/5031.html 三、前台实现 本来这个PHP二维码用得挺好的,反正做了CDN缓存,速度负载都不用考虑。最近在一个国外的网站看一个源码的时候,好奇的看看网页的二维码是什么地址是,发现居然是canvas生成的! 是咯,为毛之前我没想到JS生成二维码这一茬呢? 果然还是想法和见识更重要啊!知道有这个途径,怎么实现基本是小菜一碟了。 顺手百度了一下,果然一堆教程,而且个个历史悠久,看来自己out怪不得别人。 实现很简单,DEMO如下: 丢到SAE试了下,效果还不错:http://atools.sinaapp.com/demo.html 更多参数如下: 四、中文兼容 从分享这个教程的博客那知道,上述JS生成二维码是不支持中文内容的,而少数个人博客可能会使用中文的url路径,那么就不适用了。 其实,要解决也挺简单,只要二维码编码前把字符串转换成UTF-8即可。 博主也提供相关JS转换代码: 因此,如果内容含有中文,就需要用这个函数先转码,比如前文的DEMO修改如下: 参考文章:http://suflow.iteye.com/blog/1687396 五、Begin主题 Ps:哈,突然发现鸟哥博客已经用上了,看来我们想到一起去了,相信begin新版本就会集成。 说了半天代码和demo,可能还是有很多朋友不会用,下面再简单介绍下把js生成二维码集成到Begin的方法。 Begin还是在上几个版本就已经集成了二维码图片功能,不过用的是外部api生成的,加载速度差强人意。当然,到了张戈博客,第一时间就换成了自建的php二维码api了。 现在get到了新技能,所以我也第一时间也将博客的二维码改成了js方式了,修改很简单: ①、加载js代码: 将上述代码添加到Begin主题的header.php或footer.php当中(也可以将上述js文件的内容合并到主题的全局js,比如scripts.js)。 ②、修改php代码: 编辑 begin/inc/scroll.php 这个文件,如下修改即可: 每个<li>代表一个按钮,上下位置自行按需调整即可。全部完成之后,彻底刷新各种缓存,就能看到前文贴图一样的效果了!其他主题只需参考折腾即可。 Tips: 上述代码也未加入中文兼容,如有需求,只需要继续增加兼容中文的 js 代码,然后把 content = window.location.href; 改成 content = utf16to8(window.location.href); 即可搞定。 六、兼容方案 前几天,鸟哥反馈我博客在IE8会导致整个浏览器卡死的问题!我苦逼定位了2个多小时才搞定! 定位方法非常苦逼: ①、先移除所有JS,测试依然卡B ②、移除wp_footer()输出,测试依然卡B ③、移除wp_header()输出,好了!! 尼玛,发现问题出现在头部输出里面,于是分别开启和关闭头部输出,得出头部输出内容,然后一项一项添加上去看是否会卡B。 最终,发现居然是一个我自定义的CSS代码导致的???原来是一个CSS属性的大括号被我写成了中文符号},真是R了狗了。。。 在测试中,我发现IE下无法生成二维码,于是脑补了下,发现IE不支持canvas模式,只支持table模式。 因此多写一个判断搞定: Ps:没错,这也是史上最短的IE判断,大家可以记录下,以备后用。 等使用table模式后,发现生成的二维码惨不忍睹,而且还扫不了: 后来和鸟哥交流的时候,他说是这主题table样式有冲突,重新下指定下二维码的table属性即可: 其实,table模式就是黑白表格组合原理,主题定义的表格样式把qrcode生成的二维码搞成了鬼样。 Ps:此项修复已加入到上一步Begin代码中,其他主题请自行参考。 七、对比分析 本文介绍的二维码是每个页面动态生成的二维码,扫码后打开的也是当前页面,但是不管是静态还是动态,图片加载的方式总是要产生一个http 请求的,当页面处于海量访问时就会带来一定的负载了。。。 但是,如果使用js生成二维码的方式,这图片就在前台浏览器生成的了。抛开JS的兼容性不说,在海量请求场景应该可以极大的减少http请求量吧? 当然,JS生成方式需要多载入一个Jquery.qrcode.min(通用JQ一般都有,就不算了)。看了下,这个JS只有13KB: 而且,我们完全可以把他合并到其他JS当中,那就连http请求都省了!可见,换成JS方式的性价比还是比较可观的!当然,JS的兼容性就另说了,这里就不多说了,感兴趣的可以试试。
阅读全文
资源分享

分享张戈博客自用的php网址在线转换二维码的API源码

最新补充:博客已分享性能最好的js生成二维码方案==>传送门 去年张戈博客曾分享过一篇与二维码API有关的文章:《分享几个可用的二维码API,以及给博客添加文章二维码图片的方法》,由于第三方二维码API总感觉稳定性和自定义性稍差,所以就到网上爬了一下相关代码,自己搭建了一个二维码API,用了几个月感觉良好,完全可以满足我博客的自定义需求。至于博客二维码这个功能是否鸡肋,那就仁者见仁智者见智了。我个人认为,在这个移动互联网飞速发展的时代,抢占先机,做好移动端的用户体验至关重要! 这个功能不是原创,而且百度一搜一大把,都不好意思拿来分享一二。最近看到有网友留言,想要我分享这个二维码API源码,鉴于博客分享初衷,就厚着脸皮贴出来了。当然,不止是那个qr code类,而是搭建成品的整体代码或心得,毕竟张戈博客存在的目的就是尽力降低各类IT教程的使用门槛(哈,是不是感觉很高尚...)! 一、PHP 代码 将以上代码保存为php文件(比如qr.php),上传到网站指定目录(比如根目录 /)。 二、QrCode类 下载PHP的QrCode类,上传到网站目录,其实百度一搜一大把,还是贴上张戈博客自用的文件吧! Ps:以上相关代码均已包含在内。 三、CDN 加速 因为这个API是在线生成的,如果请求过于频繁,将会影响到服务器性能和加载速度。所以,我们有必要继续优化一下。我个人想到3个解决方案: ①、每生成一个新的二维码图片就缓存一份到服务器,下次若是相同的内容,将直接读取; ②、利用伪静态重写请求地址,伪装成静态文件格式,比如png、jpg等,然后开启免费CDN; ③、结合①和②,实现伪静态+CDN加速+浏览器缓存加速,达到优化加载速度。 目前张戈博客仅使用了第 ② 种方案,已完全可以满足博客的需求,所以就懒得去折腾更完善的方法,感兴趣的童鞋可以自己去试试,下面说一下伪静态规则。 张戈博客将这个API搭建在万网的免费虚拟主机上,所以仅分享Apache伪静态规则,其他WEB服务器请自行解决。 Apache伪静态规则: 注:以上是将API源码上传到网站根目录下的 qr 文件夹的例子! 伪静态之后,这个二维码地址就是一个正常的 png格式了,只要到免费CDN(比如百度云加速或360网站卫士等)开启静态资源缓存即可实现CDN加速。 四、使用范例 直接访问本文第一段代码所保存的文件就能看到简单的使用说明了: 查看效果:http://seo.zgboke.com/qr/0_l_3_https://zhang.ge_cdn.png 按下F12,到 NetWork 选项卡查看头部已经可以看到百度云加速的HIT缓存标识了! 至于如何应用到博客当中,请移步查看张戈博客以前分享的教程:https://zhang.ge/4609.html
阅读全文
分享几个可用的二维码API,以及给博客添加文章二维码图片的方法 网站建设

分享几个可用的二维码API,以及给博客添加文章二维码图片的方法

最新补充:博客已分享性能最好的js生成二维码方案==>传送门 今天发现之前用的二维码API不怎么稳定了,老是出现图裂无法加载的情况。用的是api.qrserver.com这个API服务,手动访问了几次,发现时好时坏!看来得另找其他可用的二维码API了。还好,互联网总是不缺乏免费服务的,不出几分钟,就让我找到了2个!现在就来分享给二维码需求的朋友! 先简单说下为什么要添加这个二维码:有博友提到这个功能好像没啥用。。。我也觉得确实挺鸡肋的。 还是说一个场景吧:当你看到我博客一篇很有用的教程,却有急事需要立即离开时,这个二维码就派上用场了!你可以用手机扫描页面上的二维码,从而转到手机上留着继续看。也许你会说,还有Ctrl+D收藏,那要是电脑不是你的,比如你在网吧呢?好吧,总体来说,这个功能还是有那么点用的,反正像张戈博客这样放到标题的右侧,也不影响美观(其实,百度分享的分享到微信就是生成二维码,囧~~)。 一、联图 API 接口地址:http://qr.liantu.com/api.php 调用方法:http://qr.liantu.com/api.php?text=https://zhang.ge WordPress代码: 引用参数: 二、JiaThis API 接口地址:http://s.jiathis.com/qrcode.php 调用方法:http://s.jiathis.com/qrcode.php?url=https://zhang.ge/ WordPress代码: 三、快拍 API 接口地址:http://api.kuaipai.cn/qr 调用方法:http://api.kuaipai.cn/qr?chl=https://zhang.ge/ WordPress代码: Ps:以上三个API都是国内的,速度都非常快,其中联图的可以使用参数来规划二维码图片样式,而后面2个API是从各自的【分享到微信】功能中扒皮出来的,所以并未提供二维码大小的控制,也可能是我不知道吧,有知道的朋友欢迎告知!国内免费内的二维码API肯定还有很多,暂时就整理这几个,已经够用了。如果发现其他更好的二维码API,我会继续补充,同时也欢迎你来留言告知! 四、文章二维码 要让文章页面生成相应的二维码图片,只要从以上代码中选择一个,添加到WordPress主题文章模板文件single.php的相应位置即可。这样,每个文章页面都能生成一个相应的二维码图片的,用户用手机一扫就能转到手机访问,非常方便! 比如,张戈博客就是将这个代码放到了标题旁边,效果还是不错的!具体放到哪,就看自己心情了。多调试几次,找到最满意的位置保存即可! 五、自己DIY 晚上闲的无聊,利用phpQrCode类自己写了一个二维码API,本来打算放到自己博客的,后来考虑了一下,还是先放到SAE上好了,免费资源的不用白不用,而且速度不比上面分享的API慢,而且可以简单的定制样式! API地址: http://seo.zgboke.com/qr/ 参数及范例: WordPress调用代码: 呵呵,还是用自己做的最好,用的安心,看着顺心! 最新补充:此API源码已在张戈博客公布,感兴趣的请前往获取==>传送门
阅读全文
二维码离线生成工具PsQREdit-Chinese 资源分享

二维码离线生成工具PsQREdit-Chinese

智能机普及的同时,二维码也跟着火了,不知道各位看官跟上节奏了没?比如下面这个图,你扫过没? 好吧,我承认我又打广告了。。。咳咳咳,赶紧进入正题了。。 二维条码/二维码(英文名:QR Code) 是用某种特定的几何图形按一定规律在平面(二维方向)分布的黑白相间的图形记录数据符号信息的。(引用于百度百科),而移动端上的软件只要通过摄像头扫描二维码图片,就能转换成相应的信息,比如名片,网址,甚至支付宝链接等等,非常的方便!比如安卓手机(水果的买不起,就不说了吧~),大部分的第三方浏览器(比如UC、360浏览器)都已集成二维码扫描,还有一些专门的二维码软件,比如快拍二维码,我查查比价等软件,大伙是安卓手机的都可以去试试看。   个人用二维码用的比较多,因为公司很多外部网站不能上,更别提QQ之类的通讯工具了,只能用手机上网,那这时候就有个小麻烦了,很多网站或下载的链接都是非常长的,这时候你要从PC端转移到手机上查看,难不成你要用手机一个一个字母去敲?这时二维码就进入了我的视野,可以将网址转换成二维码图片,然后在手机用UC浏览器扫一下就可以转到手机继续浏览公司无法浏览的内容,相当的方便! 转换的方法也很简单,在百度搜索一下二维码生成器,然后一般第二个百度flash应用就会有这种工具了。而网络不好的情况下,这种在线生成就会很慢,可能都打不开!于是继续爬互联网,终于找到了一个离线的二维码生成工具:PsQREdit-Chinese.exe,此软件不但可以制作二维码,还能直接识别二维码(图片文件),而难得可贵的还是绿色单文件版! 利用它,可以把网址、文字、名片、通讯录等内容转换为二维码图片,而这一切都是离线的,不需要你联网,是不是相当棒? 好了,废话不说,直接贴上下载地址,至于怎么用各位下载了看看就会了!
阅读全文