-
小程序的一些注意事项
一、尺寸单位 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){ ......
-
Augmented Reality
噔噔！一个类似阴阳师现世抽卡的小demo，由于getUserMedia的兼容性问题，目前只有安卓手机可以看到...（建议拿一些高端点的安卓机） 玩法：扫左图的二维码后，点击允许访问摄像头后，再扫右边的二维码（相当于阴阳师里的召唤阵） 或者你也可以拿另外一台手机扫下面的码来显示召唤阵 下面探索一下其实现的原理，其中主要的交互包括： 开启摄像头 > 扫码 > 显示模型 转换为相对应的技术，奏是... · getUserMedia，开启摄像头获取设备的媒体信息 · OpenCv，js-aruco, 图像处理，识别二维码 · 画出3d模型，threejs，three......
-
createjs库easeljs模块，实现粒子浮动效果（有大小、旋转、透明度变化）
最近有项目需要用到粒子浮动效果，套用组内已有的粒子浮动组件，效果明显达不到预期。so爬了下国外一页面，该页面的粒子浮动效果，使用了createjs库easeljs模块实现。以下（下文）整理了下来。 页面效果：http://f7.163.com/ （参考国外页面：http://asterisk-war.com/） html代码： <canvas id="hexaGround" height="907"></canvas> <script charset="utf-8" src="......
-
flexbox布局实践1
1、子元素等分 这种布局常用于底部的导航或者tab等分 ul{ display:flex; } li{ flex:1; } 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>test1</title> <style> ......
-
简单的canvas绘图demo
最近在看canvas基础知识，刚学完绘制路径、矩形，设置线条、颜色、样式和阴影等，就想码下demo巩固下基础知识。于是网上搜了，找到了绘制XP壁纸的例子，里面用到了前面说到的各个知识点。好了，进入主题了。 html代码： <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">浏览器居然不支持Canvas?赶快换一个吧！！</canvas> js代码： window.onload = fu......
-
解决thinkjs开发jsonp接口返回Unicode时的问题
前言 第一次使用thinkjs写后端，踩了不少坑，其中有一个坑想了很久，无奈网上关于thinkjs的教程还是偏少，问了不少人，耗时很久，所以在这里mark下。 问题 需求很简单，后端返回通过接口把数据返回给前端，因为考虑到跨域问题，接口选择采用jsonp形式。其实就是平台平时提供给我们的那些接口，想想自己也能写接口，还是很激动的！类似下面的接口： 然后前端通过ajax请求接口，搞定！thingjs的controller本身就提供各种数据格式返回的封装。 比如，你要返回json格式，直接在controller里使用 async byrefererAction(self){ ......
做有态度的前端团队
网易FEG前端团队
© 2024 FEG-做最好的前端_网易游戏网站服务部前端团队_有态度的互联网前端团队. 由 NetEase 倾情推出.