记一次多端统一开发调研历程

自如大前端团队
10,064 阅读6分钟

前言

文章内容提供了如果要做一套多端统一开发之前，需要做的一些准备工作。如果你刚好有相关需要在身，比如要用一套代码同时兼容， H5/各端小程序/App 那么这篇文章可能会提供给你一些帮助，让你少走一些弯路。话不多说，我们开始。

为什么要做多端

在设备多端，以及应用承载方式越来越多，各大平台技术孤立的时代，作为公司运营和技术开发团队，我们需要寻找一套可靠，优秀的技术解决方案，来提升我们开发实现产品的效率，降低实现的技术成本，以及达到最好的产品效果。

选择技术框架前需要考虑的因素

  1. 确认你的项目规模
  2. 确认你的项目在公司的重要程度
  3. 确认你的项目周期
  4. 确认你现阶段所拥有的的技术能力
  5. 确认所选框架的功能，性能，成熟度，可维护性，可扩展性，社区活跃度

目前市场上面较为优秀的产品

  • uni-app DCloud
  • Taro 京东
  • Chameleon 滴滴
  • Hippy 腾讯
  • Weex 阿里

上述几个都是代码更新频次较高的产品。而同时满足 H5、小程序、App的包括Uniapp、Taro、Chameleon。而Hippy 和 Weex就只支持App和H5两端的编译转化。值得一提的就是滴滴的Chameleon的语法是一种类Vue的语法，如果你在考察了之后想用Chameleon的话，那么你需要提前了解一下Chameleon的语法

uni-app就是我们比较熟悉的Vue语法和Vue文件，写法和Vue几乎一致除了路由的结构和跳转时需要用到内置的api来完成。

Taro官方提供了Vue（2，3）和React两个版本。这个就看你自己对于哪个技术栈比较熟悉。但是Taro在对于App的支持上是用到FaceBook的React Native。利用Taro转换成React Native然后集成到现有的App中，如果你想在原生的应用里面做一些事情的话，需要考虑到原生和React Native，以及和Taro之间的兼容性。而且官方提供的TaroUI是不支持React Native的。

既然Taro同时支持两种框架，那么涉猎的范围肯定比较大。那么我们先来了解一下Taro可以干些什么

Taro的特性

安装及使用 | Taro 文档

Untitled.png 在对RN一些环境的安装操作之后，我写了几个小demo来看一下Taro的样式对于微信小程序和App两端在样式上的表现有哪些差异。

在搭建RN环境的过程中，大部分的环境依赖下载都相当的慢而且失败率极高，如果把终端的网络代理到国外的话，可能会加大成功率和下载速度。（具体方法可自行查找）

Snipaste_2021-08-23_11-28-52.png

上面三张图中最左侧是微信小程序，中间是Android，右侧是IOS

  1. 头部的Bar，使用Taro提供的getStatusBar Api获取状态栏高度的时候，可以看出来，小程序端表现良好，Android端起始位置并没有在页面的最顶部，这样就没有办法做到沉浸式状态栏的需求，IOS端的Bar的高度和小程序端表现又有所差异
  2. 对于RN里面大部分元素的display都是inline-block，所以如果横向排列的话，就需要用到flex-direction属性，而且在RN端的值默认是column，纵向排列
  3. RN端如果想要给一段文字设置颜色的话，就需要用Text组件，否则写颜色话是不生效的。小程序端没有这种问题
  4. 如果以web端的形式去处理一个文字溢出的情况，在RN端显然也是不生效的。RN端做到这种效果是借住了Text组件中的numberOfLine的属性。
  5. Box-shadow在RN端同样不生效，而且会发生红屏报错问题

我们可以看出简短的demo中，其实Taro对于微信小程序、Android、IOS三端中，样式的表现还是有一点点的差异化，如果想做到统一，需要写一些兼容性代码。在阅读Taro的官方文档时，我发现Taro的官方文档在基础教程，进阶指南，社区生态等方面做的都是非常好的，毫无疑问的Taro是一款非常优秀且前卫的框架。如果你的需要中没有App的环节，那么Taro是个非常不错的选择。

uni-app

uni-app官方文档

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

可见uni-app对于Vue的支持度是相当友好。而且腾讯课堂也对uni-app有对应的视频教程。如果你是一个初学者，并且你又偏偏不想通过阅读文档的方式来学习uni-app，那么就可以试试。

uni-app的创建方式有两种：

  1. 通过官方提供的HBuildX编辑器一键生成应用
  2. 使用脚手架创建

目前我用脚手架创建了一个应用之后，写了一个静态的demo。话不多说，我们看一下在微信小程序和Android以及IOS中的样式上表现差异

Snipaste_2021-08-23_11-29-15.png

依旧是左侧是微信小程序，中间是Android，右侧是IOS

其实从静态页面上来看，uni-app在三端的样式表现上来说还是比较不错的。比如是文字溢出的效果，transition动画，阴影等表现都没有差异。

uni-app在集成到原生的过程中没有太过于复杂的操作，利用HBuildX的打包，运行等操作，只要有相对应的环境和模拟机/真机。就可以非常简单的运行到相对应的机型上面进项调试。但是有一说一uni-app的官方文档对于阅读者来说不是那么的友好，有的问题不如直接到社区中翻找来的效率高。当然这也间接的说明了uni-app的社区活跃度还是可以的。

如果你的需求中有包含App相关的东西并且你对App及Native端不那么熟悉的话，想必uni-app对你来说是一个比较不错的选择。

迫于还要熟悉chameleon语法的前提下，作者没有深入去了解chameleon对于各端的支持度，如果你对于chameleon非常感兴趣的话，那么也可以动动你勤劳的小手，去了解一下其中的厉害之处吧。

总结

结合自己的项目，业务场景，技术栈等方面需求，选择适合自己的技术方案才是正确的。没有最优秀的技术方案，适合自己的才是最好的。

Untitled 7.png

avatar
文章
阅读
粉丝