文章分类: 前端开发

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

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

如果要阻止搜索引擎索引网站的某个页面,只要将此页面路径添加到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/unifiedorde”这个接口的请求放在小程序里,那时候照样是能运行的。

近期,把小程序的基础库改成近期版本后,我发现“https://api.mch.weixin.qq.com/pay/unifiedorde”这个接口的请求已经不能放在小程序里了,即使此域名已经加入到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绑定就行了。 查看详细 »

CentOS7.4安装新版node.js过程记录整理

发现阿里云的云主机可以按最短一周时常购买了,以后做测试环境,花点小钱买台短期主机做测试的成本又降低了(虽然ECS总体还是涨价了)。这次想尝试一下在最新的CentOS下安装node.js会不会踩坑,于是开干。

在失败了多次,东拼西凑了很多文章和教程后,终于把nodejs(8.7.0)给装上了,下面整理所用命令行以及过程。 查看详细 »

ES6学习笔记 – 字符串和数值扩展

记录一下几个简单的ES6的字符串和数值方法

字符串扩展

字符串查找(当前版本Chrome已支持)

let a = "hello world!";
a.startsWith("hello"); //true
a.endsWith("!"); //true
a.includes("w"); //true
 
//第二个参数表示搜索位置索引
a.startsWith("ello" , 1); //true
a.endsWith("hello" , 5); //true
a.includes("hello" , 5); //false

查看详细 »

ES6学习笔记 – let、const和块及作用域

最近粗略看了一下ES6的一些特性,如果运用成熟,写JS的感觉将比ES5要愉悦很多。随着微信小程序开发量的增加,自己也觉得是时候拿起ES6了。买了一本阮一峰的《ES6标准入门》,从第二章开始慢慢看了起来。在自己的博客上也整理一些笔记,记录学习轨迹。

let 和 const 命令声明的变量,有严格的块级作用域限制,当前{}内声明的变量,在当前{}外无法使用;同一作用域下在变量声明之前,也不能使用;否则都会报错。另外,不允许重复声明同一变量。

for(let i=0 ; i<3; i++){
  let i="a";
  console.log(i); //输出三次a;在()内声明的i和在{}内声明的i并不在同一作用域内
}
console.log(i); //报错

查看详细 »