移动端开发

首先就是操作兼容性和个移动版浏览器的兼容性 ：传统设备上用户利用鼠标（包括触摸版）和键盘来操作网页，放大图片、拖拽元素、进行页面滚动等等。一些常见的鼠标和键盘事件诸如mouseover、mouseout、mousemove、click、foucs、blur等为我们提供了很好的页面交互操作，具体可以参考 W3school 。 　　然而，开发支持触摸屏的网页与传统意义上的网页有很大的不同。就拿鼠标hover事件来说，例如页面上有一个表格，当鼠标指向表格的 title时你希望在附近的某个地方显示一个浮动的tooltip。当然，你希望这个tooltip能更加引起浏览者的注意，因此你自定义了一个DIV元 素并且通过JavaScript让它动态显示或隐藏。这个程序很简单，并且在普通设备的多个不同版本的浏览器上都运行良好。但是如果你在支持触摸屏的设备 上浏览网页的时候问题却来了，设备不支持鼠标，因此用户无法用鼠标来hover表格的title元素。用户唯一能和网页进行交互的设备就是用手指去触摸或 滑动屏幕，然而在一个非touch friendly的网页上用手指去触发传统的mouse hover事件会显得非常怪异，你会发现tooltip会在你手指接触到屏幕的一瞬间显示，而后马上会消失。这是因为浏览器默认触发了mouseover 和mouseout两个事件

前言： 两个月前开始全身心投入到公司的一个移动端项目，框架选型是vue，这篇文章也是在花费两个月的时间，项目一期完成之后得空进行的一片总结性文章，其中包括通用的移动端开发的坑以及vue在移动端开发特有的一些坑，本博文目的也是为了让小伙伴们以后在开发移动端的时候可以尽量避免掉这些坑，从而提高自己的开发效率。 本博文总结顺序大概如下 移动端开发通用坑 vue移动开发特有坑以及小技巧分享 移动端开发性能优化 一、移动端开发通用坑 1、click300ms延迟？ 讲道理，现在开发移动端基本是不会有这么一个问题的。但作为移动端以前的经典坑，我这里也拿出来说上一说吧。 移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的。但在2014年的Chrome 32版本已经把这个延迟去掉了，so you know。但如果你还是出现了300ms的延迟问题，也是有路子搞定的。 解决方案如下： fastclick可以解决在手机上点击事件的300ms延迟 zepto的touch模块，tap事件也是为了解决在click的延迟问题 触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题

不用学，立马上手就会的APP你能举出几个？我想起了指南针，temple run. MUJI to sleep也让我小小惊艳了一把。 　　不过，这款APP最终是胜在设计有意思。如果要做个点评，这是一款满足了基本功能需求，次要需求-设计很出色，可以拿来做界面及用户交互设计参考的一款APP. 　　一、用户及痛点 　　用户：智能手机深度依赖症患者+熬夜爱好者，工作压力大或者天生神经衰弱，大部分是前者，或者由前者导致的神经衰弱，也因此，女性偏多。 　　我身边的朋友，尤其是女生，5个里面有2个曾经或者正在失眠，她们愿意为了睡个好觉去买几百块的乳胶枕头，愿意换更舒服的床垫，换个更好的床，甚至换住的地方。BTW,前两天看到一个研究，说女性对于睡一场好觉的需求高过一场高质量的sex。 　　 So, 如果能够让她睡一场好觉，你便能抓住她的心。 　　二、功能，应用场景及交互设计 　　助眠是最关键功能。 　　一般情况下，助眠APP有两种使用场景： 　　1- 睡前 使用的，用户做好了一切睡觉的准备，关灯，打开APP，然后睡觉。 　　 2-失眠后，半夜起来使用： 在黑暗中辗转反侧，怎么都睡不着，于是摸到手机打开APP。 　　因此其交互和设计需要考虑到： 　　1-交互应该完全不用思考（越动脑子越无法睡着） 　　2-可以简单定时，自动休眠。 　　3-启动的方式，休眠的方式需要足够柔和