文档章节

移动前端开发和 Web 前端开发的区别是什么?

名字已被取
 名字已被取
发布于 2016/02/27 20:37
字数 4405
阅读 325
收藏 16

1,普通pc端开发与移动端开发区别。

普通pc端开发,我理解就是你拿电脑打开的网页都算【这不是废话么】。
那么移动端前端开发工程师,说白了就很好理解了,做手机网页的前端开发工程师。

这么一比,是不是感觉,移动端开发简单多了?

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:小爝
链接:http://www.zhihu.com/question/20269059/answer/60767669
来源:知乎

pc,我们需要考虑什么呢?有点开发经验的同学都知道,ie6-11,firefox,chrome,safari都得兼容的吧。哪个都够你吃一壶的,无论是css还是js。
mobile的网页开发,我们需要考虑什么呢?
就目前来说,我们只需要考虑webkit内核的浏览器和chrome,uc,qq,小米手机浏览器就好了。。。【后面特意会说这几只国产浏览器哪里屌了】

相比较而言,除了经验是0以外,需要兼容的东西还是少了,少了,少了呢。

ok,单纯说pc和移动端开发的区别,其实也就是这个,可以简单的概括来说,mobile端的网页开发比pc端的网页开发,更简单一些。【页面小了啊,装的东西少了,css和html写的少了吧】交互简单一些【滑动,触屏,手势,平时看看手机你还能有啥特殊操作?】

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:小爝
链接:http://www.zhihu.com/question/20269059/answer/60767669
来源:知乎

so,别被这玩意吓坏了,根据我的经验来看,pc端的前端开发程序员,转mobile开发,一点问题没有,而且上手会很快。

够直白的解释了。

2,移动端web app开发与套壳开发区别。

移动端web app,移动端网页,Hybrid开发【我喜欢叫套壳开发工程师……】,无所谓叫什么,移动端开发无疑就是这3种了。下面一一解释下我的理解。

移动端web app是什么呢?简单理解就是页面头部加入了下面这一句话的东西:

<meta name="apple-mobile-web-app-capable" content="yes">

这个meta的作用是让普通移动网页被添加到主屏幕后,拥有一些类native的功能,很多同学应该都很熟悉了。就是类似隐藏ios的上下状态栏,实现全屏,禁止弹性拖拽,全屏,修改顶部颜色等。

我理解这种模式的网页为web app,当然还有一种类型就是大家平时都访问的那些网站,比如手机taobao,手机美团,手机微博的网页版,大家打开的时候,不是全屏的,但是用起来,开发者把它们伪装的很像这种web app的交互体验而已。

以上2种我觉得可以总结为web app。(如需对比,请参考各大网页!!)之后我来说下套壳的吧。这部分如果没有开发过phonegap或者类似和native连调过webview的同学,可能觉得很陌生,其实不是,这种套壳开发和开发普通的网页没什么区别,只不过资源大部分是file开头的,本地资源,网络资源分为使用js异步接口获取和native获取,再和js的接口交互,类似ios中,可以直接在oc或者swift可以直接在webview中执行js,android同理,但是js想调用native功能怎么办呢?

我们这边的做法是有一个负责通讯的iframe,我们通过修改这个iframe的url,来让native来监控一系列特殊的url地址请求,再在native中调用对应的功能,比如摄像头,特殊交互,呼起,或者提供接口数据。数据的提供方式类似jsonp的原理,在执行函数的参数中传回来。

理解了这块,其实做套壳的比做普通web app和网页都简单,因为在native的webview中是可以指定是什么版本的webview,用什么内核,拥有什么等级的安全权限等等,ios和android做法不一样,但是原理一致,对于前端开发工程师来说是无差的。

而且套壳开发还有个好处就是,因为资源是本地化的,所以可以使用比较重的框架,如angular,react,一些三方框架,因为最终都是通过和native代码捆绑发布的。

套壳native的静态前端部分的更新,我们可以使用远程下载静态资源包的方法实现,不发布大版本而修改webview中逻辑的需求,这一点也是大部分公司选择一半native一半h5来开发的原因。都知道ios审核发版很慢。

这些就是我知道的一些很通俗的区别了,技术细节就不说了,太多。大家有个概念就好啦。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:小爝
链接:http://www.zhihu.com/question/20269059/answer/60767669
来源:知乎

3,对js和css的使用选择。


这部分我提前预警,这是我自己的看法,不一定是正确的,大家互相讨论。

我的想法是不使用目前那些主流的移动端框架,选择手写。我会说为什么。
比如jq mobile,zepto,backbone,angular,还有类似工具集,underscore,一些动画框架,还有小型的游戏框架,统统其实是不太需要的。

我并不是说他们不好,而是这些对于新手来说,只能是阵痛药,而不是万能药。为什么呢,移动端的优化很大的一个瓶颈就是网络加载速度不一致,有wifi,有3g,有4g,还有2g。代码量在移动端开发是很大的一个考察点。

我们反观这些框架:zepto最先说,你用它做什么?动画?选择器?事件委派?基于zepto的插件?可能大部分人就是用个选择器吧。但是移动端的原生选择器方法应有尽用,原生的完全够用,包括事件和委派,一共写起来不超过10几行的东西,引入一个框架不值得。再说mvc的框架,如果不使用离线存储,我是反正不敢想没wifi的情况下体验如何,外加移动端真的是否需要分层这种处理不说,主要还是看业务场景。

套壳的那种上面说了,框架随便用,因为足够复杂,但是普通移动端开发,我个人是不推荐使用的,可以直接上原生的来写,最多来一个模块化工具。我下面就说说自己是怎么做的吧。

手机端对ES5的特性已经全部都支持的很好了,参考:
xiaojue/ES-shim · GitHub
这里的api特性,只实现了一部分,但是其实平时对数据的处理,对象的处理,已经完全足够。我不说优缺点,我只说,移动端这些都是纯天然的而已。

然后是我们对手势的处理,zepto中有几个很有用的事件,swipe,swipeLeft,right,up,down,一类的,还有tap,我们可以看下zepto的源码:
zepto/touch.js at master · madrobby/zepto · GitHub
我们真的所有场景都需要所有的功能么,tap,doubletap,有多少人用了。。用到的时候,也是非常好实现的功能。我推荐直接手写,或者自己写一个swipe的基类,也不会比zepto的touch.js多太多,而好处是我们可以让它贯穿我们的项目,作为一个base类使用,当然我不是喷zepto多余,它很多代码做了兼容处理,但是就目前我们的业务来说,我们只需要考虑webkit,只需要考虑几个特定国产浏览器,因为这是统计数据说了算。

没了框架,我们就不能写代码了么?移动端开发,我觉得更考验的是前端的基本功,只要基本功扎实,其实都是很简单的需求,正因为都是自己一行一行写的,遇到诡异问题就更好解决,而不再需要纠结于,到底是我做错了,还是框架错了这个问题。

我不止一次的修改过iscroll的源码来适应和“满足”我们的测试。。。比如ios下用了iscroll,a标签无法点击跳转,很多人遇到过吧,不看文档你还真是一时不知道怎么解决,iscroll由于禁止了页面原生的滚动,很多本来很简单得东西复杂化了,而我们需要的是什么?一个下托刷新?一个惯性滚动特效?开什么玩笑,原生的也没几行啊。。。对于一个写了多年pc端的前端来说我相信徒手写个下托刷新禁止页面惯性反弹的代码,应该不复杂吧?这里给个思路,比如我们检测touchmove的位置快到达页面【或者容器】底部的时候,阻止touchmove,做容器或者页面translate移动,再在下部埋一个loading,touchend之后再做缓动回复,应该普通前端都能做到。

再说一个常用的移动端框架,swipe.js 做幻灯用的,我相信幻灯片做pc端得前端应该每个人都写过不下5遍了吧。只是事件换了,当然移动端有移动端自己需要处理的问题,但是我使用swipe框架的经历也是很痛苦的,比如无法很好的设置滚动过的距离,自定义缓动效果,还有无法它自己本身带的一些问题,比如横竖屏的时候复位问题,动态插入子节点重排等,让我第一次用的时候越开发越伤心,后来干脆也是自己实现。

所以其实,1,我们的需求,那些移动端框架不一定满足我们。2,太大,太复杂,太难调试。3,需求其实本身不复杂,只是我们想偷懒了。

有点跑题,这个标题说是js和css的选择,js的立场我足够明确了,如果简单功能,不需要js框架,原生足够,已经做得很好,下面说说css。

首先,做pc我们都需要一个reset或者common,我共享下我们的,
https://gist.github.com/xiaojue/8bac56fb488532e7857f
当然里面有一些我们特殊的颜色字体,我css并不是特别好,我简单的重复一下我们css同学的一些注意要点,可能不全:
这其中字体的选择是根据平台来做的,我们平时用控制台模拟开发的时候是没有ios或者android系统字体的,但是你不设置又很丑,所以基本是从电脑支持,到移动端支持这个顺序排列的。这其中字体的选择是根据平台来做的,我们平时用控制台模拟开发的时候是没有ios或者android系统字体的,但是你不设置又很丑,所以基本是从电脑支持,到移动端支持这个顺序排列的。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:小爝
链接:http://www.zhihu.com/question/20269059/answer/60767669
来源:知乎


下面截图几个wiki:


还有很多,我只找一些我认为可能知道的人少一些的,我们的wiki还有很多,我css并不太好,这部截自同事的wiki贡献。还有很多,我只找一些我认为可能知道的人少一些的,我们的wiki还有很多,我css并不太好,这部截自同事的wiki贡献。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:小爝
链接:http://www.zhihu.com/question/20269059/answer/60767669
来源:知乎


下面截图几个wiki:


还有很多,我只找一些我认为可能知道的人少一些的,我们的wiki还有很多,我css并不太好,这部截自同事的wiki贡献。还有很多,我只找一些我认为可能知道的人少一些的,我们的wiki还有很多,我css并不太好,这部截自同事的wiki贡献。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:小爝
链接:http://www.zhihu.com/question/20269059/answer/60767669
来源:知乎

有了数据,我说一下移动端的统计极值问题,举个例子,我们手机打开一个网页,还没有load完成,切到了后台,这个时候脚本是不会执行的了,过了几小时,几天再回来的数据,我们都能收集到,这部分属于垃圾数据,是需要算平均值的时候去除的。这点和pc不太一样。

然后是性能优化建立在均值性能指标上的,我们尽快的提升首屏和win load的时间即可,原则和做法和pc一致,当然,移动端不是资源越合成一个越好,我们的实践是分散成不同的几个资源下载,总时间比较快,比如活动页面,h5小游戏页都是这样。可以统一把资源图拆开加载,然后增加loading即可。

----我还在奋力思考和编写中-----今天先到这里了。。。。【这里还有一个点,我想讨论一下是mobile的cache的利用率问题,这个明天我详细说,决定找些权威的数据或者自己做下测试再开始写】

6,移动端网页布局方法与pc的差异。

主要是css方面,外加如何做到同一url,不同客户端展现不一致的做法,俗称pc和mobile都兼容。还有会说一下rem的相关用法和一段比较经典的rem.js

今天有空来更新一下这个rem在移动端布局的一个用法:)(20151013更新)

首先,em和rem的概念我简要说一下,em是父元素fontsize的倍数表示,rem则是root即为html的fontsize的倍数表示。比如我html.style.fontSize = 12px;那么1rem则为12px,0.5rem为6px;

好了,概念有了,那么做布局的时候我们怎么用呢,大家应该用过的都知道,移动端的字体默认为16px,那么1rem我想表示为10px的话,我们就需要 10 % 16 = 0.625 即为62.5%,这样就可以比较方便的把设计稿里的px转换成rem单位来做到自适应了。这样无论用户如何设置电脑或者手机的默认字体大小,设置为rem的单位的长度都会随比例变化。

这是一种常规做法,其实换个角度我们还可以这样用:

我们想象一个设计稿宽度为640,800,1200px等尺寸时,我们如何来快速完成响应式的布局呢?
百分比?flex?这些还是有些复杂的。

后来发现,栅格等比缩放整个设计稿看起来是个更简单粗暴的方法。而且正好可以利用rem这个比例变化单位。

看下这段js:
https://gist.github.com/xiaojue/0615797dd6a7160177bd

比较好理解,我们首先根据psd的设计稿宽度设置一个基值,然后我们js获取到当前窗口的宽度值,然后把这个设计稿宽度除以100栅格化一下,获得一份的宽度数,之后再用真实窗口的宽度除以这个一份的宽度,拿到就是我们需要给html设置的fontsize的px值。

这样我们只需要把对应psd里的px单位除以100,就得到了任何宽度环境下的rem值。当然实际发现有些浏览器这个rem单位是存在bug的,比如比例值不准,那么我们就需要获得这个不准的比例再转换成准的再赋值html的fontsize,可见calcTestDom函数,之后再处理一下旋转屏幕时候的情况,resize时候的情况就好了。

这样我们在做一些活动专题页面时,只需要引入这段js,在页头设置一个设计稿宽,然后对着设计稿一顿疯狂的px除100来定位就好了。。比设置成62.5%的方式要更好(1,修复了浏览器bug,2,转换单位更方便直观,px/100即可)

7,常见js组件与pc端组件差异。

这部分还在想怎么说比较通俗易懂,哪些组件是非常典型得,需要我回去慢慢想想,找几个实际的对比例子。

8,一些常见的坑。

分享一下内部wiki的经典移动端坑和解决办法。(不会太多,别抱太大期待了。。)

9,适配【机型,浏览器】的方法和选择。
1,统计说话。
2,调试方法。

10,测试技巧与pc的差别。

几个比较经典的调试方法和工具介绍。


本文转载自:http://www.zhihu.com/question/20269059/answer/60767669

共有 人打赏支持
名字已被取
粉丝 3
博文 44
码字总数 4065
作品 0
杭州
网页/平面设计
私信 提问
WEB前端学习面试常见问题系列:title和alt的区别

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/12
0
0
手机网页用Bootstrap还是jQuery Mobile

很多新手纠结这个问题?两个框架都能够支持做手机网页,那么它们的区别是什么呢,适用场景是什么呢?下面我们从这几个方面比较这两个框架:解决问题、功能、适用场景。 解决问题 跨设备的网页...

snowing1990
2016/03/11
199
0
前端入门教程(二)Web前端与HTML简介

一 web1.0时代的网页制作 网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为“牛皮癣”网页。 例如一...

马一特
06/10
0
0
HTML5从入门到精通,零基础学员必看

学习html5从入门到精通,零基础新手也能看懂,无论你是唱歌,画画的艺术生,还是学习机械专业的工科生,或者大学读的文学学科。先了解HTML5可以实现的功能有哪儿些? 1. HTML5可以同时在多种...

课工场CC老师
2017/11/08
0
0
史上最全的前端资源大汇总

1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经进行过总结。 经过沟通和“行贿”��,终于取得转载权利,在此感谢晚晴...

mr_lp
2017/01/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Nginx-使用简单总结

下载nginx:http://nginx.org/en/download.html 下载后解压 有很多种方法启动nginx (1)直接双击nginx.exe, 双击后一个黑色的弹窗一闪而过 (2)打开cmd命令窗口,切换到nginx解压目录下, 输入...

Java搬砖工程师
16分钟前
3
0
通过修改控制文件scn推进数据库scn

在数据库遇到ora-600[2662],scn不一致(又没有日志)的时候,我们首先想到的就是去推进数据库的scn,让数据库能够open起来,抢救其中的数据,但是由于各种乱用的情况,oraclescn的pach出来后(11.2...

突突突酱
17分钟前
1
0
Underscore _.template 方法使用详解

https://github.com/hanzichi/underscore-analysis/issues/26 前文 浅谈 Web 中前后端模板引擎的使用 我们简单了解了模板引擎在前后端的应用场景,本文重点深入 Underscore 的模板函数 _.te...

壹峰
18分钟前
1
0
前端缩短数字的长度解决方案[10进制转化为64进制]

function string10to64 (number) { var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_$'.split(''), radix = chars.length, qutient =......

未来cc
18分钟前
1
0
十年架构师不到400行手写一个Spring MVC

首先,我们先来介绍一下Spring的三个阶段,配置阶段、初始化阶段和运行阶段(如图): 配置阶段:主要是完成application.xml配置和Annotation配置。 初始化阶段:主要是加载并解析配置信息,...

小刀爱编程
19分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部