黑马程序员技术交流社区
标题:
前端
[打印本页]
作者:
不忘初心xxxx
时间:
2019-12-30 16:39
标题:
前端
，移动端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审核发版很慢。
这些就是我知道的一些很通俗的区别了，技术细节就不说了，太多。大家有个概念就好啦。
作者:
小黑梅
时间:
2020-1-2 15:59
加油哦小可爱
作者:
chengjiayu
时间:
2020-1-2 16:23
加油哦小可爱
作者:
3617471903
时间:
2020-1-3 10:59
我们各自努力，最高处见
作者:
pakho-chou
时间:
2020-1-3 12:54
你笑起来真像好天气
作者:
黑马润
时间:
2020-1-3 14:04
预想生活 朝九晚五 周末自由 不贪财但够花 重要的是和你
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2