移动端技术路线

1. 移动端技术路线

在移动互联网发展初期，业务场景并不复杂，原生开发还可以应对产品需求迭代。但近几年，随着物联网时代到来、移动互联网高歌猛进，日新月异，在很多业务场景中，传统的纯原生开发已经不能满足日益增长的业务需求。主要表现在：

动态化内容需求增大；当需求发生变化时，纯原生应用需要通过版本升级来更新内容，但应用上架、审核是需要周期的，这对高速变化的互联网时代来说是很难接受的，所以，对应用动态化(不发版也可以更新应用内容)的需求就变的迫在眉睫。
业务需求变化快，开发成本变大；由于原生开发一般都要维护Android、iOS两个开发团队，版本迭代时，无论人力成本，还是测试成本都会变大。

总结一下，纯原生开发主要面临动态化和开发成本两个问题，而针对这两个问题，诞生了一些跨平台的动态化框架。

H5: 最早出现的跨平台解决方案，运用传统的Web技术，配合移动端Web容器，实现跨平台。其兼容性由移动端Web容器内核、渲染引擎和Web容器提供的jssdk(通过Web调用Native能力的接口)保证。

React Native: 由Facebook开源，最早的性能接近原生开发的跨平台框架。其底层是针对iOS、Android两大平台的Native实现，上层暴露统一的组件和接口，从而实现一套代码可以跨平台复用。其兼容性是由官方或第三方提供的React Native基础库保证的。

Weex: 目前主要由阿里维护，解决跨平台思路和React Native相同。其兼容性也是由官方或第三方提供的Weex基础库保证的。

Flutter: 由Google开源，重写了界面绘制引擎。通过它在底层的绘制实现上来抹平不同平台上界面开发的差异，用户界面上真正做到了「每一个像素点可控」。

技术类型	UI渲染方式	性能	开发效率	动态化	典型代表
H5+原生	WebView渲染	一般	高	支持	mPaaS、微信小程序
JavaScript+原生渲染	原生控件渲染	好	高	支持	ReactNative、Weex
自绘UI+原生	调用系统API渲染	好	高	默认不支持	Flutter

说明：

性能、开发效率、动态化的支持是考量技术方案是否适用的重要依据。需结合团队人员的情况，业务场景对于性能和动态化的需求程度来考虑哪种技术方案能带来更高的价值。

界面组件库：统一的组件库可以保证复杂业务功能的界面风格一致性。如果团队有实例可以考虑自建组件库，也可以考虑用目前社区比较活跃的组件库：ant design、elementUI、vantui等
动效：好的动效运用往往能取得很好的用户体验效果。结合用户的界面滑动，改变界面的展现布局，等待请求返回时展示一个有趣的加载动画在移动app中越来越常见
懒加载：移动app中经常会有很长的界面，一次加载所有内容会有较长等待时间。一般采用懒加载的技术方案，当界面滑动到某区域时才加载相应内容
缓存：对于一些会多次加载的媒体资源，采用本地缓存的方式，加速第二次加载的时间
缩略图生成：
设备屏幕及字体适配：