DCloud_heavensoft
DCloud_heavensoft
  • 发布:2020-04-25 15:21
  • 更新:2024-05-09 03:08
  • 阅读:45560

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

分类:HTML5+

抛开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的嵌套或同屏覆盖:

  1. 比如要盖住map等原生组件,就需要再创建一个webview去盖住它。
  2. 比如左右拖动的顶部选项卡+长列表,需要创建多个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也有一些优势:

  1. 入门简单:uni-app要求开发者必须掌握vue。而5+App只需要会html即可。
  2. 包体积小,Android不需要引入7M的独立js引擎。不管Android还是iOS都不需要引入1M的uni-app基础组件框架
  3. 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。

6 关注 分享
skysowe webwebweb test_a 对方正在输入中 7***@qq.com 4***@qq.com

要回复文章请先登录注册

DCloud_heavensoft

DCloud_heavensoft (作者)

回复 黑大帅的潇洒哥 :
是不是数据量特别大,超时机制不同?另外在renderjs里,也可以调用浏览器的websocket
2024-05-09 03:08
黑大帅的潇洒哥

黑大帅的潇洒哥

回复 黑大帅的潇洒哥 :
这个问题的确是存在的,希望能够看一下,wss://xrplcluster.com 地址,h5端可以用, app端就是报onError,而且获取不到error信息
2024-05-09 00:36
黑大帅的潇洒哥

黑大帅的潇洒哥

uniapp的uni.connectSocket 还是有兼容性问题吧,我10个网路节点的话,h5使用原生的Websocket都能连接,用uni.connectSocket,有2个节点会出现连接上就端口一直连不上,uni.connectSocket是不是没有遵循WebSocket规范还是什么原因。节点是第三方的,我无法修改,但是可以确定节点是有大量的人员在用,我可以提供下url给你们,wss://xrplcluster.com 和 wss://xrpl.ws 这两个瑞波币交互节点,直接简单连接下就知道了。
2024-05-08 18:16
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 我一笑而过 :
uni-app里支持plus.的api
2023-09-02 17:48
我一笑而过

我一笑而过

h5+的一些API能力,uniapp上还有不少做不到的吧?
2023-09-02 17:45
3***@qq.com

3***@qq.com

vue打包成dist 通过5+APP 打包成apk apk是默认的竖屏 , 怎么给他整成打开apk 就直接横屏显示
2022-12-13 09:31
c***@163.com

c***@163.com

5+app:你“targetSdkVersion设置>=29后在Android10+系统设备不支持当前路径。”
2022-10-25 14:12
c***@qq.com

c***@qq.com

不要放弃5+app啊
2022-04-04 09:12
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 2***@qq.com :
hx启动服务?是内部web浏览器吗?h5plus的app运行时,hx不会启动任何服务,如果有服务应该也是你的npm库的行为
2022-03-01 17:01
2***@qq.com

2***@qq.com

回复 DCloud_heavensoft :
h5plus 搭配 nextjs编译后的静态资源 运行出现无法正确指向静态资源,因为hbuildx启动的服务为 http://127.0.0.1:8848/dist/index.html,导致后续静态资源指向错误,请问dist该怎么删掉?
2022-02-25 01:14