5+App和uni-app在App开发上有何区别？

谁借莪１个温暖的怀抱￠ 2022-12-20 11:28 1126阅读 0赞

抛开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原生渲染支持带来大量的好处，由于内容较多，本文不列举，请另行参考：[nvue使用指南][nvue]

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

5+App是基于Webview的js桥通信和原生能力对接的，这种做法，需要在原生层和js层编写大量代码才能互相对接起来。  
uni-app是jscore和原生能力对接的，此时原生插件编写，主要是写原生代码，插件开发工作量大幅减少、插件使用也变的更加方便。  
DCloud已经淘汰了5+App的原生插件扩展模式，并且为uni-app建立了[插件市场][Link 1]。  
所以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/][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。

[renderjs]: https://uniapp.dcloud.io/frame?id=renderjs
[nvue]: https://uniapp.dcloud.io/use-weex
[Link 1]: https://ext.dcloud.net.cn/
[https_tongji.dcloud.net.cn]: https://tongji.dcloud.net.cn/