全国咨询热线:400-618-4000 | 股票代码:839976

移动前端开发和 Web 前端开发的区别

更新时间:2018年01月25日16时03分 来源:传智播客

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

先说背景,我大言不惭的说一下,我pc端的前端开发干了有快4年多,不算大牛,也算一个标准的前端开发工程师吧,可怜的是我2015年之前做过的移动端项目不超过1个。。所以几乎经验为零。我对这个神秘又被炒的火热的名字迷惑了很久,移动前端开发工程师,h5前端开发工程师,native前端开发工程师,Hybrid前端开发工程师,感觉很厉害有木有啊。。

所以我在15年决定弃坑了(pc的代码实在写腻歪了。。),投身到专属的移动开发中,业余时间也做过phonegap,也知道和了解过一些h5+native开发的方式,下面就慢慢给大家【科普】一下。

普通pc端开发,我理解就是你拿电脑打开的网页都算。

那么移动端前端开发工程师,说白了就很好理解了,做手机网页的前端开发工程师。

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

pc,我们需要考虑什么呢?有点开发经验的同学都知道,ie6-11,firefox,chrome,safari都得兼容的吧。哪个都够你吃一壶的,无论是css还是js。

mobile的网页开发,我们需要考虑什么呢?

就目前来说,我们只需要考虑webkit内核的浏览器和chrome,uc,qq,小米手机浏览器就好了。。。【后面特意会说这几只国产浏览器哪里屌了】

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

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

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

够直白的解释了。

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

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

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

这个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审核发版很慢。

大家有个概念就好啦。【文章来源于网络】