文章分类: 前端开发

Javascript,CSS3,HTML5…各种前端开发话题归档

关于网站图片的渐进式加载和懒加载的实现

衡量一个网站SEO做得好不好的一个重要指标,是页面的打开速度,而影响一张网页打开速度的一个很重要的因素,是加载图片的大小。目前网络上流行的两个优化图片的概念,分别是渐进式加载懒加载。一个好的网站,需要同时对图片都做到渐进式加载和懒加载这两种处理。

懒加载,意思是浏览器加载页面的时候先不加载图片,视窗滚动到能显示图片的位置的时候,图片再自动加载。这样可以避免打开页面的同时因为要加载图片,导致的页面打开时间变长的问题。目前主流浏览器已经都可以不用JS实现了,只要给图片加上loading=”lazy”的属性即可。WordPress基本已经替我们自动实现了,只要是通过content或者thumbnail相关的函数调用的图片,WP自动会给它们加上这个属性:

查看详细 »

Sublime Text修改边栏Sidebar的字体大小

这几年我写代码的工具一直都是Sublime Text,这两天给自己的电脑换了一台27寸的4k屏显示器,本想着一屏可以多显示几行代码,还能同时多窗口并列,这样写起代码来因该会很舒服。然而并没有那么简单,现在27寸并不是什么大尺寸显示器,在3840分辨率下,操作系统界面都显得非常“袖珍”,用起来很费眼睛。于是我只能把系统字体调成了150%,解决了大部分软件的界面字体问题。

这里的大部分,就没包括Sublime Text。Sublime Text的代码部分,可以通过Ctrl + +/-灵活调节字体大小,然而左边的文件列表就不行了。于是搜了一下修改方式,这里做个记录。

按ctrl+shift+p打开插件列表,搜索Install Package,等待软件搜索仓库信息(在底部状态栏有提示)。等加载完毕后,再搜PackageResourceViewer,并选中间那个Open Resource。

查看详细 »

H5微信分享JS/后端PHP完整版代码

有差不多一年没有接H5的开发了,最近又接了一个,发现以前写过的微信分享部分不管用了,踩坑,又踩坑了!

首先是服务号的设置问题,我已经在这篇老的博客里更新:https://blog.brain1981.com/1784.html
此处重复一遍更新的内容,IP地址白名单从前可以不填,现在必须填写了,要不然死活调试不出分享,开发者工具会显示无权限获取access_token!
服务号后台必须填写IP白名单

第二个坑是微信已经更改了分享机制,如果你是点击URL进入H5页面,那么这时候即使分享请求正确,分享出去的都只能是一个文本的URL,而不是卡片式的分享格式。相关讨论和通知见这个链接:https://developers.weixin.qq.com/community/develop/doc/0000ea53f1cf60dcfc1da027a55c00
一度我还以为是微信又出了什么隐藏bug,明明debug模式和开发者工具都显示分享请求成功,死活分享不出卡片… 这也是微信的老毛病了,你说它没通知开发者么,倒也不尽然,但这种政策更改的通知就是不给你用白话讲清楚,要你自己去体会效果!

最后一个坑,是暂时没有爆的,但相信很快会爆,之前的两个分享接口 wx.onMenuShareTimeline 和 wx.onMenuShareAppMessage 即将被废弃了。需要换成 wx.updateAppMessageShareData 和 wx.updateTimelineShareData, 调用方式和参数大致没变。注意是大致没变,如果只是照搬替换,很可能又要踩坑,为造福广大苦逼码农,本文直接附上可以直接拿来用的分享代码。 查看详细 »

如何让网页的某些部分内容不被谷歌收录?

如果要阻止搜索引擎索引网站的某个页面,只要将此页面路径添加到robots.txt中。本文要讨论的不是这个,而是要让搜索引擎在收录该页面的时候,不收录这个页面上特定部分的内容。这样做有什么意义呢?举例说明:

比如在JennyStudio网站上,我们对案例页面增加了一段文字说明,这段文字呈现在正文之前,搜索引擎收录该案例页面的时候这段文字会被正文先读取,导致搜索结果的摘要部分显示了这段文字,影响收录效果。而且我们每个案例页面都有这段文字,大量重复段落内容的出现也在另一方面不利于搜索效果,所以我打算不让搜索引擎收录此段文字。

查看详细 »

CSS 3D坐标空间实现研究

先展示研究成果:

今天想研究一下CSS的 3D实现,但又不敢深入三角函数和线性代数的知识(多年前就已还给高数老师了),所以就浅浅地从translateX/translateY/translateZ这3个变换做一个立方体开始。这三个变换函数很简单,关键是要建立固定的坐标系,这样页面的元素就能通过这个坐标系获得立体感。

我的HTML结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="scene">
  <!--方块-->
  <div class="cube">
    <div class="cube-face cube-face-front">1</div>
    <div class="cube-face cube-face-right">2</div>
    <div class="cube-face cube-face-top">4</div>
    <div class="cube-face cube-face-left">3</div>
    <div class="cube-face cube-face-back">5</div>
    <div class="cube-face cube-face-bottom">6</div>
  </div>
  <!--坐标线-->
  <div class="line line-x"></div>
  <div class="line line-y"></div>
  <div class="line line-z"></div>
</div>

查看详细 »

基于WordPress的微信小程序支付功能开发

我在2018年的时候总结过一篇微信小程序支付功能开发与踩坑经验总结,当时因为网上相关文档和资源的缺乏,文章获得了很多关注和转载,并且也有很多人指出了其中的不足。主要不足之处就在于那篇文章把所有的签名字串封装都放到了前端,也就是小程序里,通过JS实现,其中还涉及到了商户key这样的敏感字段,因此是不安全的。不过在3年前微信本身对这块也没有做很严格的限制,比如我把对“https://api.mch.weixin.qq.com/pay/unifiedorder”这个接口的请求放在小程序里,那时候照样是能运行的。

近期,把小程序的基础库改成近期版本后,我发现“https://api.mch.weixin.qq.com/pay/unifiedorder”这个接口的请求已经不能放在小程序里了,即使此域名已经加入到request安全域名下也无效,微信那边会自动把你加入的这个域名过滤掉。这就表示一系列的请求必须放到服务器上完成了。因此我重新整理了一下后端的代码,PHP版本的。并且因为我的微信小程序都是基于WordPress做后端的,索性把自定义的接口这块也缝合过来。

当前最新版调试通过:

打包代码如下: 查看详细 »

填坑 – 关于H5 video标签在各版微信浏览器内的兼容问题

四年前因为开发视频H5的时候踩坑,我写过一篇博客《关于HTML5 video标签在安卓版微信浏览器内被强制全屏播放的问题》。时隔多年,因为微信更新多次,这个坑应该是早已平了(如果还有请留言告知)。由于在那篇博客文末给的腾讯官方解决方案链接也已经失效,在此还是记录一下目前最通用的解决方案吧。

<video id="myVideo" src="..." poster="..." preload="no" autoplay="autoplay" loop="loop" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" x-webkit-airplay="true">
	<source src="..." type="video/mp4" />
	<img src="..." />
</video>

video标签的关键属性和作用

  • webkit-playsinline / playsinline:iOS端默认视频只要一运行就会全屏播放,这个属性允许视频播放不弹全屏,维持在页面原位置播放;
  • x5-video-player-type=”h5″:解除微信浏览器内video自家播放器的绑定;
  • x5-video-player-fullscreen=”true”:是否支持全屏,如果设置为false则在微信浏览器里全屏那个标记不出现,一直维持video标签的尺寸播放视频;
  • x5-video-orientation=”portraint” 视频方向,portraint为竖屏,landscape是横屏,x5-video-player-type=”h5″有效;
  • x-webkit-airplay=”true”:iOS的airplay功能,一般用于投屏到大屏幕上,这个在H5场景下其实用不着

查看详细 »

WordPress前端,自制拖放区域上传文件的轮子

上个月写过一篇WordPress通过Rest API自定义附件上传接口,那篇文章主要介绍了如何打通前后端,利用Rest API保存“抓取”已知URL的文件。不过在更多的情况下,我们还是需要通过自己的表单上传文件。正好这个月有个项目,有个表单需要拖放文件到指定区域里,提交表单的时候上传文件。如果我用Gravity Forms给的文件上传域,它只有原生的点击选取本地的文件组件,并没有拖放选取文件的组件,所以这里就需要造一个轮子了。

先说结果,最后实现出来是这样子的:
WordPress前端,自制拖放区域上传文件的轮子

文件拖到区域上方,区域会变色;拖入后区域内显示文件名,判断文件格式和尺寸是否合规;点击清除,会重置区域。


查看详细 »

WordPress AJAX玩法,通过自带的AJAX钩子和通过Rest API两种方法对比

更新于2020年5月2日:本文第一版有一些概念错误,现已修正

基于WordPress项目的开发中,经常会需要用到AJAX请求。相较于原生的前后端实现,WordPress其实提供了两种方法可以更便捷的实现AJAX。

WordPress自带的AJAX钩子实现AJAX

这个方法是现在用的比较多的。原理是前端向“/wp-admin/admin-ajax.php”这个接口发送请求,这个接口会根据请求的action值来处理数据。而根据不同的action值,利用钩子“wp_ajax_nopriv_[action]”和“wp_ajax_[action]”去编写自己的程序处理和返回数据。
如果是要写数据,先在页面生成nonce:

1
$xprofile_nonce = wp_create_nonce ('xprofile_nonce');

查看详细 »

微信小程序支付功能开发与踩坑经验总结

2021年3月11日更新:
本文虽受到一定关注,但时隔3年多,其中代码以及安全性都已过时,为避免各位踩坑,请移步我的另外一篇文章:https://blog.brain1981.com/2354.html
本文评论区大家所提出的其他问题,也都已在这篇博客列出的代码中解决,如果你不是用WordPress也没关系,其中PHP部分稍加修改即可使用。


以下是原文:

早有耳闻微信小程序的支付功能开发是一步一坑,这两天果然踩了个遍。除了简要到令人愤怒的官方文档外,网上所有能搜到的相关文章,也没有任何一篇提供的代码是能够顺利跑通的。好在还有一部分前人的经验可以吸取,再加上个人的一点直觉引导,终于在凌晨的时候真机测试通过。

趁热打铁把踩过的坑罗列一遍,最后会附上真机跑通的代码。

首先是小程序支付功能的申请。在半年前我有另一个小程序项目,虽然当时没有开通小程序微信支付的需求,但是我留意过应用号(小程序号)后台微信支付的相关选项。当时,这个小程序因为绑定过已认证的服务号,因此小程序支付是可以直接申请的,无需任何费用。但是这次的项目,同样是另一个已经绑定过认证服务号的小程序,在微信支付界面,提示我要认证当前的小程序号才能开通微信支付,也就是说,绑定服务号还不够,必须把这个小程序号也交300元认证后,才给开通支付功能!真的很坑,好在客户没有什么怨言,非常配合地就把认证给办了…

一天后小程序号认证通过,就有了申请支付的入口:

果断选右边那个,根据给出的提示,到商户平台里面用小程序的appid绑定就行了。 查看详细 »