uniapp/uniappx总结

uni-app组成和跨端原理

上图所诉 uniappApp的渲染引擎：同时提供了2套渲染引擎，.vue页面文件由webview渲染，原理与小程序相同；.nvue页面文件由weex(原生渲染)，原理与react native相同。开发者可以根据需要自主选择渲染引擎。

uniappx

nvue 是 UniApp 中用于提升性能的 Native Vue 页面，基于原生渲染，主要用于 App 端。它无法直接转换为小程序代码，

uniapp项目中的两套渲染引擎使用

• vue页面：基于WebView渲染，依赖浏览器引擎，性能受WebView限制。
• nvue页面：使用原生渲染（weex），直接调用原生组件，性能更接近原生应用。

uvue是一套基于uts的、兼容vue语法的、跨平台的、原生渲染引擎。

uview组件在2.0版本支持了nvue文件，但是还不在uniappx项目中支持

uniapp在app端运行是 靠 “webview”帮助，

但是原生app中他们大多不用webview这个技术，

uniapp的 发送请求的 responseType是没有 blob这个类型的， responseType: ‘arraybuffer’,

uniapp 标准js和浏览器js的区别

uts

和RN的关系

如果 React Native 和 Weex 是运行时将 js view 转为 native view 去渲染，那么 uts + uvue 就是编译时把 uts 转化为 kotlin view 和 swift view 去打包。

flutter

这是google 旗下的一种新的跨平台开发语言，由于android也是谷歌开发的，所以可以调用的是底层安卓的api

无论是uniapp、还是rn，工程开发的时候虽然是js，但最终还是会打包成一个原生包，也就是native，程序会通过jsbridge搭建起一个js与native之间的桥梁，js做什么操作，返回反馈给native对应的命令，当然这也解释为什么明明在浏览器端有些js语法支持，到了RN和uniapp中就不行的原因，因为不存在对应的native和js的命令映射关系呀！所以有的公司会专门请一个工程师去解决native和jsbridge的问题（例如阿里的1688就是基于weex的hybird开发）。

RN、Flutter、Uni-app APP框架对比

框架背景介绍
Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。

Flutter
Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。

React Native
React Native(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

uni-app
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

技术学习成本和难度
RN， 要求开发者学习React，要求精通Flex布局，要求原生开发协作。
Flutter，要求开发者学习Dart，了解Dart和Flutter的API、要求精通Flex布局，要求原生开发协作。
Weex，已经内嵌到uni-app中，就不单独提了。
uni-app，要求开发者学习Vue，了解小程序。
很明显uni-app的学习成本太低了，它没有附加专有技术，全部使用公共技术。

性能分析和写法的对比
flutter作为界面库（注意它只是界面库，dart语言是另一个项目），它唯一要干的事情就是渲染界面。不像HTML5，flutter界面库连视频、定位等都没有，就是一个纯排版引擎，绘制文字、按钮、图片等常用界面控件。

这个排版引擎的特点是简单、高性能。

3大引擎的性能排名：flutter > react native/weex > webview
3大引擎的编码复杂程度排名：flutter > react native/weex > webview

（uni-app是双渲染引擎，webview和weex都内置了，随便开发者使用切换）

性能好，有个度，客观地讲，rn/weex调用原生渲染的性能，和flutter的渲染性能，在用户体验上并没有明显区别，甚至在很多场景下，和webview渲染的小程序也没有明显区别。

ui库比较
RN和 flutter 在IOS和Android上需要使用2套ui库，
uni-app默认也是这种通用ui风格。uni-app的开发者只需要写一套界面ui，就可以适应不同手机的用户，真正的 write once，run anywhere。

动态性(热更新)
除了flutter，rn/weex/uni-app都可以动态热更新。
标准的flutter 不支持热更新，有团队改造了flutter，使其支持热更新，当然也相对的降低了性能。

由于政策等限制，uni-app x 官方在打包后不提供热更新支持，这个也可以理解，可执行二进制文件的热更新不符合规范，官方如果内置就会导致上架问题，你可以自己二次开发，但是官方绝不能内置。

如果 React Native 和 Weex 是运行时将 js view 转为 native view 去渲染，那么 uts + uvue 就是编译时把 uts 转化为 kotlin view 和 swift view 去打包。

生态
任何开发引擎，都离不开生态。

对于国外的开发者，rn、flutter的生态肯定比uni-app好，比如facebook登陆分享、Google地图等。

但对于国内的开发者，那是反过来的，中国开发者需要的全端推送（UniPush集成了iOS、华为、小米、OPPO等众多原厂推送）、各种国内登陆、支付、分享SDK、各种国内地图、各种ui库、以及Echart图表等，都是在uni-app体系里，这方面生态可比rn、flutter丰富多了。uni-app的插件市场有数千款插件，不能说应有尽有，但确实是最丰富的跨端开发框架生态了。

另外，uni-app的生态还比其他竞品强在如下方面：

App和H5提供了renderjs技术，使得浏览器专用的库也可以在App和H5里使用，比如echart、threejs等参考
兼容微信小程序 JS SDK，丰富的小程序生态内容可直接引入uni-app，并且在App侧通用，参考
兼容微信小程序自定义组件，并且App、H5侧通用，参考
这些丰富的生态兼容，是rn和flutter无法享受的。