抛开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是双渲染引擎可选。视图层可以用webview渲染,也可以用原生渲染。nvue原生渲染支持带来大量的好处,由于内容较多,本文不列举,请另行参考: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统计系统,https://tongji.dcloud.net.cn/。
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年发布的,更低版本的手机在市场上基本没有市占率了。
所以DCloud的建议是,除非你只会html但不会vue,也不想学vue,且对App的性能体验要求不高,不需要扩展原生能力,或者必须要支持Android4.4以下的手机,那么可以使用5+App。其他场景则应该使用uni-app。
46 个评论
要回复文章请先登录或注册
佳佳佳佳佳佳
佳佳佳佳佳佳
DCloud_heavensoft (作者)
黑大帅的潇洒哥
黑大帅的潇洒哥
DCloud_heavensoft (作者)
我一笑而过
3***@qq.com
c***@163.com
c***@qq.com