跨端方案及选择建议

天大地大老婆最大
1,249 阅读5分钟

本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。

跨端方案介绍

为什么需要跨平台开发

各平台差异巨大，技术栈不统一
  • Android使用Java/Kotn,iOS使用OC/ Swift,web使用 JavaScript
  • 设备厂商众多，系统版本多，屏幕多，兼容和适配工作量大
时间、人力资源紧张，开发效率重要
  • 客户端同学资源紧张，需要更少的资源在更短的时间内完成开发
  • 界面交互并发无法引入响应式框架(react/vue)
  • 为保证效率、方便调试、开发时需要所见即所得

跨平台方案有哪些

  • Flutter
  • React Native
  • Taro
  • Uniapp
  • Weex
  • 各种小程序
  • Hybrid
  • Ionic、coradova

跨平台方案对比

Hybrid
  • 优势：跨平台成本低、App体积小、线上更新无需发版、开发周期短
  • 不足：性能和体验与原生差距大、加载白屏、难与原生组件融合
中间语言编译
  • 性能和体验媲美原生App
  • 应用秒开、无加载白屏
  • 可与原生组件或功能完美融合

Hybrid方案简介

image-20210830111030863

编译型

Flutter简介
什么是Flutter
  • Flutter是谷歌开源色移动UI框架，可以快速在IOS和Android上构建高质量的原生用户界面，Flutter可与原生代码兼容
它是用什么语言编写，与其他移动应用开发有何区别？
  • Flutter使用dart语言构建跨平台应用,通过平台相关的 embedded层接入到使用c+编 写的 engine层,再通过skia库直接与aPU进行交互。通过对dart代码的AOT编译,拥 有优异的计算(cPU、渲染(GPU)性能。
  • Flutter不使用中间层解释或转化,也不使用操作系统的原生控件,而是使用自己 的高性能渲染引擎来绘制界面,从底层抹平了平台的差异
Flutter的性能表现如何?

与其他跨平台方案不同, Flutter不使用中间层通信,使用轻量的C++构建底层,使 用Skia2D引擎渲染界面,性能远超RN和Weex,甚至在低端机比 Native性能还好

Flutter原理

image-20210830111618347

Flutter学习资源

Taro、uni-app、Mpx选型对比

选型对比

框架技术栈案例微信小程序支付宝小程序百度小程序头条小程序H5App
TaroReact丰富√√√√√√
uni-appVue丰富√√√√√√
MpxVue少√√√√××

社区生态

taro官方发布了taro-ui库，awesome里三方组件不太多。

uni-app官方发布了uni-ui库，还有个插件市场，里面轮子很多。

mpx提供了完备的第三方组件库支持

Taro通过Github Issues+微信群方式交流，微信群活跃，贡献代码的人也多。

uni-app有专门的论坛，还有视频教程，QQ群微信群都活跃。

另外文档角度，uni-app的文档比taro要完善，数了数交流群的数量，也是uni-app多不少。

MPX完全兼容原生，坑少。渐进接入简单

uniapp特性

  • 开发者/案例数量更多

    • 几十万应用、uni 统计月活12亿、70+ 微信 / QQ群

  • 平台能力不受限

    • 在跨端的同时，通过条件编译 + 平台特有 API 调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台

  • 性能体验优秀

    • 加载新页面速度更快、自动 diff 更新数据，App 端支持原生渲染支撑更流畅的用户体验，小程序端的性能优于市场其他框架

  • 周边生态丰富

    • 插件市场数千款插件，支持 NPM、支持小程序组件和SDK，微信生态的各种 sdk 可直接用于跨平台 APP

  • 学习成本低

    • 基于通用的前端技术栈，采用 vue 语法+微信小程序 api，无额外学习成本

    aro 和 uni-app 的环境搭建及项目创建、运行编译都比较简单。

    taro的安装及使用：

    # 全局安装 @tarojs/cli
$ npm install -g @tarojs/cli
# 创建 taro 项目
$ taro init myApp
# 进入项目目录
$ cd myApp
# 运行到微信小程序，调试模式
$ npm run dev:weapp
# 发行到微信小程序
$ npm run build:weapp
复制代码

    uni-app的安装及使用：

    # 全局安装 vue-cli
$ npm install -g @vue/cli
# 创建uni-app项目
$ vue create -p dcloudio/uni-preset-vue my-project
# 进入项目目录
$ cd my-project
# 运行到微信小程序，调试模式
$ npm run dev:mp-weixin
# 发行到微信小程序
$ npm run build:mp-weixin
复制代码

    开发流程方面，taro和uni-app均是以微信小程序为基础，也都针对小程序的开发弊端，提供了更优秀的体验，比如：

    • 均支持使用 npm/yarn 安装管理第三方依赖
    • 均支持使用 ES6 甚至更新的ES规范
    • 均支持使用 less/scss/ts 等预编译器
    • 均支持进行应用状态管理，taro 支持 Redux/Mobx，uni-app 支持 vuex

    开发工具方面，taro官方未特别推荐IDE，但提供了vscode支持的d.ts； uni-app推荐的开发工具是他自家的HBuilderX，用它可以不配环境，开箱即用； hbuilder以前接触过，当时没深研究，新版还挺让我意外，真没想到国人的开发工具可以做到这样，尤其是他家的markdown支持真心不错，于是本文就是在hbuilder里写的（已经有情感分了哈哈）。

    总结：两个框架都支持现代前端开发流程。hbuilder对uni-app提供了优化定制，但对不熟悉的开发者有一定适应成本。另外hbuilder自带一个编译器，和cli装在项目下的编译器是2个，这个坑不少新人要注意别踩。

我的建议是：熟悉vue使用uniapp，熟悉react,就使用taro

avatar
文章
阅读
粉丝