2017年3月
-
小程序的一些注意事项
一、尺寸单位 1. rem 在小程序中规定屏幕宽度为20rem; 如:设计稿为750px宽度,1rem=750/20px= 37.5px , 1px = 1/37.5rem。 在实际的制作过程中,会发现px和rem之前的转化是很累的,因此不推荐使用rem为尺寸单位来制作。 2. rpx(推荐) 这个是微信自己开发的一个尺寸单位。可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。 参考文档 如:在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。 ......
-
使用PhantomJS对网页截屏
PhantomJS 可以看做是一个没有UI界面的webkit浏览器,这个东西用途很广泛,可以用来做网络监控,网页截屏,自动化测试等等,这里抛砖引玉,做个简单的介绍,就主要介绍下它截图的这功能。 1.安装 到官网下载phantomjs.exe,然后复制文件所在路径D:\chrome download\phantomjs-2.1.1-windows\bin(这个是我的路径) ,在环境变量的系统变量中找到path,添加即可,这样就可以在任意地方执行CMD命令操作PhantomJS了。 2.使用 demo.js var page = require('webpage').create(......
-
安卓微信下video最顶层
问题:页面video在安卓微信下最顶层 一般我们做页面视频时,都是点击视频按钮弹出一个遮罩层再播放视频。然而当页面本身有一个视频video时,再点击另外的按钮弹层的时候又是怎样的状况?原先页面如下图: 点击下面的 往期视频按钮 后是弹层播放视频,然而在安卓微信下的打开是这样的。 打开方式错了吧?跟想象不一样哦,页面上的视频在遮罩层上面。。。那么我们第一反应应该是页面上video层级太高了吧,但是发现遮罩层的层级z-index:9999;已经是最高了。what? 但在自带浏览器以及苹果机能够正常显示(页面video在遮罩层下面)。 页面体验链接: https://test.n......
-
ECMAScript 2016 Language Specification (4)
自娱自乐系列,求不黑 4.3 术语和定义 以下术语和定义应用于本文档。 4.3.1 类型 在本声明条款6中所定义的一系列数据值。 4.3.2 初始类型 在条款6中定义的未定义(Undefined),空(Null),布尔(Boolean),数字(Number),符号(Symbol),或者字符串(String)。 特别注意 一个初始数据是直接代表在语言实现中国最低级别的数据。 4.3.3 对象 对象数据类型 特别注意 一个对线工时有一个大度的原型对象和一系列原型的集合。原型可以为空值 4.3.4 构造体 一个函数对象用来创建和初始化对象 特别注意 构造体的“原型”原型是一个用来实现......
-
flexbox布局实践2
1、两端对齐垂直居中 这种布局常用于头部 header{ display:flex; justify-content:space-between; align-items:center; } 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>t......
-
屏幕尺寸、分辨率、倍率到底是什么鬼
目前我们做移动端项目几乎不需要考虑为什么要这样写样式,为什么设计稿上100px我们直接写成1rem,移动端的屏幕尺寸那么多变,为什么能轻松兼容?那我们得从移动端的屏幕尺寸来探索一下其中的原理,首先就得了解这些费解的概念。 我在网上收集了很多资料,众说纷芸,我按自己的理解整理了这篇文章,如果有理解不当的地方,请指正。 屏幕尺寸 即我们通常说的尺寸是多少多少英寸啦,指的是屏幕对角线的长度。比如iphone6的屏幕尺寸是4.7英寸 设备像素DP(device-pixels) 很多地方又叫设备屏幕尺寸、设备物理像素、屏幕分辨率等等,我感觉是一个概念。比如iphone6是1334*7......
-
canvas学习案例之简单的物理运动
这次主要写2种简单的运动效果,包括匀速直线运动、匀加速直线运动。在码代码之前先了解下canvas动画效果的基本实现原理,其核心思想是先定义一个初始状态,然后定义一个定时器,定时器内执行一个方法,在这个方法中要清除当前的画面,然后重新绘制需要变化的效果。由于人眼存在残影,所以短时间内的中断的变化可以看成是连续的变化。 以下代码都是基于下面的html结构 <canvas id="canvas" width="728" height="400"> 你的浏览器不支持canvas,请跟换其他浏览器试一试 </c......
-
我写的代码真的规范吗
前言 在需求的催赶下,终于完成开发,本地编译浏览,看一眼浏览器控制台,嗯!没有报错,开心的提交代码,发布到测试地址,QA测试通过,发布上线。心里暗喜,又完成一个需求单,完美手工! 相信很多人都有这样的经历,做项目经常都是需求赶着自己,加班加点的完成功能开发,盼望着浏览器控制台不要出现红色的报错,惊险的通过QA测试,最后期盼着能够按时完成成功上线。 很明显,自己在日常需求开发中,更多的是关注功能能否实现,效果能否实现,按时上线能否实现。这样的技术人生是不是太没追求了呢?作为一名开发,是不是还要考虑自己的代码是否足够规范,是否足够强壮,是否有性能隐患呢? 控制台没报错,功能正常并不......
-
CORS跨域资源共享
前言:最近在后期优化梦幻西游手游图库项目的时候,遇到一个H5跨域请求接口的需求。 CORS-Orign Resource Sharing(CORS)既跨域资源共享,众所周知,浏览器有个同源策略,为了处理跨域请求,一般用JSONP,设置documet.domain降域,CORS等方式。 跨域资源共享协议标准通过声明一系列http标准头,让服务器能声明哪些来源可以通过浏览器范围服务器的资源。特别那些会对服务器数据造成影响的方法,标准要求浏览器要先以OPTION方法去发送一个预请求去获知服务器对跨源请求所支持的HTTP方法。以下就会分两种请求进行讨论。 1.简单请求 简单来说,就是一些请......
-
关于小组页面脚本错误捕获
平时本地或者测试环境开发,我们都能在调试面板之类的很直观看到脚本错误,出什么错,在哪,错误定位,一目了然,还能断点调试,这部分错误,一般会在开发以及QA测试阶段,就能大部分发现与修复。但是,如何捕获发现线上用户的错误呢?用户的网络、浏览器、电脑、手机等千奇百怪,总不能每次都远程用户电脑看一下它的Chrome吧? 一、如何捕获错误? 1、全局方式 window.onerror函数,可以捕获追踪全局的脚本错误,只要报错了,就会调用此函数,函数具体使用参数如下: window.onerror = function(msg,url,line,col,errorObj){ ......