移动端调研分析

移动端开发调研分析

uniapp

优点：快速低成本，没有复杂交互场景和大数据渲染的情况，是当前跨平台方案中最快的。

项目需要同时进行小程序和移动app的迭代需求，开发人员少，uniapp也是个好选择。

缺点：uniapp的js和原生的通信问题，当前框架采用vue，采用云打包的方式生成apk发布使用，可以打开布局边界查看下布局,其中完全使用网页的形式呈现给用户，基本跟android不怎么挂钩，即便挂钩，官方也已经作出了api供用户使用。虽然说完全使用网页的形式制作，但性能方面不是很好，因为官方做出了很多网页的优化,具体性能劣势于flutter，RN，插件市场的问题：插件会有较多的bug，vue3不兼容等情况，生态相较于RN，flutter 有一定差距。

市场：偏向于小程序

技术、工具：vue3、原生SDK、uniapp、HbuilderX

flutter

优点：flutter自制了一套自己的SDK，直接使用GPU渲染机制，在用户手机上 非常直接的 canvas draw view，uniapp、RN 则是通过JSBridge建立js 和原生之间的桥梁

缺点：学习成本和开发比较大

html 写法
<div class="greybox">  
  <div class=redbox>  
    smaple text  
  </div>  
</div>  
 
.greybox {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  background-color: #e0e0e0; /* grey 300 */  
  width: 320px;  
  height: 240px;  
  font: 18px  
}  
.redbox {  
  background-color: #ef5350; /* red 400 */  
  padding: 16px;  
  color: #ffffff  
} 
flutter 写法
var container = new Container( // grey box  
  child: new Center(  
    child: new Container( // red box  
      child: new Text(  
        "smaple text",  
        style: new TextStyle(  
          color: Colors.white,  
          fontSize: 18.0,  
        ),  
      ),  
      decoration: new BoxDecoration(  
        color: Colors.red[400],  
      ),  
      padding: new EdgeInsets.all(16.0),  
    ),  
  ),  
  width: 320.0,  
  height: 240.0,  
  color: Colors.grey[300],  
);  

市场：微信、飞猪、优酷

技术、工具：flutter、Android Studio

React Native

优点：复杂场景的渲染颗粒度要高一点，自由度更高，同比渲染效率会比uniapp高，相比较而言不会限制IDE，纯开发角度而言，在工程角度上RN可以做到的事情更多，很多复杂业务场景的实现上可以更加灵活。打包效率相对于uniapp高，RN可以细粒度化操作，虽然uniapp也能强行做，但相对心力损耗就大得多了。生态相对于uniapp较为成熟

缺点：所以前期的工程准备成本相对会高一些，安装某些功能是需要访问外网

市场：京东、美团、抖音、爱奇艺

技术：React 、RN、Android Studio

总对比：

移动端生态而言：

原生 > RN > Uniapp >Flutter

学习成本：

原生 > Flutter > RN > Uniapp（但其实随着hooks的入场，RN的学习成本和Uniapp差距不大了）

渲染效率：

原生 > Flutter > RN > Uniapp