5+App和uni-app在App开发上的对比

来客电商

抛开uni-app可以开发多端,而5+App只能开发App不谈。本文只谈仅做App的情况下,uni-app的App和5+App有什么区别。

5+App是DCloud上一代产品,基于webview扩展的混合开发技术。它的每个页面都是一个webview加载一个html页面,调用原生扩展能力时通过webview的桥通信实现。
5+App可以满足常规App的开发,并且基于html开发比较简答。但距离第一流互联网体验要求的App而言,5+App难以满足这种要求。

于是DCloud新出了uni-app。uni-app引入了独立的jscore,逻辑层和视图层分离,并且视图层支持Webview渲染和nvue原生渲染的双渲染引擎,开发者可以做出更高性能和体验的App。

uni-app比5+App的改进具体包括

引用独立的js引擎,将逻辑层和视图层分离,用多线程解决卡顿问题

webview是单线程的,不管多少个webview,它们的js跑在同一个线程里,会互相影响。js即运行逻辑,又操作页面渲染,经常会阻塞。

引入独立的js引擎(jscore)后,由单线程变成双线程。将逻辑层和视图层分离,逻辑层运行在jscore里,视图层仍然在webview里,可以大幅提升页面加载体验。

比如新页面动画进入时,在5+App里,需要先打开一个新webview,然后这个webview里的js代码去联网下载数据,下载数据后填充到页面,这样等待时间会很长。
但在uni-app里,打开新页面时,联网是在始终都存在的jscore里进行了,同时另一个线程打开了视图层的webview页面,它们双线程并行工作而不是串行,所以新页面内容加载非常快。

5+App要想加快新页面速度,往往需要做预载。这增加了内存占用和代码复杂度。uni-app无需预载,可以快速加载新页面。

当然引入独立的jscore也会有代价,就是Android包体积增加,一个Android的js引擎大约7M的体积。iOS由于系统自带jscore,不需要新增js引擎体积。

双线程还有一个负面问题是两个线程之间通信是需要时间的,高频通信不能像在webview里那样自由写代码,需要依靠uni-app提供的renderjs方案来解决这类问题。(react native也有这类阻塞问题,但它没有解决方案,不如uni-app)

支持原生渲染

5+App是webview渲染的,而uni-app是双渲染引擎可选。nvue原生渲染支持带来大量的好处,由于内容较多,本文不列举

原生插件系统改进和生态区别

5+App是基于Webview的js桥通信和原生能力对接的,这种做法,需要在原生层和js层编写大量代码才能互相对接起来。

uni-app是jscore和原生能力对接的,此时原生插件编写,主要是写原生代码,插件开发工作量大幅减少、插件使用也变的更加方便。

DCloud已经淘汰了5+App的原生插件扩展模式,并且为uni-app建立了插件市场。

所以uni-app有丰富的原生插件生态,这对开发者很重要。选择5+App将无法享受这种生态。

底部选项卡的逻辑

5+App的启动逻辑,是先打开lauchWebview,然后由这个Webview加载页面内容和逻辑,包括创建底部选项卡。每个选项卡都是一个Webview,以父子Webview嵌套方式排版。整个应用的启动速度和内存占用都比较高。

在uni-app里,App启动时是原生先根据pages.json描述绘制底部选项卡,这个速度是非常快的。并同时打开jscore,jscore的启动时间也比Webview快很多。不同的选项卡的Webview不是父子嵌套,渲染压力和内存占用都要好很多。

软键盘优化

  • Android软键盘底部灰一下的问题

5+App的软键盘,在Android上,弹出和收起时,底部会灰一下,因为键盘移动的速度很快,而Webview的大小调节速度没那么快。

uni-app里则没有这个问题。

  • 软键盘右下角按钮自定义问题

Webview里的软键盘,右下角按钮无法自定义为“发送”。uni-app通过提供nvue原生渲染解决了这个问题。

区域滚动长列表的体验和自定义下拉刷新问题

Webview的页面超长滚动没有问题,但区域想要长列表滚动就性能非常差了。

这需要uni-app的nvue里的list组件或recycle-list组件来解决。没有这种技术,很多优秀的交互做不出来,比如可吸顶、可左右滚动的区域长列表。

包括区域长列表的自定义下拉刷新,也无法在5+App的框架下给出高性能的方案,还是需要nvue的refresh组件。

同屏多Webview的内存消耗

5+App里经常需要做Webview的嵌套或同屏覆盖:

比如要盖住map等原生组件,就需要再创建一个webview去盖住它。

比如左右拖动的顶部选项卡+长列表,需要创建多个webview形成webview group才能保证体验。
这些做法非常占用内存,并且屏幕渲染时要处理的逻辑非常多,导致渲染变慢。
uni-app里完全没有同屏多webview并存的现象,它通过nvue来解决上述问题,一个nvue页面的内存占用要比一个webview的内存占用小太多了。

WKWebview的坑

由于Apple废弃了灵活的UIWebview,强推WKWebview,这对传统混合开发的应用造成了很大的限制。
WKWebview的跨域问题让人非常烦恼,内存不足时自动单屏崩溃(白屏)问题更是无解。
uni-app的js由于运行在jscore而不是WKWebview里,所以不存在这些问题。

uni统计

uni-app同时配套了一个强大的uni统计系统,uni统计可以免打点统计非常多内容,是运维的好帮手。

技术支持和社区生态

uni-app有十几万人的官方QQ群/微信群,各个群都活跃。网络上的视频教程、经验分享也更多。
5+App的使用人数比uni-app少很多,交流群活跃程度、资料丰富度都不及uni-app。

5+App的优势

虽然uni-app优于5+App很多,但5+App也有一些优势:

  • 入门简单:uni-app要求开发者必须掌握vue。而5+App只需要会html即可。
  • 包体积小,Android不需要引入7M的独立js引擎。不管Android还是iOS都不需要引入1M的uni-app基础组件框架
  • 5+app的Android最低版本支持到2.3、iOS最低支持7。而uni-app的Android最低是4.4、iOS最低9。事实上Android4.4是2013年发布的,更低版本的手机在市场上基本没有市占率了。

所以建议是,除非你只会html但不会vue,也不想学vue,且对App的性能体验要求不高,不需要扩展原生能力,或者必须要支持Android4.4以下的手机,那么可以使用5+App。其他场景则应该使用uni-app。

本文源于uni-app官方,此文仅供大家学习,侵删!


<来客推(www.laiketui.com)是国内知名商城系统及商城网站建设提供商,为企业级商家提供零售商城、B2B2C多用户商城系统、社区团购商城系统、微信分销系统、小程序商城、商城系统等多端商城网站建设解决方案>

申明:本网站部分文章和图片来源网络编辑,如有侵权及时沟通删除,来客电商原创文章,转载请注明来源。

相关新闻

联系我们

售前咨询:点击这里给我发消息

技术咨询:点击这里给我发消息

工作时间:周一至周五,9:00-18:00,节假日休息

QR code