跨平台开发框架到底哪家强？5款主流框架横向对⽐！
跨平台开发框架到底哪家强？
⽬前市场上有多个专业做跨平台开发的框架，那么对开发者来说究竟哪⼀个框架更符合⾃⼰的需求呢？笔者特地总结对⽐了⼀下不同框架的特性。
国内外笔者选择了⼀共5个主流的测评对象，分别是RN，Flutter，Ionic，NativeScript，以及⽤友APICloud团队开发的AVM。
⽬前来看⽐较⽕的应该是 Flutter，次之 RN，具体还要看企业的应⽤场景和领域，AVM，Ionic，NativeScript 在不少企业和个⼈开发者中也使⽤率较⾼。
⼀，安装环境，开发⼯具对⽐。
任何框架的安装环境都代表了这个框架对新⼿是否友好。所以笔者特别从安装环境，开发⼯具上介绍各个不同框架的情况，来⽐较⼀下，新⼈上⼿的成本和门槛，笔者是 MacOS ⽤户，以下全⽂介绍的都是在 Mac 下的开发环境和开发⼯具。
1.1 React Native
我们来看安装环境和开发⼯具，从最新的官⽹可以看到，如果只是上⼿的话还是⽐较⽅便的，只需要本地安装 Nodejs 12版本以上就可以了。然后借助官⽹推荐的 Expo ⼯具可以快速搭建起来本地的⼀个开发环境。因为笔者是 MacOS ⽤户，之前安装过 Xcode 所以整体安装起来还算是流畅。
⾸先是 Nodejs 的命令⾏⼯具安装：
yarn global add expo-cli
这⾥不说配置源什么的了，如果慢的话，可以切换国内 yarn 源，安装完毕后，直接使⽤
expo init AwesomeProject
安装项⽬，项⽬安装完毕后进⼊项⽬执⾏
yarn start
会重新安装⼀次 expo-cli，之后本地启动项⽬，打开 dev 的浏览器界⾯如下，最左边可以看到打开的是本地的 expo 得调试台，选择本地LAN ⽹络，然后点击 Run on iOS simulator，启动了笔者本地的⼀个 iPhone 8的设备，然后看到了现在的界⾯，最右边是本地⽣成的模板代码。
编辑⼯具笔者⽤的 vscode，官⽅也是推荐 vscode。使⽤脚⼿架的⽣成的⽬录和正常的 React 项⽬差不多，⼊⼝在 App.tsx ⽂件，⽀持修改后的 hotRload，整个流程⾛下来对前端开发来说门槛不⾼，⾄少到调试开发阶段，如果只单纯涉及到 UI 编写，配置完直接就可以开始⼲活了。
1.2 Flutter
最近⼏年发展的⽐较猛，各⼤公司都在主端业务引⼊，包括笔者所在的公司也有很多业务使⽤ Flutter 进⾏了 UI 部分的开发，下边笔者就简单介绍⼀下 Flutter 的开发环境和⼯具。
⾸先肯定是需要下载安装完整的 Xcode 和 Xcode developer tools开发⼯具，默认⼤家都装了，之后不在赘述。
解压缩 SDK 后设置对应的 SDK 环境变量地址：
cd ~/development
unzip ~/Downloads/flutter\_macos\_vX.X.X-stable.zip
export PATH="$PATH:`pwd`/flutter/bin"
如果过程中遇到问题可以使⽤ flutter doctor 来查看问题进⾏修复，有报错或者缺失环境，会有提⽰你如何修改，⽐较⽅便。
如果 flutter doctor 没有报错的话，那么flutter 命令⾏就安装完成了，我们来看⼀下开发体验。
⾸先笔者都是⽤的 vscode 进⾏开发的，需要安装官⽅推荐的 vscode 插件，直接在插件市场搜索 Flutter 安装就可以了，之后就可以通过插件新建 Flutter 新项⽬了。
本地配置好对应的 iOS 模拟器，在 vscode 左边点击调试按钮选择对应的模拟器，就可以直接进⾏开发调试了。
截图是笔者做的⼀个⼩应⽤项⽬，⽬录结构也⽐较简单，在 lib ⽬录下的 main.dart 就是⼊⼝⽂件，唯⼀缺憾的就是 Flutter 对前端开发的语法不友好，Dart 虽然也不复杂，但是和 JavaScript 还是有⽐较多的出⼊的，需要⼀定时间的掌握和学习，⽽且对应的不少系统类库⽤法也不太⼀样。
整体来说⽐ RN 要配置的复杂⼀些，对前端开发来说，Dart 语法是⼀个挑战，编写应⽤除了 Dart 之外还需要理解 Flutter ⾃⼰的状态管理机制，widget 概念以及对应的 material 相关库的功能才能上⼿，对
新⼈门槛还是⽐较⾼的。
1.3 Ionic
react开发框架Drifty Co.在2013年推出了Ionic，可以说是混合式开发（hybrid）的⿐祖了，他推出之前⼤家⼀般都是在 PhoneGap 下开发混合式开发应⽤，Ionic ⼀开始是和 Angular ⾼度集成的，现在已经⽀持了 React 和 Vue 集成，以及可以使⽤ Cordova 的库，⽣态整体来说还是不错的，优点是 Web 技术为主，缺点也很明显，Webview 的表现和性能与 RN，Flutter 那种编译后转 Native Code 的性能对⽐肯定要差⼀些，⼀些 Web不⽀持的特性需要编写⼤量的原⽣插件来⽀持。
下边来看⼀下他的安装环境和开发⼯具部分体验，⾸先安装全局的cli 命令⾏⼯具，Nodejs 版本12.14以上。
npm install -g @ionic/cli
ionic start myIonicApp blank --type vue
ionic serve █
看起来还是⽐较简单，但是需要安装的东西⽐较多，建议提前把 npm 设置成国内源，否则要等很久很久很久。
使⽤ serve 之后，其实本地就是起了⼀个 webpack-dev-server。
打开8100地址，其实就是⼀个正常的 web 项⽬，熟悉 vue 的同学⼀眼就能看出来了，IonicVue是作为 Vue 的⼀个插件存在的。
那么看⼀下如何在模拟器上预览吧，⾸先需要安装下边两个⼯具，是前置依赖。
npm install -g ios-sim
brew install ios-deploy
然后在项⽬⽬录先 build 项⽬，然后我们直接使⽤ Ionic Cli：
npm run build
ionic capacitor run ios -l --external
选择⼀个本地的模拟器，之后就可以看到界⾯了，但是因为笔者本地的 Xcode 是11的⽼版本，会报编译错误，所以需要升级到最新的Xcode12以上版本，但是笔者的 Xcode 升不上去了，因为笔者的电脑系统不⽀持更⾼级别的 Xcode，所以后边改成⽤ android 调试。
笔者之前安装过 android studio，需要更新SDK 到最新，然后在 tools ⾥到 AVD ⾯板，创建⼀个模拟器。
启动后需要 adb devices 检查⼀下，如果设备在线，再进⾏下⼀步：
ionic capacitor add android
ionic capacitor run android
这⼀步第⼀次⾮常⾮常慢，应该是和 ios ⼀样，需要编译成 apk 再同步到模拟器上。
最后的效果就是这样，看到⽇志的最后⼏⾏就是 deploy 了⼀个debug 的 apk 到模拟器了。
整体来说，Ionic 的安装步骤不算复杂，如果⽹络⽐较好，整个过程不到半⼩时，如果是最新版的 MacOS 系统，升级 Xcode 到最新版应该也⽐较流畅。看了⼀下官⽹，debug ⽅式就是利⽤ chrome 或者 safari 的⽹页调试⼯具调试，所以⼤家理解，这个Ionic 套壳了webview，调试⽅法和 webview 调试⽅法是⼀致的。
1.4 NativeScript
下边看⼀下他的安装环境和开发⼯具体验，依然是 MacOS 系统环境搭建。
同样是需要先安装 NativeScript 的Cli ⼯具：
npm install -g nativescript
过程中会遇到从 codeload 下载依赖，可以设置代理或者修改 codeload 的 host 解决 ，笔者就遇到了，但这不是 nativescript 的问题
：）。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。