如今这个互联网时代，很多公司都在使用跨端技术，因为跨端技术开发成本低，效率也比较高，一套代码多端发布，为开发者也省去了很多的时间，下面就基本介绍一下有关跨端的几种技术方案
什么是跨端？
跨端就是使用非封闭式系统语言开发，使得应用能够在多个封闭式操作系统中运行，简单来说跨段就是我们使用一套代码，通过进行编译，最后展示在其他操作系统上，也可以说成展示在其他终端。
目前主流的跨端技术
当然还有其他，这里就说一下比较常用的跨端技术
跨端技术优点
- 一套代码多端发布
- 没有额外学习的成本，比如你擅长使用Vue那使用uniapp就可以开发跨端应用，或者你擅长使用React那可以使用Reactnative来开发跨段应用
Web端渲染 - Hybrid
- webview:Hybrid技术是跨端中最早期出现的，web端渲染主要是依靠webview提供前端环境来进行跨段渲染的，也可以将WebView理解为我们H5中的Iframe
通过上图web端渲染主要是H5通过内嵌的WebView提供的环境去渲染页面，然后在通过jsBrige与Native端进行通信，从而拓展了H5端的功能
- WebView：
为H5端提供渲染环境，并提供h5端访问Native端的API - JSbridge:
H5端与Native通信的桥梁，使得H5端与Native端拥有相互通信的能力，一般常用的通信方式有以下三种。- JS注入
通过WebView提供的接口，向JavaScript的window中注入对象或者方法，让JavaScript调用时，直接执行相应的Native代码逻辑，达到JavaScript调用Native的目的
- 拦截UrlSheme
就是在我们WebView内部去调用接口可以在Native端被拦截到，这里的接口格式必须是：
scheme://[path]?[query]这种格式才能被监听到 - postMessage
message通信方式是WebView提供的api,使在h5端可以与Native端进行通信
- JS注入
原生渲染 - ReactNative/Weex
- ReactNative
作为原生渲染的代表框架，RN 是采用运行 React 的 JS 作为开发平台，这样可以让 web 开发者也能够参与到 Native 开发中来，还有就是 RN 让一套代码可以运行在两端，大大减少了开发和维护成本，但是RN 是采用原生渲染的，性能和体验仅次于 Native 开发。
RN的处理流程就是通过React框架编写UI层，其次通过JSCore对js进行解析，解析期间不会执行，只会分析当前js代码做那些事情，然后通过JSBrige将react与Native进行对接，使其相互拥有通信的能力，通过UIManager将虚拟dom编译成Shadow Views（Yoga）原生视图，最后就是Native Modules为我们代码提供原生能力。
- Weex
是能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验的框架，并支持iOS、安卓、Web等多端部署，由阿里巴巴研发和维护
- uniapp
为什么说将uniapp归为原生渲染，因为uniapp是双渲染引擎，其中包括WebView渲染和Weex原生渲染，其实uniapp也是存在原生渲染的，Uniapp 中的Nvue中集成了Weex,使得Nvue拥有了原生渲染能力,除了使用Weex让uniapp拥有原生能力，在uniapp中还可以使用H5plus技术，其实H5plus就是jsbrige层，通过调用js方法操作原生端。先Weex后Brige,所以性能上面比RN还是差点的。
自建渲染引擎渲染 - Flutter
自建渲染引擎就是直接从底层渲染上实现 UI 的绘制，代表的框架是 Flutter,Flutter是谷歌的移动UI框架,其框架使用Dart开发的，如果对于求高性能的渲染推荐是使用Flutter,弊端就是学习成本比较高。
图片来源于网络
- FrameWork层
Framework使用dart语言实现，包括UI，文本，图片，按钮等Widgets，渲染，动画，手势等
- Engine层
Engine使用C++实现，主要包括:Skia, Dart 和 Text
最后
最后再说一下有关技术选型的问题，如果公司想要快速的研发出来一套跨端项目的话推荐使用uniapp,因为学习成本比较低,对Vue的开发者很是友好,而且uniapp社区在国内超越RN和Flutter,但是性能上面上对于RN和Flutter还是比较差的, 如果你是React推荐使用ReactNative，而且ReactNative在性能上做的也不错，它提供了Expo沙箱和原生两种开发模式，最后就是Flutter,Fullter在性能方面要高于前两种跨段框架的,如果公司想要追求更高的性能还是推荐Flutter。
