移动跨平台开发框架选型的建议和原因分析

| 2022-12-28 21:05 阅读 59325 评论 0

从 iPhone 诞生至今，智妙手机风行全球已快要20年，智妙手机操纵系统 iOS 和 Android 也成为见义勇为的顶流般的存在，而作为其背后的灵魂，移动利用也随着技术的成长已经越来越丰富。假如从技术层面来说，移动 App 也从最起头单一的原生开辟（Native App）形式，演变出了夹杂开辟（Hybird App）、网页利用开辟（Web App），为什么会有这类成长的变化呢？

由于原本的 Native App 有一个明显的痛点，就是不异的功用需要在分歧的平台上都实现一遍，所以就有了一个很迫切的需求，能否只需要写一次代码，便可以在各个端都运转？

移动跨平台的逻辑

跨平台开辟从本质上讲是为了增加营业代码的复用率，削减由于要适配多个平台带来的工作量，从而下降开辟本钱。在进步营业专注度的同时，可以为用户供给分歧的用户体验，实现“多快好省”的结果。

跨平台是跨哪些平台？怎样样的跨平台逻辑？从当前的现真相况来看，移动端跨平台需求首要集合在以下3点：

桌面端跨移动端：桌面向移动端过渡的早期，希望 PC Web 与移动 Web 复用同一套代码。
Native 跨 Web：一套功用差不多的 Web 页可以在端外拜候，需要跨 Native App 与 Web。
跨系统双端：出于开辟效力等缘由，希望 Android、iOS 双端复用一套营业代码，这也是今朝首要的需求点。

而放眼未来，我们预见能够还会有这些跨平台需求：

跨小法式/轻利用：即用即走的轻量级利用，如各平台的小法式、 Android 快利用、iOS App Clips。
跨 IoT 装备：各类有显现屏的装备城市成为新的进口，如车载装备、智能电视等。

移动跨平台计划的成长

不可是移动利用的开辟形式在延续的演变，跨平台开辟计划也牢牢的跟从着开辟形式的变化延续的演进，依照技术的成长，跨平台计划可以分为三个时代。

1、Web 容器时代

基于 Web 相关技术经过阅读器组件来实现界面及功用，典型的框架包括 Cordova、Ionic 和微信小法式。Web 时代的计划，首要采用的是原生利用内嵌阅读器控件 WebView的方式停止 HTML5 页面衬着，并界说 HTML5 与原生代码交互协议，将部分原生系统才能表露给 HTML5，从而扩大 HTML5 的鸿沟。这类交互协议，就是我们凡是说的 JS Bridge。

2、泛 Web 容器时代

采用类 Web 标准停止开辟，但在运转时把绘制和衬着交由原生系统接收的技术，代表框架有 React Native、Weex 和快利用等。过渡到泛 Web 容器时代，优化了 Web 容器时代的加载、剖析和衬着这三大进程，把影响它们自力运转的 Web 标准停止了裁剪，以相对简单的方式支持了构建移动端页面需要的 Web 标准（如 Flexbox 等），也保证了便利的前端开辟体验；同时，这个时代的处理计划根基上完全放弃了阅读器控件衬着，而是采用原生自带的 UI 组件实现取代了焦点的衬着引擎，仅连结需要的根基控件衬着才能，从而使得衬着进程加倍简化，也保证了杰出的衬着性能。

3、自绘引擎时代

自带衬着引擎，客户端仅供给一块画布即可获得从营业逻辑到功用显现的多端高度分歧的衬着体验。Flutter，是为数不多的代表。Flutter 斥地了一种全新的思绪，即重新至尾重写一套跨平台的 UI 框架，包括衬着逻辑，甚至是开辟说话。

移动跨平台技术计划的对照

对照现有的跨平台技术息争决计划也可以分为三类，别离是 Web 跨端、容器跨端、小法式跨端。

1、Web 跨端

Web 跨端比力好了解，由于 Web 与生俱来就有跨真个才能，由于只要有阅读器或 WebView，现在绝大大都端上（甚至包括封锁的小法式生态）都支持 Webview，所以只要开辟网页然后投放到多个端即可轻松跨平台，例如 Web App、PWA（Progressive Web Apps）、Hybrid App、PHA（Progress Hybrid App）。

优点：

没有额外的进修本钱，一套根本技术吃全国
不依靠特别的配套设备，从开辟、调试到运维等一切工程化环节都是通用的
背靠 npm 庞大的生态，百万模块，包罗万象

弱点：

经常会碰到白屏、卡顿等情况，用户的体验欠安
没法挪用系统的权限，例如多媒体、蓝牙、相机等
性能欠好，对内存的消耗大

2、容器跨端

另一种同一多真个思绪是将 Native 定制成标准容器，让同一份代码跑在一个个标准容器中。比力典型的代表是React Native 、Flutter、Weex，这类计划经过尽能够的扬长避短，综合了 Web 生态和 Native 组件，让 JS 履行代码后用 Native 的组件停止衬着，以处理抛弃 Web 历史负担的题目。

具体来说 React Native 可以跨 Android、iOS、Web、Windows 四端，Flutter 可以跨 Android、iOS、Web、Linux 四端，Weex 可以跨 Android、iOS、Web 三端。

优点：

Flutter 快速的开辟，富有表示力的精彩UI和类似本机的性能
React Native 专注于用户界面，使利用法式开辟职员可以构建高度牢靠的界面
Weex 页面就像开辟普通网页一样；在衬着 Weex 页面时和衬着原生页面一样

弱点：

React Native 没有供给的需要自界说的利用，照旧需要利用原生开辟
Flutter 构建的利用法式文件很大，没有普遍的资本根本，这意味着能够找不到开辟所需的第三方库和包
Weex 由于起步比力晚，社区活跃度不如RN，材料和开源项目也相对较少

3、小法式跨端

小法式跨端也比力好了解，就是让一样代码的小法式可以运转在多个 App 中，例如开辟完一个小法式除了让其运转在微信之外，还能运转在付出宝、百度等超级App，甚至是自己的 App 中。

假如说小法式照旧是依靠 Web 技术运转的，那为什么还要零丁去利用小法式呢？就像前面所说到的一样，Web 始终没法挪用例如相机、蓝牙等这样的权限，而且用户利用体验会收到一定的影响。而小法式则分歧，小法式具有强大的 Web 衬着引擎、供给丰富组件、支持当地缓存、避免 DOM 泄露等，而且其初衷是开放，例如微信、付出宝这样的超级 App 也都相继开放了小法式上架才能，小法式逐步成为跨 App 的正规方式。

前期也甚至出现了小法式容器，可以让小我或企业自己的 App 具有小法式的运转才能，让其他 App 可以具有超级 App 分歧的小法式跨端才能。

上风：