乐鱼电竞

教育行业A股IPO第一股（股票代码 003032）

全国咨询/投诉热线：400-618-4000

移动前端开发和 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获�。俸蚸s的接口交互，类似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审核发版很慢。

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

0 分享到：
和我们在线交谈！
【网站地图】【sitemap】