【记】移动前端开发和 Web 前端开发的区别是什么

在知乎上看到一位大牛的总结原文地址,同样也是从pc开始入门前端,转移动前端,截取一些以自勉,往app方向发展~~

1.移动端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审核发版很慢。

2.截图几个wiki








 欢迎转载:转载时请注明本文出处及文章链接

标签:


添加新评论

captcha
请输入验证码