军 发布的文章
-
使用chrome extension解决gitlab在线编辑时输入中文出现错乱的问题
先上一张gif效果图： 我们团队内部搭建了gitlab作为代码托管，目前的版本是GitLab Community Edition 8.17.5 9a564a8，在升级到这个版本时，发现在chrome下，在线编辑无法正常输入中文了，出现如上动图的错乱效果，而在firefox是正常的。 一开始怀疑是chrome更新版本后的问题，但是github的在线编辑是正常的，后来通过chrome开发者工具debug，发现是gitlab使用的在线编辑器有问题。无论gitlab还是github，这种在线编辑代码都是借助于一些web编辑器实现的，比如aceeditor，而这里gitlab用的正是ace......
-
Babel插件在fis项目中遇到的问题
博客断了几个月了，抽空整理下Babel使用遇到的问题~ 随着ES6/7的发展和普及，越来越多的项目开始使用它们的新语法，但考虑到兼容问题，目前主流方法是在开发是时候使用新语法，然后通过Babel编译转换成ES5执行。 而我们小组使用的fis3自动化构建工具，而对应的babel编译插件是使用fis3-parser-babel，下面简单说下安装流程： 如果你本地还没安装有该插件，可以直接npm全局安装 npm install -g fis3-parser-babel 安装成功后，在fis配置文件配置使用： //直接在通用配置上配置即可 fis.match('**.js', { ......
-
移动端的Developer Tools
20171013更新 vConsole官方更新到了v3.0.0。需要手动初始化才能启动（之前是直接引入vconsole的js就会自动初始化）。 // 初始化vConsole window.vConsole = new window.VConsole(); （以下是正文。。。） 移动端的调试一直很头疼，目前的一些主要调试手段有如下： 1、直接更新到测试地址 这种算不上什么调试手段，只是最原始的方式，每次修改都要更新到测试地址，然后手机访问测试地址看效果。因为手机没有像chrome那样的控制台，所以js调试基本都是通过alert打断点。 优点： 对手机连接网络没限制，随便一台真机都可......
-
在游戏内嵌项目中体验Vue2.0全家桶
前言 最近在做率土之滨海外版的内嵌项目，其实之前已经做过一版，但是需求不是很满意，然后又改了设计，改了功能，最终变成一个小论坛：有发帖、回帖、发帖和回帖都能上传图片、点赞、帖子列表、我的帖子、我的点赞、我的回帖等等功能。来组动态预览图： 相比第一版，增加了几个接口功能。而本次开发使用了Vue2.0 + Vue-router + Vue-resource + Vuex + ES6的组合，原因如下： 之前做过一版，二次开发如果在旧版的基础改会缺少点挑战性，相反正因为熟悉，意味着在项目计划排期内有更多尝试新技术的可能性 vue在社区很火，而其在单页面据说有不错的体验，看起来很适合内嵌......
-
我写的代码真的规范吗
前言 在需求的催赶下，终于完成开发，本地编译浏览，看一眼浏览器控制台，嗯！没有报错，开心的提交代码，发布到测试地址，QA测试通过，发布上线。心里暗喜，又完成一个需求单，完美手工！ 相信很多人都有这样的经历，做项目经常都是需求赶着自己，加班加点的完成功能开发，盼望着浏览器控制台不要出现红色的报错，惊险的通过QA测试，最后期盼着能够按时完成成功上线。 很明显，自己在日常需求开发中，更多的是关注功能能否实现，效果能否实现，按时上线能否实现。这样的技术人生是不是太没追求了呢？作为一名开发，是不是还要考虑自己的代码是否足够规范，是否足够强壮，是否有性能隐患呢？ 控制台没报错，功能正常并不......
-
解决thinkjs开发jsonp接口返回Unicode时的问题
前言 第一次使用thinkjs写后端，踩了不少坑，其中有一个坑想了很久，无奈网上关于thinkjs的教程还是偏少，问了不少人，耗时很久，所以在这里mark下。 问题 需求很简单，后端返回通过接口把数据返回给前端，因为考虑到跨域问题，接口选择采用jsonp形式。其实就是平台平时提供给我们的那些接口，想想自己也能写接口，还是很激动的！类似下面的接口： 然后前端通过ajax请求接口，搞定！thingjs的controller本身就提供各种数据格式返回的封装。 比如，你要返回json格式，直接在controller里使用 async byrefererAction(self){ ......
-
FEG Snippets - Sublime Plugin
20170116更新 目前最新版本是v1.0.6，新增了cms新闻系统的常用代码块。可以敲fegcms开头，就会快速找到cms相关代码片段。 cms html代码片段 fegcms-keywordInfos：新闻内页关键字列表 fegcms-kindTraceInfos：新闻内页面包线 fegcms-list：新闻列表 fegcms-news：新闻详情 fegcms-pages：新闻分页 fegcms-reNewsInfos：新闻内页相关新闻 fegcms-resourceInfos：新闻内页图片或者视频列表 fegcms-list-old：新闻列表（旧版） fegcms-news......
-
sticky解决粘性交互在微信的问题
前言 粘性交互 指的是某个模块在页面滚动到指定位置时脱离页面不再顺页面滚动而滚动，而是处于屏幕某一固定位置，变成fixed状态，粘着屏幕某一边缘。这种交互经常用到一些导航，比如《大话西游》手游移动官网，效果请看下面动图示意： 这种交互的主要逻辑是：导航模块默认是普通流体布局，然后监听window的scroll事件，当页面滚动到导航模块的位置时把导航改成position:fixed状态并调整模块的显示位置即可。在大部分浏览器没什么问题，但是微信对scroll这高频事件做了处理，即使你绑定了scroll事件，在滑动屏幕时也要等页面滚动完后才会执行。所以在微信下这种粘性交互是不流畅的：......
-
游戏内嵌项目小结
在做率土之滨的游戏内嵌官网时，花了不少时间，也踩了不少坑，本文来总结下，有些经验可以做为此类型项目的借鉴。后面有彩蛋！ 前言 内嵌页面，是指在某个app（游戏）里显示的网页，主要是通过app里面的webview（可以理解为一个浏览器）来展示我们做的网页。理论上内嵌页面和普通页面没多大区别，但是不同的app以及不同系统的app，内置的webview可能会不同，相当于不同的浏览器，所以也会出现一些兼容问题，而这里更头疼的是功能兼容问题，反而样式兼容变得更轻松点，因为不需要考虑各种浏览器（如果该页面只在app里面跑）。 开发过程 关于适配 内嵌页面和普通项目明显不同的表现形式就是横屏展示......
-
再聊PC页面适配
今年3月份写过一篇《聊聊PC端页面适配》文章，里面主要谈到一些对pc端页面做适配的看法以及方法（百分比和js检测）。最近在做劲舞团的官网，再次遇到了适配这个点，而且把适配要求提得更高点。所以这次咱们再来聊聊~ 适配考虑的方法主要还是之前文章说的两种，那么劲舞团官网遇到的适配新挑战是什么呢？ 1、需要适配的尺寸有明显的区间区分 2、不一样的布局和交互：横向双屏布局以及横向滚动切屏交互 先来个整体的布局示图： 适配区间分析 因为页面是分两屏的设计，这里的适配区间需要考虑两层：第一层是浏览器可视区域的大小变化下，页面左右两屏的宽度适配；第二层是当左右屏宽度发生变化后，左右两屏里面......
-
关于魅族机子自带浏览器下视频弹层无法关闭问题
20170720更新 最近发现下文提到的解决方案有点问题估计是魅族系统有更新了。而且下文的demo地址已经无法访问。 新的解决方案如下（其实是按照下文的方案二来改的）： 定位加transform来实现居中 .m-video-con{ position: absolute; top: 0; //这里是关键，设置50%时就关闭不了了 transform:translateY(100%); -webkit-transform:translateY(100%); } 新的测试地址：http://test.nie.163.com/lj/video.html 之前做移动端......
-
input的placeholder字体大小无法修改？
今天碰到一个令人头疼的问题，一个输入框的placeholder显示的字体大小无法修改，很是奇怪，折腾半个小时，get到了一项自己未发现的新技能，下面慢慢道来。 先上图： 如图，一个普通的input输入框，然后设置了placeholder属性，然后需求是想修改placeholder显示内容的字体大小。我们看到上面其实已经设置了16px，按常理，placeholder的内容字体大小是继承其input大小的，所以习惯性去修改那个16px，结果失败。前往测试地址》》 第一反应，就是当前的设置被覆盖了，所以无论如何修改也无效。因为是非自己页面，在线debug通过chrome的开发者工具找了......
-
chrome工具优化的学习小结
前言 这个月一直不知道写什么，说明没认真学习啊~但是之前花了不少时间去维护chrome检查工具，没点总结，总感觉很浪费那段时间。这里把过程中遇到的问题做个小结吧。 先交代下chrome检查工具的背景：是一个内部使用，用来检测页面信息的chrome插件工具，检测的功能包括：页面的基本信息（比如一些seo信息、meta标签、加载时间）、检测某些特殊代码进行分析，检测图片的大小、检测页面发起的某些请求进行分析等等。通过插件工具来达到快速检测页面的某些规范信息，方便前端、编辑和qa直观快速的校验页面的一些信息。工具截图如下： chrome插件相关 因为本人只是负责对已有的插件进行优化升级......
-
内网穿透ngrok工具快速启动bat
前言 很久很久以前，我们在做移动开发时，调试bug的方式主要是： 1、每次改完上传到测试环境，手机刷新（不够实时，麻烦耗时） 2、手机申请内网权限（申请的机子很有限，遇到奇葩机子出问题时再申请权限根本行不通） 然后，我们开始寻找可以实时远程调试的工具，比如weinre，小组也有相关文章介绍： Weinre+Gulp+BrowserSync结合实现远程调试 但我们小组最终选择的是内网穿透 ngrok 工具，统一搭配，方便组员快速使用，使用指南： 内网穿透 ngrok 工具使用指南 ngrok.bat 有了工具，那就得用上，提高生产力才对得住搭建这个工具的大神啊。但是用了那么多次，还是......
-
逐帧还是视频，如何选择
前言 最近在做一个游戏技能展示的效果，效果一般都有3s左右，鉴于效果复杂度只能通过逐帧或视频来实现展示。既然有两种实现方式，如何选择呢？先来简单分析下： 逐帧 所谓逐帧，就是把动画帧导出为图片，然后再用代码把没一帧的图片按照一定的频率进行切换，达到动画重组的播放效果。以3s的动画，每秒26帧的速度来计算，需要72张图片才能实现。同理如果帧数要求越高，需要的图片就越多。难度主要涉及到图片素材处理、图片资源加载、逐帧播放不掉帧等等 视频 视频这个没什么好说的，关键是看怎么播放。因为要达到的效果是看起来像一个页面动画而不是视频播放，所以要求是表面上看不出是视频播放即可。最大的难点也在于此......
