在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
在各种平台多元化发展的同时,前端工程师要面对多种前端版本的开发,工作压力不断增大,因此前端工程师必须了解一下大前端,了解一下跨平台的解决方案。本文提供了目前比较实用的跨平台解决方案。希望对目前想提高的前端开发工程师有所帮助。
H5+原生混合开发
这种模式又称为Hybrid开发,现在很多App都用这种模式去开发,常见的有微信、淘宝、美团、爱奇艺等知名移动应用等。国内也有很多公司使用Hybrid模式去开发平台,供开发者使用,像Dcloud、AppCan、Inoic等,基本上都是参考Cordova衍生出的混合开发框架。
这类框架主要原理就是将APP的一部分需要动态变动的内容通过H5来实现,通过原生的网页加载控件WebView (Android)或WKWebView(ios)来加载,H5部分是可以随时改变而不用发版,这样就解决了动态化的需求,同时,由于h5代码只需要一次开发,就能同时在Android和iOS两个平台运行,这也可以减小开发成本,我们称这种h5+原生的开发模式为混合开发。
混合应用的优点是动态内容是H5,使用web技术栈就可以开发,社区及资源丰富,缺点是性能不好,对于复杂用户界面或动画,webview不堪重任。
JavaScript开发+原生渲染
这类开源框架的代表主要是Facebook的React Native、阿里的Weex,当然也有未开源的美团的Picasso,以及最新推出的快应用。
JavaScript开发+原生渲染的方式主要优点如下:采用Web开发技术栈,社区庞大、上手快、开发成本相对较低;原生渲染,性能相比H5提高很多;动态化较好,支持热更新。
当然也有缺点如下:渲染时需要JavaScript和原生之间通信,在有些场景如拖动可能会因为通信频繁导致卡顿;JavaScript为脚本语言,执行时需要JIT,执行效率和AOT代码仍有差距;由于渲染依赖原生控件,不同平台的控件需要单独维护,并且当系统更新时,社区控件可能会滞后;除此之外,其控件系统也会受到原生UI系统限制,例如,在Android中,手势冲突消歧规则是固定的,这在使用不同人写的控件嵌套时,手势冲突问题将会变得非常棘手。
React Native
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和Android两个平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
Weex
Weex是阿里巴巴于2016年发布的跨平台移动端开发框架,思想及原理和React Native类似,最大的不同是语法层面,React Native使用React.js作为开发框架,而Weex则使用Vue.js作为开发框架。Vue和React堪称前端领域最火的JavaScript框架,它们的易用性和功能性都非常强大,Weex在淘宝上也有广泛的应用。
快应用
快应用是华为、小米、OPPO、魅族等国内9大主流手机厂商共同制定的轻量级应用标准,目标直指微信小程序。它也是采用JavaScript语言开发,原生控件渲染。
自绘UI+原生
通过在不同平台实现一个统一接口的渲染引擎来绘制UI,而不依赖系统原生控件,所以可以做到不同平台UI的一致性。注意,自绘引擎解决的是UI的跨平台问题,如果涉及其它系统能力调用,依然要涉及原生开发。这种平台技术的优点:性能高,性能和原生控件接近;灵活、组件库易维护、UI外观保真度和一致性高;不足之处:动态性不足。
Flutter
Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加原生扩展。
Flutter既不使用WebView,也不使用操作系统的原生控件。 相反,Flutter使用自己的高性能渲染引擎来绘制widget。这样不仅可以保证在Android和iOS上UI的一致性,而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。但是Flutter也有不足之处,不支持动态下发代码和热更新。
目前你正在采用哪种跨平台方案呢?互联网行业是岗位调整变动相对比较高频的行业,在不同的公司对技术的使用是不同的。所以为了未来更好的工作,建议广大的前端程序员大神们,多掌握一些相关的技能。这样才能获得更好的机会。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
为什么网站开发要重点考量浏览器兼容性?
作为前端开发工程师,在开发过程中不仅仅要考虑到移动端、小程序、APP等平台及产品,单单在PC端还要考虑各种浏览器的兼容性。为什么同样是浏览器,同样的产品展示的时候回出现不同的效果呢?除了每个浏览器本身开发架构不同之外,主要原因就是浏览器使用的内核不同。
6514
2019-12-03 18:51:40
JavaScript基础语法入门要学什么?
JavaScript是前端开发人员必须熟练掌握的编程语言。相信许多初学者在想要学习JavaScript前,都难免会感到无从下手。虽然JavaScript的入门并不困难,但是如果没有搭建系统化的学习框架,后期会越学越吃力。本文将以博学谷的《JavaScript基础语法入门教程》为参考,给大家介绍一个大致的学习路线和方向,需要的朋友赶紧一起来看看吧!
4868
2020-03-06 17:39:42
零基础如何学好前端?有什么建议?
前端作为互联网时代直接触达用户的窗口,大到我们每天浏览到的网站,小到一次点击按钮的页面,前端无处不在。并且在产品的众多开发环节之中,最能让用户直观感受到的就是前端开发。因而前端行业的广阔发展前景也吸引了不少人的转业学习。那么,零基础如何学好前端呢?有什么建议吗?本文将为初学者详细解答一下这两个问题,下面一起来看看吧!
4867
2020-03-20 19:05:49
Uni-app框架学习教程推荐
Uni-app是一个能够使用Vue.js开发跨平台应用的前端框架。因为上手简单,易学易用等优点而深受前端开发者的青睐。本文将为大家推荐一个免费的Uni-app框架学习教程,从零基础到项目实战,让大家轻松掌握Uni-app框架,下面一起来看看教程详情吧~
6301
2020-05-13 10:31:54
前端开发工程师的必修课——网站重构
网站重构并不是前端开发中的技术,也不是某种标准,而是一种网站前端的理念,也就是我们所理解的页面优化。网站重构是指在不改变网页整体UI设计以及网站外部相关行为的基础上,对整个网站/页面进行优化,让网站的结构更加简单,可读性更强,从而更加有利于搜索引擎的检索,增加搜索引擎对网站的收录,提升网站的排名。网站重构相对于web开发工作而言,更注重用户体验的设计。
4754
2020-08-07 10:30:22