文档章节

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

名字已被取
 名字已被取
发布于 2016/02/27 20:37
字数 4405
阅读 306
收藏 16
点赞 1
评论 0

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

手机网页用Bootstrap还是jQuery Mobile

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

snowing1990 ⋅ 2016/03/11 ⋅ 0

史上最全的前端资源大汇总

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

mr_lp ⋅ 2017/01/13 ⋅ 0

个人分享--web前端学习资源分享

1.前言 时间过得真快,转眼间现在是2017年最后一个星期,而今天也是圣诞节,过几天也是元旦了。每到年底,大家都习惯总结和分享,我也不例外。但是经历,我之前已经发过了,那么我今天就分享...

⋅ 2017/12/25 ⋅ 0

mobile web 前端研发流程 【转载】

接触Mobile WEB前端开发将近一年时间了,在这不算短的时间里,通过吸取圆心、沉鱼等前辈们的经验以及不断的摸索和实战,总结出一套自己的Mobile WEB“研发流程”。为什么叫“研发”流程而不是...

石秋风 ⋅ 2012/04/18 ⋅ 2

聊聊未来的前端时代

  2016年结束了,前端技术的发展也将进入到一个新的阶段,那么未来又会给我们带来什么呢?这里就个人发表下意见,不喜勿喷。   就前端主流技术框架的发展而言,过去的几年里发展极快,在...

ouven ⋅ 2016/12/14 ⋅ 1

OneAPM x 腾讯 | OneAPM 技术公开课·深圳 报名:前端性能大作战!

「 OneAPM 技术公开课」由应用性能管理第一品牌 OneAPM 发起,内容面向 IT 开发和运维人员。云集技术牛人、知名架构师、实践专家共同探讨技术热点。 11月28日,OneAPM 技术公开课第五期将走进...

OneAPM蓝海讯通 ⋅ 2015/11/16 ⋅ 0

【开源访谈】腾讯河伯畅谈 VR 与前端开发技术

前端开发这个职业始于几年前,至今已发展的初步成熟了。什么才是真正意义上的前端开发呢? 前端整体架构设计和开发的核心是什么?在 VR 大背景下,前端开发技术人员该做些什么呢?基于 WEB ...

凝小紫 ⋅ 2016/11/28 ⋅ 6

移动端布局与适配

grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网...

掘金官方 ⋅ 2017/12/26 ⋅ 0

高手问答第 195 期 — 前端框架的后起之秀:React 进阶之路

OSCHINA 本期高手问答(4 月 25 日 - 5 月 1 日)我们请来了徐超@艾特老干部 和大家一起探讨关于使用 React 进行前端开发的问题。 徐超,毕业于浙江大学,硕士,资深前端工程师,长期就职于能源...

局长 ⋅ 04/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 38分钟前 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 46分钟前 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 52分钟前 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

容器之查看minikue的environment——minikube的环境信息

执行如下命令 mjduan@mjduandeMacBook-Pro:~/Docker % minikube docker-envexport DOCKER_TLS_VERIFY="1"export DOCKER_HOST="tcp://192.168.99.100:2376"export DOCKER_CERT_PATH="/U......

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

mysql远程连接不上

设置了root所有hosts远程登录,可是远程登录还是失败,原因可能如下: 登录本地数据库 mysql -uroot -p123456 查询用户表 mysql> select user,host,password from mysql.user; 删除密码为空的...

冰公子 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部