移动端开发

随着移动互联网时代的全面到来，涌现了一批又一批形形色色的移动端app，除了原生的IOS、Android应用，各大互联网厂商都推出了基于自家应用平台的小小程序，例如：微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝。还有各大手机厂商基于自家操作系统推出的快应用等等。可谓百花齐放，这给前端开发带来更多机遇的同时，也带来的更大的挑战。

面对如此之多的移动互联网平台，逐一开发成了一个庞大的工程，在此背景下，跨平台开发应运而生，她们都有一个共同的特征：一套代码，多端发布。在提高了效率的同时，也极大的降低的成本。

在当今的移动应用开发领域，有许多跨平台开发框架可供选择，其中uni-app、Flutter和React Native是三个最受欢迎的选项。这些框架各有优缺点：

uni-app

优点：

• 开发语言统一：使用Vue.js作为开发语言，对开发人员来说，可以减少学习成本。

• 一次编译，多端运行：uni-app支持一次编译生成iOS、Android、H5等多端的应用程序，提高了开发效率。

• 完整的生态：基于微信开发者工具，uni-app拥有丰富的插件和模板，可以快速构建出各种类型的应用。

• 良好的性能：uni-app使用原生渲染引擎，使得其性能接近原生应用。

缺点：

• 学习曲线：对于没有Vue.js经验的开发者来说，需要一定的学习成本。

• 插件限制：uni-app的插件大多基于Vue.js，对于非Vue.js的插件支持可能不够好。

• 定制化限制：由于uni-app主要面向小程序开发，对于高度定制化的原生应用可能无法满足需求。

Flutter

优点：

• 性能优异：Flutter使用Dart语言，具有垃圾回收和JIT编译器等特性，使得其性能接近原生应用。

• 丰富的UI库：Flutter有大量高质量的UI组件库，可以快速构建出美观的应用程序。

• 跨平台：Flutter支持iOS、Android、Web等多平台开发。

缺点：

• 学习曲线：Flutter的学习曲线相对较陡，需要掌握Dart语言和Flutter框架。

• 渲染机制：Flutter使用Skia图形库进行渲染，与系统原生渲染可能存在差异。

• 原生插件：Flutter的插件大多基于Dart，对于非Dart的插件支持可能不够好。

React Native

优点：

• JavaScript和React知识：React Native使用JavaScript和React，对于已经熟悉这些技术的开发者来说，可以快速上手。

• 原生组件：React Native可以调用原生组件和API，使得其具有接近原生应用的功能和性能。

• 学习曲线：React Native的学习曲线相对较平缓，对于有JavaScript和React经验的开发者来说，可以快速上手。

• 社区支持：React Native拥有庞大的社区和丰富的第三方库，可以快速解决开发中的问题。

缺点：

• 调试困难：相比Flutter和uni-app，React Native的调试过程可能更复杂和困难。

• 性能：虽然React Native可以调用原生组件和API，但其性能仍然无法与原生应用相媲美。

• 跨平台：虽然React Native支持iOS和Android平台，但其对Web平台的支持相对较弱。

跨平台带来的问题

多端发布会带来严重的兼容问题，由于很多跨平台的原理还是基于webview展示，也就是说将html页面运行在浏览器上，对于不同的应用、不同的操作系统、不同的浏览器内核，代码的表现形式是不一样的。

举一个很普通的例子：在flex布局中，我们常用gap属性来控制间距。

.box{
	display:flex;
	gap:20px;
}

这段代码在web和Android端都没有什么问题，但是在IOS版的微信小程序中，gap是不被支持的。

这种兼容问题还有很多，形形色色的浏览器内核终是前端发展的拖油瓶，我们在前几年送走了”毒瘤“IE浏览器，微软将Edge作为系统浏览器，Edge采用的是和chrome一样的浏览器内核，这是微软的妥协也是整个浏览器生态的进步。然而苹果的safari正在步IE后尘的，而且有极大的可能成为第二个IE。而且苹果设备只支持safari浏览器作为应用内嵌浏览器，也就是说不管是哪家的App，如果要内嵌浏览器，必须是safari。这将是一个不好的风格。

uni-app跨平台实战

上面提到uni-app使用Vue.js作为开发语言，同时支持Vue2、Vue3、TypeScript，对于vue开发者来说可以0成本上手。一直以来也是将uni-app作为我移动端的主要技术栈，如下是开发的具体项目：