分类 总结 下的文章
-
关于使用Koa2的点点滴滴
Koa是基于Nodejs的一个后端框架，算是比较常用的，核心思想就是中间件，Koa实现底层逻辑，其余的就需要自己实现，包括：session、数据库操作、文件上传、路由、模板、静态资源访问等 前言 一直以来都是使用thinkjs这个框架，集成很多功能，基本上就只需要负责写逻辑就OK了，所以想尝试一下Koa这种需要动手逐个实现功能的，类似也有express 这里并不打算写新手教程，可自行百度，只是写使用过程中遇到的一些疑惑 下面代码基于ES6、7 1、安装 官网推荐使用Nodejs >= 7.6的版本，小于这个版本需要采用babel方式曲线救国 实际使用发现，用了babe......
-
整理国外分享和登录方式
facebook分享代码(直接拼接分享地址的方式) var fbHref = '分享地址'; $("#Jfacebook").on("click", function() { var _uri = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(fbHref) +"&display=popup&ref=plugin&src=share_button"; window.op......
-
Fiddler调试总结
前言 Fiddler无疑是一个很强大的工具，日常工作中着实帮了不少忙，这里总结下它的用处。 请求重定向至本地文件 由于我们早期的一些老旧页面，没有托管在我们的Gitlab上，而是直接存放在FTP，所以修改就没那么方便。有时修改这些页面的js或者css，就用了Fiddler的这个线上调试功能，挺实用的。 打开你要调试的页面，如图左侧，你会看到有各种请求，然后右侧工具栏切换到AutoResponder选项。 选中你要调试的文件（一般是JS，CSS），然后拖拽到如图位置 找到 Find a file选项，选择你要用于线上调试的本地文件，然后点save保存，就可以在本地调试线上......
-
如何更好地对hexo博客管理
很久没搞点事情了，最近一时兴起用Hexo+Github搭建了个人博客。本文就不详细介绍这个搭建的过程了，主要写下如何对Hexo博客做版本控制与持续集成。 Hexo 安装好hexo之后，hexo init得到如下文件，这些就是博客最原始的源文件。 --- |--node_modules |--scaffolds |--source |--themes |--.gitignore |--_config.yml |--package.json source文件夹存放的是md文件，也就是平时我们用markdown语法写的文章。themes文件夹存放的是主题相关的文件，默认的hexo主......
-
在游戏内嵌项目中体验Vue2.0全家桶
前言 最近在做率土之滨海外版的内嵌项目，其实之前已经做过一版，但是需求不是很满意，然后又改了设计，改了功能，最终变成一个小论坛：有发帖、回帖、发帖和回帖都能上传图片、点赞、帖子列表、我的帖子、我的点赞、我的回帖等等功能。来组动态预览图： 相比第一版，增加了几个接口功能。而本次开发使用了Vue2.0 + Vue-router + Vue-resource + Vuex + ES6的组合，原因如下： 之前做过一版，二次开发如果在旧版的基础改会缺少点挑战性，相反正因为熟悉，意味着在项目计划排期内有更多尝试新技术的可能性 vue在社区很火，而其在单页面据说有不错的体验，看起来很适合内嵌......
-
小程序的一些注意事项
一、尺寸单位 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物理像素。 ......
-
屏幕尺寸、分辨率、倍率到底是什么鬼
目前我们做移动端项目几乎不需要考虑为什么要这样写样式，为什么设计稿上100px我们直接写成1rem，移动端的屏幕尺寸那么多变，为什么能轻松兼容？那我们得从移动端的屏幕尺寸来探索一下其中的原理，首先就得了解这些费解的概念。 我在网上收集了很多资料，众说纷芸，我按自己的理解整理了这篇文章，如果有理解不当的地方，请指正。 屏幕尺寸 即我们通常说的尺寸是多少多少英寸啦，指的是屏幕对角线的长度。比如iphone6的屏幕尺寸是4.7英寸 设备像素DP(device-pixels) 很多地方又叫设备屏幕尺寸、设备物理像素、屏幕分辨率等等，我感觉是一个概念。比如iphone6是1334*7......
-
关于小组页面脚本错误捕获
平时本地或者测试环境开发，我们都能在调试面板之类的很直观看到脚本错误，出什么错，在哪，错误定位，一目了然，还能断点调试，这部分错误，一般会在开发以及QA测试阶段，就能大部分发现与修复。但是，如何捕获发现线上用户的错误呢？用户的网络、浏览器、电脑、手机等千奇百怪，总不能每次都远程用户电脑看一下它的Chrome吧？ 一、如何捕获错误？ 1、全局方式 window.onerror函数，可以捕获追踪全局的脚本错误，只要报错了，就会调用此函数，函数具体使用参数如下： window.onerror = function(msg,url,line,col,errorObj){ ......
-
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="......
-
判断iframe是否加载完成小结
在做大话西游经典版新闻内页，有个功能是滚动条下拉到一定位置，自动加载下一篇新闻，由于编码问题，采用了不同的加载下一篇新闻的方式。 页面效果：http://xy2.163.com/news/news/20161129/15205_658163.html 关于编码引起的问题 页面最终显示的编码是有一下四个因素共同决定的： 1）HTTP Header中的"Content-Type"项，服务器端返回编码设置 2）html代码中的meta标签 3）页面文件的保存编码 4）请求服务器设置的编码 HTTP Header中的"Content-Type"......
-
ES6在新图册组件中的应用
ES7都来了，然而我们连ES6都很少用到，基于ES6的不成熟，以及浏览器支持程度问题，导致大家都比较少使用得上它。不过目前日渐更新的浏览器，已经大面积支持ES6的新特性了，即使不支持，也可以使用Babel来进行转换为ES5来执行。此次就运用到Babel来编译，已集成到前端发布工具中，添加即可使用。 1、类定义 以前的做法： function ImageFall(param){ } ImageFall.prototype = {} 怎么看，都不像一个类，怪别扭 class ImageFall{ //构造函数 con......
-
阴阳师日本官网总结
1、最近做阴阳师日本官网，其中有个功能是获取预约人数，设计稿上的人数是这样151,567,000，想了想自己写还有点麻烦，于是网上copy了代码，再修改了下。 其中，有一点需要注意的是：函数中的str是字符串，所以需要把数字进行转成字符串，再传值。 function formatNum(str) { var newStr = "", count = 0; if (str.indexOf(".") == -1) { for (var i = str.length - 1; i >= 0; ......
-
游戏内嵌项目小结
在做率土之滨的游戏内嵌官网时，花了不少时间，也踩了不少坑，本文来总结下，有些经验可以做为此类型项目的借鉴。后面有彩蛋！ 前言 内嵌页面，是指在某个app（游戏）里显示的网页，主要是通过app里面的webview（可以理解为一个浏览器）来展示我们做的网页。理论上内嵌页面和普通页面没多大区别，但是不同的app以及不同系统的app，内置的webview可能会不同，相当于不同的浏览器，所以也会出现一些兼容问题，而这里更头疼的是功能兼容问题，反而样式兼容变得更轻松点，因为不需要考虑各种浏览器（如果该页面只在app里面跑）。 开发过程 关于适配 内嵌页面和普通项目明显不同的表现形式就是横屏展示......
-
移动端小总结
一、常用META 1. 添加到主屏后的标题（IOS） <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式（IOS） 当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-touch......
-
CSS3的3D转换
在做新版本的3d轮播插件的时候，使用到CSS3中的3D转换属性，对各种3D属性做了一些深入一点的了解。 transform-style 官方解释：transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。 我的理解是它是用在一个3D空间的父元素上，其所有子元素处于同一个3d空间坐标内，如果子元素之间有相互交错的层级关系时我都会给父元素加上这个属性，让它们处于同一坐标系中。（以下讨论均基于这个前提） 来一张空间坐标系示意图： 3D转换的层级关系 因为轮播中会有slide叠加的情况，正常情况是后面的层级低于前面的，在这个时候我们的z-index属性将会失去作用......
