2016年1月

浅谈移动端前端页面开发

前言

外包需要,接触和学习了不少移动端的知识,在运用过程中多次碰壁,有些项目虽然完成了但是自己还是很不满意,于是在刚到家的第一天晚上决定写成文字整理自己脑中的信息,以及进行一个浅层次的科普。

移动端的特性

在写移动端项目的时候,会遇到各种不同的业务应用场景,有些需要定宽,而有些需要适应宽度进行响应式处理,有些需要滑动写死,有些需要限制点击。
移动端也是web前端的一大深坑,iOS设备统一性还好,Android设备琳琅满目而又参差不齐,WP我就不提了……(真心没做过QAQ)。在移动端进行页面开发,根据系统和软件的不同要考虑很多,比如性能上,又比如布局上,亦或是浏览器层的按钮布置/功能特性等等,在不同的场景下都是能够令人一脸懵B的。
以下是我在移动端开发中遇见过并进行了简单研究的部分内容:

  • 定宽
  • 响应式
  • 音频
  • 动画
  • canvas
  • 加载
  • 事件兼容

移动端的小技巧

开发过程中整理的一些小技巧在这里整理一下,方便自己搬砖,需要的可以伸手自提。

定宽

这个是一个非常常见的功能,很多设计稿给出的设计都是在定宽情况下制作的。大多数人选择用一个meta标签来实现这个功能,如:

<meta name="viewport" content="width=640,user-scalable=no">

但是很明显的是,不同的系统中,这个标签的写法之类也有很多讲究。伸手尝试了各路神仙的兼容代码,最终我使用的最多的是这套代码:

<script>
    var mengvalue = -1;
    var phoneWidth = parseInt(window.screen.width);
    var phoneScale = phoneWidth / 640;
    var ua = navigator.userAgent;
    if (/Android (\d+\.\d+)/.test(ua)) {
        var version = parseFloat(RegExp.$1);
        if (version > 2.3) {
            document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
        } else {
            document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
        }
    } else {
        document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
    }
</script>

将其放置于head结束之前即可。因为定宽的情况下,基本上一定会要求禁止缩放,所以上面也包含了相应的内容user-scalable=no,对于缩放系列的参数,关键词scale,想必也不用我赘述。
这套代码来自一直给我项目资源的大哥,在此谢过。

响应式、自适应宽度

写响应式页面的情况,一般会涉及到这个meta标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

这个标签也是Bootstrap基本起步模板的默认标签之一。通过这个设置,使页面宽度等同于设备宽度,能让像素的展现更好。

在写响应式的时候,个人尝试过很多响应式策略,由大到小的兼容、由小到大的兼容、特定尺寸增删标签之类,而写法上并不够优雅。
依照个人之见,兼容移动端的响应式布局,更应该由小到大做兼容,先考虑小屏幕下的布局,再延展成宽屏大屏幕的布局。AmazeUI是一个国产的很优雅的HTML5跨屏前端框架,算是我目前使用过的体验很优良的框架,它在设计的时候正是采用了由小到大的兼容。
这种兼容常见的css写法:

@media screen and (min-width: 480px) { 
    /* something */
}

移动端音频

在移动端,比较常见的音频都是用HTML5的audio元素来实现的,包括我之前做过的一些内容的BGM也是以此元素实现。audio元素算是一个很简单的元素,建议看一下它的具体介绍和与之相关的DOM中的Audio对象的具体介绍,然后在使用的时候,操作其中的一些方法也能更加方便。
audio元素在音频播放方面有一些不足之处,iOS端的audio基本上是没有什么问题的,但是Android端中,audio元素的音频播放是不能叠加的,在你对一个audio元素进行play()的时候,其他播放的audio元素均会进入暂停状态(此时paused属性会为true)。国外对此有一些系统层级的解决策略(很高大上)但是我没(lan)有(de)去尝试所以也不好多说。这个问题目前还处于懵B阶段。

移动端动画

这里的动画指的是一些页面元件的动画效果。移动端的动画实现上,因为设备性能问题,要尽量使用CSS3进行动画而不是使用JS(血的教训)。
很多时候写CSS3动画的时候会写很多不同浏览器的兼容,举个W3School官方的例子

animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
-o-animation: myfirst 5s;   /* Opera */

这里提示一下,如果只做微信内置浏览器的兼容,只需要写正常的属性和-webkit-头的属性就能够实现了。
移动端动画有很多优秀的CSS框架,个人比较看好的是Aniamte.css,这个框架包含了各种常用动画,在此基础上能将动画的实现简单化。
而移动端的整屏滑动我极力推荐Swiper,算的上是移动端滑动、轮播一类效果的优秀解决方案。Swiper中文网中给出了非常简单的将Animate.css结合进Swiper的方法,不妨尝试一下。

移动端canvas

canvas上我目前只用过CreateJS,这也是目前Flash CC转身反杀华丽逆袭的一大杀器。整体上CreateJS算是非常轻量级的一款canvas动画/游戏框架,我之前也多次提到过这货。但是对于SoundJS和PreloadJS我的使用能力仍然有很大问题。
在CreateJS(以下简称cjs)的使用中,性能是一个很重要的点。手机端的图形绘出应该很多人踩进坑里过,不同机型能达到的性能真的差非常非常多。所以在使用cjs制作手机端的动画效果或者游戏的时候,要注意尽量减少遍历和整体的重绘,增加局部重绘,以及能用CSS3实现的动画功能千万避免用js。
同样能够生产出H5动画游戏的Cocos2d-x的js语言版,面对cjs下,性能可以说各有千秋。这篇文章中对于二者的性能比较是测试的相对不错的,引用文章中的一句话就是:

cocos2d-js框架提供的UI编辑器、粒子系统、骨骼动画、瓦片地图等等,都是createjs这个轻量级选手不具备的,createjs只能从零开始,一切都得靠开发者自行实现。因此,cocos2d-js更适合做中大型游戏(大型指的是游戏画面复杂程度,而不是渲染要求高),而createjs更适合做小游戏,例如神经猫级别。

加载

移动端可能会面对很多图片,处理加载项、有一个合理的加载动画就很重要。
目前我的加载流是抄的代码,其中主要用到的是createjs.LoadQueue,因为尚不够完好,所以这里先不贴代码出来,有兴趣的可以邮件/QQ我研究下。
对于移动端的加载我觉得这几点值得注意:

  • 图片和代码体积:用到的非高清图片进行压缩,我使用了工具TinyPNG;代码压缩直接放在gulp的处理流里面
  • loading:加载时间过长的时候,需要有一个loading的界面。目前没写过什么好用的loading层(也没设计出什么不错的),所以还是用的别人的开源的CSS3加载动画。
    在加载的内容比较多的时候,强烈建议加一个进度条,这就跟追女朋友一样,没有一个进度条是很容易放弃继续加载的。
  • 静态资源位置优化:我使用的是upyun,用了很久了,个人觉得非常不错。七牛据说也是不错的,但是没用过,个人觉得它口碑非常不错,不做过多评价。

加载这一点上要多花一点功夫,个人作品的话,一个加载的工具/套件写好了就能一劳永逸了。

事件兼容

感谢前人一路走来为我们留下了那么多优秀的框架!
移动端最该注意的就是点击事件的改变,click变成了一系列的touch
框架上,用过Touch.js,它是移动设备上的手势识别与事件库,由百度云Clouda团队维护。但是后来使用Swiper之后,对事件的考虑并不是很多,只是在之前写canvas游戏的时候使用过。

总结

移动端的水很深,要做移动端就说明要面对更多型号尺寸,也说明要面对的操作系统变得更加丰富。一直用Chrome的开发者工具进行移动端调试,成功之后才放到移动端做真实测试,有的时候对性能的掌握非常不好,要多加小心。
移动端不像PC端,没有控制台显示错误的抛出,所以我也见过开发者为了调试移动端的一些问题,不惜放上大量的alert命令。这里我安利一下jsConsole,可以通过这个在线工具,将移动端的控制台信息全部输出到测试者这里,非常好用。

总而言之,进行移动端开发,多站在用户和低性能机的角度考虑问题、设计流程,会对整个项目更加友好。以上只是我在初入移动端这潭深水的时候总结的一些低端技术点,有错误请直接指出,感谢各位同好Q3Q。

回顾我的服务器使用经历/重新配置Debian服务器

接触过的主机商

为了搭建自己的网站和进行测试,虽然是个前端狗,却不得不使用各种服务器。迄今为止我使用过的主机/VPS有:

  • 90启航(3块钱一个月的主机,速度死慢,用了一个月)
  • LocVPS(最初是和Ricter菊苣、Faceair菊苣和qwe小华一起合租,后来大家纷纷离开这台服务器使用自己的独立服务器,我也随之开始寻觅自己的服务器)
  • hostker主机壳(试用过这家的空间,限制很多,但是价格还可以;这家的VPS没用过,不予置评;点击这个链接注册的话,购买新的虚拟主机可以延长10天)
  • Linode(目前我用过最好用的一个VPS商,需要信用卡支付美金,这里要感谢囧叔一直以来的帮助。点击这个链接使用优惠码注册/购买)

服务器使用历程

我的Linode服务器已经使用了很久了(再次感谢囧叔)。具体的学习历程:

  • 2013年 - 使用服务器是搭建静态的纯HTML的页面做测试,那时候我还在高中,使用的是普通的90启航的静态空间,域名还是最初的nocti.me
  • 2014年上 - 困囿于服务器功能的限制,想自己手动去折腾一些php的东西,在RP主机上面开始跟着教程搭建wordpress。
  • 2014年下 - 合租VPS后,服务器的Apache配置文件当然要自己写,这阵子就开始接触到了Apache和Nginx,当时服务器使用的是Apache。
  • 2015年上 - 开始使用自己的VPS,有了自己的东京Linode服务器,尽管是最低配置($10),但是使用起来还是相当不错。这半年开始自己搭建LNMP环境,进行简单的PHP使用;搭建了自己的ShadowSocks(然而服务器重置之后是yu帮我进行的搭建…);初步开始搭建Node.js环境。
  • 2015年下 - 学习状态比较好,对于服务器的使用次数愈加频繁也更喜欢折腾,完善了Node的运行环境,又在星河的推荐下使用了Gogs,但是这时候Go语言的环境和Node的环境配置没弄好,产生了一定的冲突。
  • 2016年初 - 使用ROOT账户直接操作系统太凶残,而且也很不好,为了解决各种麻烦,让服务器更加干净有条理,将服务器进行了重新配置。
    在面板上把系统重置为Debian8.1,尝试着用更现代更易于管理的方法去使用它。

重新配置Debian服务器

新的服务器上,依旧使用Nginx作为服务器软件,php版本5.6。
数据库方面,使用了Perocna这个MySQL的分支作为数据库软件,版本信息5.6.27-76.0 Percona Server
一直以来都只用root账户对服务器进行操作修改,感觉这样并不方便,所以这次添加了用户Nocti。
在编程环境方面,为了让环境之间能够不冲突,除了php和python,都将使用Docker,将环境放进container,保持服务器整体环境的整洁有序。部分php程序也将放到container里面,做一定量的研究。

过程中的几个小问题

添加用户的问题

useradd添加用户之后,用新建用户登录,shell左侧只能见到一个$符号,而且没有tab补全、也不能使用上下左右方向键。
这个情况是因为,新添加用户所使用的shell软件与root不同。
root账户使用的shell软件是bash,而新账户使用的shell软件地址在/bin/sh,而在这里ls -l一下,就会发现如下情况:

/bin/sh -> /bin/dash

也就是说,我们的新用户使用的shell软件是dash。
此时我们应该修改用户的默认shell软件,让其使用bash。具体方法可分成3类:

  1. chsh命令来设定用户的shell
  2. 编辑/etc/passwd来设定用户的shell
  3. 修改/bin/sh的软连接,让它连接到root使用的bash软件(注:国内大部分教程采用此方法,但是极力不推荐这种方法)

将shell软件重新指定之后,就可以使用bash正常进行补全了。不过,需要重新进行登录。
再强调一次,修改软连接的方法真心不好

shell的左侧只有$符号,可以补全的情况

在修改了shell软件之后,重新登录发现可以正常补全和使用方向键,可左侧还是只有一个$符号,这是shell配置没有生效的原因。此时使用:

cd /home/username
ls -a

查看你的用户根目录有没有.bashrc这个文件。这个文件没有的话,请按照bash官方的手册进行配置或者在网上找一个。已经有这个文件之后,我们在这个目录进行source命令来执行配置:

source ./.bashrc

然后就可以直接看见效果了。左侧的$符号处的具体形态配置,可以搜索关键词PS1
可以点击bash官方文档查看更多bash相关内容,有兴趣的可以自己去折腾一下哈。

Nginx配置不生效

从旧服务器上搬运过来的Nginx配置我丝毫没动,只是简单修正了文件目录的修改,可是在php5-fpm一切正常的情况下却不能打开php文件,进行的任何php操作都是一片空白。
同种情况可能发生的原因,首先是php的起始符号的问题。有时php的配置里面是禁止使用<?这种简写的符号作为php的起始符号的,这时候修改配置(Debian下apt-get到的php的话,配置文件在/etc/php5/fpm/php.ini),修改文件内容使short_open_tag = on就好。可以在文件里进行检索关键词 short ,如果检索到:

; short_open_tag
;   Default Value: On
;   Development Value: Off
;   Production Value: Off

这样的配置,那说明默认已经是short_open_tag = on了。
而我遇到的情况不在这里。经过对于log文件的检索发现,nginx端成功地把请求甩锅给了fastCGI,然后就没有然后了,php5-fpm也接收不到,所以问题应该在fastCGI上面。
经过检索,发现需要修改fastCGI的params,我的配置位置:/etc/nginx/fastcgi_params。里面可能是少了这样一句话:

fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

当然直接把这句话放进你的nginx网站具体配置也可以

location ~ .*\.php(\/.*)*$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+.php)(/.+)$;
        fastcgi_pass unix:/var/run/php5-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
}

总结

折腾服务器很麻烦,部分软件的服务器环境很难搞定,互相之间的兼容也总是会出现意想不到的问题。
为了保证日后服务器管理的便利,应该熟练Docker,并配置好自己常用的几个container,以便于在更换服务器或者布置项目的时候,在处理解决服务器配置的问题上花费更少的时间。

Time is expensive.

一只柴犬的2015

概览

整个2015中,经历了很多人很多事。
去了一些地方,没有好好旅游,但是好好地看了当地的居住和交通。
没学会多少东西,踩了很多坑,不过很开心。
终于开始用自己学的东西,来换取经济利益。
知道了自己喜欢怎样的东西,喜欢怎样的生活,喜欢怎样的人。
年末了,终于知道该收拾自己,用更好的形象,去面对更好的人。
跟上了银魂的三百多集动画,跟上了银魂的五百多话漫画。
满意程度: 7.5 / 10 。

刘看山的酒馆

有了这个新的家园
女神ii,污妖王xu,5岁群主,心灵导师硬座,前妻小樱,老司机我e,小司机亖亖,鱼酱,k崽,楼主人,豆腐,碧老师,夏老师,牛少,耗子……
家人太多数不过来。
这里我可以随便污,随便搅,虽然来自各地,有各种脏各种黑,也有各种秀各种夜间档,很和谐。
也很感谢。

总收支

2015自收支图

这是我2015年的个人收支,不包括正常的大学生活的开销,也不包括生活费。
收入大部分来自于给在上海工作的大哥提供的移动端页面制作、canvas小游戏制作,极小部分来自给老师批量生成普通网页。
期间虽然也有自己去谈基于wp的全栈制作,但都因为种种原因无疾而终。
大体上知道了一些基础项目的价目,也开始渐渐了解我所学习的技术、所向往的行业,在未来工作的时候要面对哪些不得不面对的困难和窘迫。

设备使用

很开心,凭自己的能力分期入手了一台MacBook Air(13.3寸,128GB储存,4GB内存)。
入手之后渐渐从Win系统转到了OS X上面,现在有点OS X依赖了……。
年末收到了任狗送的KugouM1耳机,是我第一副蓝牙耳机,在此谢谢任狗

技术

基本选定了web前端的方向,也对这个行业有了一个更深的认识。
我喜欢前端,这种即时看得见效果的东西,真的会让人很开心。
2015里面熟悉起来的技术:

  • JQuery : 从了解到熟悉
  • Gulp工作流 : 从抄写到会写
  • Sass Jade Coffee : Coffee较为冷落,还是比较喜欢原生的js;Sass和Jade都因为大量的使用产生了一些亲切感
  • CreateJs : 因为项目需要,更深入了解了cjs,也用到了它的更多强大的功能
  • Node.js : 基本能够实现一个简单的后端功能,了解了回调的基础处理方式
  • Swiper2 : 为了做移动端项目没少使用它,使用的时候通常也配合AnimateCss

这些技术在使用过程中越发熟练了。

2015后半年做了各种小型的项目,给我带来收入的同时让我掌握了更多内容,比如基本的项目默认需求:图片预加载 / 移动端屏幕尺寸兼容等等。

服务器方面,学习和熟练了更多的命令,也对于搭建环境时的bug解决有了一些基础的思路。
搭建Go语言环境导致node环境出现了这样那样的问题,暂时未解决,打算重新配置服务器,具体预想见后文。

另外,在设计方面,PS切图开始使用PS CC2015带有的导出功能,极其方便;Mac入手之后则更加喜欢用Sketch,虽然不算熟练使用,但是勉强还是可以做基础设计的。

2016预想

2016计划要实现的内容,基本有以下这些:

  • 技术方面:
    • 自己实现一个完整的全栈
    • 制作新的Typecho主题
    • 学习更多的后端内容
    • 把前端技术向更高效的方向发展,学习更多前端的技术和框架
    • 强化排版和设计的美感
    • 把移动端常用的东西工程化,为了便于自己制作移动端的流程动画,研究CSS3动画生成的解决方案
  • 生活方面:
    • 入手一把SCX-48/56,学习五线谱
    • 入手一块移动硬盘,储存自己经手项目的素材和需求
    • 有规律整理自己每月的生活,记录成文字
    • 走出寝室,多走走,多看看
    • 去一次上海和广东
    • 更规律地管理开支

希望能完成自己的企划。
希望能用自己的手实现自己想要的那些小小梦想。
希望能有更安稳规律的睡眠。
希望能遇到一个愿意和我一起走的姑娘, 。
2016,不回头,继续走。

ソンナ强ク美シイモノニ私ハナリタイ
——银魂·33卷·卷名