前端流行框架技术选型大纲-PC端、移动端、微信端

清疚 2022-05-22 07:52 193阅读 0赞

<table>                
 <tbody> 
  <tr style="height:22px;"> 
   <td colspan="7" style="font-weight:bold;color:rgb(0,0,0);">平台定位：PC网站、H5网站、微信公众号、微信小程序、iOS APP、Android APP；</td> 
   <td style="vertical-align:bottom;color:rgb(0,0,0);">&nbsp;</td> 
   <td style="vertical-align:bottom;color:rgb(0,0,0);">&nbsp;</td> 
   <td style="vertical-align:bottom;color:rgb(0,0,0);">&nbsp;</td> 
   <td style="vertical-align:bottom;color:rgb(0,0,0);">&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="vertical-align:bottom;color:rgb(0,0,0);">&nbsp;</td> 
   <td style="vertical-align:bottom;color:rgb(0,0,0);">&nbsp;</td> 
   <td style="vertical-align:bottom;color:rgb(0,0,0);">&nbsp;</td> 
   <td style="vertical-align:bottom;color:rgb(0,0,0);">&nbsp;</td> 
   <td style="vertical-align:bottom;color:rgb(0,0,0);">&nbsp;</td> 
   <td style="vertical-align:bottom;color:rgb(0,0,0);">&nbsp;</td> 
   <td style="vertical-align:bottom;color:rgb(0,0,0);">&nbsp;</td> 
   <td style="vertical-align:bottom;color:rgb(0,0,0);">&nbsp;</td> 
   <td style="vertical-align:bottom;color:rgb(0,0,0);">&nbsp;</td> 
   <td style="vertical-align:bottom;color:rgb(0,0,0);">&nbsp;</td> 
   <td style="vertical-align:bottom;color:rgb(0,0,0);">&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">&nbsp;</td> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Ionic</td> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">React（For React Native）</td> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">React Native</td> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Weex</td> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">原生iOS</td> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">原生Android</td> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">PWA</td> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Xamarin</td> 
   <td style="font-weight:bold;color:rgb(51,51,51);">微信公众号</td> 
   <td style="font-weight:bold;color:rgb(51,51,51);">微信小程序</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">公司</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Google+Apache</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Facebook</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Facebook</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Ali(https://weex.apache.org/)</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Apple</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Google</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Google(https://developers.google.com/web/progressive-web-apps/ )</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Microsoft(https://www.xamarin.com/)</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">腾讯</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">腾讯</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">核心技术</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">ionic+angular+cordova+html+css</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">react+redux+html+css+jsx</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">react+redux+react native+html+css+jsx</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Vue.js+Rax+Vuex+Vue-router</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Objective-C/Swift</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Java/Kotlin+Android</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Javascript+service worker+app shell+offline+native api</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">C#+.Net Core+Razor</td> 
   <td style="color:rgb(0,0,0);">angular/react/vue/js均可，需要申请公众号</td> 
   <td style="color:rgb(0,0,0);">angular/react/vue/js均可</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">广告语</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">write once，run anywhere</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">learn once，write anywhere</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">learn once，write anywhere</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">A framework for building Mobile cross-platform Uis</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">learn，write，run each once（custom）</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">learn，write，run each once（custom）</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Escaping the Tab: Progressive, Not Hybrid</td> 
   <td style="color:rgb(0,0,0);">-</td> 
   <td style="color:rgb(51,51,51);">再小的个体，也有自己的品牌</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">跨平台支持力度</td> 
   <td style="color:rgb(51,51,51);">支持度高</td> 
   <td style="color:rgb(0,0,0);">支持度较高</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">支持度中等</td> 
   <td style="color:rgb(51,51,51);">支持度高</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">不支持</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">支持</td> 
   <td style="color:rgb(51,51,51);">支持</td> 
   <td style="color:rgb(51,51,51);">支持度高</td> 
   <td style="color:rgb(51,51,51);">支持</td> 
   <td style="color:rgb(51,51,51);">支持</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">跨平台支持方式</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">封装cordova plugin（自定义+开源）</td> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">依赖其他框架</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">涉及原生需针对不同平台编写不同的代码，混合式</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">WeexSDK负责解析Week bundle, 并发送到native端做一系列操作</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">针对不同平台编写不同的原生代码，独立</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">针对不同平台编写不同的原生代码，独立</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">原生web+增强型功能</td> 
   <td style="color:rgb(51,51,51);">.net+MCW+ACW+Apple Compiler</td> 
   <td style="color:rgb(0,0,0);">能运行微信之处</td> 
   <td style="color:rgb(0,0,0);">能运行微信之处</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">支持平台</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Web、iOS+Android APP、微信公众号、微信小程序</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Web、微信公众号、微信小程序、混合式APP</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">iOS+Android APP</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">IOS+Android+Web</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">iOS APP</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">Android APP</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">浏览器(Web, IOS, Android, 微信..)</td> 
   <td style="color:rgb(51,51,51);">IOS,Android,Mac,Windows</td> 
   <td style="color:rgb(0,0,0);">iOS+Android+web</td> 
   <td style="color:rgb(0,0,0);">iOS+Android+web</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">学习成本</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">中等</td> 
   <td style="color:rgb(0,0,0);">一般</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">高</td> 
   <td style="color:rgb(51,51,51);">中</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">最高</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">最高</td> 
   <td style="color:rgb(51,51,51);">简单</td> 
   <td style="color:rgb(51,51,51);">高</td> 
   <td style="color:rgb(51,51,51);">简单</td> 
   <td style="color:rgb(51,51,51);">简单</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">开发成本</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">低</td> 
   <td style="color:rgb(0,0,0);">低</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">中等</td> 
   <td style="color:rgb(51,51,51);">中</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">最高</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">最高</td> 
   <td style="color:rgb(51,51,51);">低</td> 
   <td style="color:rgb(51,51,51);">中</td> 
   <td style="color:rgb(51,51,51);">低</td> 
   <td style="color:rgb(51,51,51);">低</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">布局实现</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">易</td> 
   <td style="color:rgb(0,0,0);">易</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">易</td> 
   <td style="color:rgb(51,51,51);">难</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">难</td> 
   <td style="color:rgb(0,0,0);">难</td> 
   <td style="color:rgb(0,0,0);">易</td> 
   <td style="color:rgb(0,0,0);">中</td> 
   <td style="color:rgb(0,0,0);">易</td> 
   <td style="color:rgb(0,0,0);">易</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">性能</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">较差</td> 
   <td style="color:rgb(0,0,0);">较好</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">中等，接近原生</td> 
   <td style="color:rgb(51,51,51);">较好</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">最好</td> 
   <td style="color:rgb(0,0,0);">最好</td> 
   <td style="color:rgb(0,0,0);">较好</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">最好</td> 
   <td style="color:rgb(0,0,0);">一般</td> 
   <td style="color:rgb(0,0,0);">较好</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">同款APP运行时内存消耗（仅供参考）</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">100M</td> 
   <td style="color:rgb(0,0,0);">50M</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">65M</td> 
   <td style="color:rgb(0,0,0);">-</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">40M</td> 
   <td style="color:rgb(0,0,0);">45M</td> 
   <td style="color:rgb(0,0,0);">-</td> 
   <td style="color:rgb(0,0,0);">-</td> 
   <td style="color:rgb(0,0,0);">-</td> 
   <td style="color:rgb(0,0,0);">-</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">用户体验</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">一般</td> 
   <td style="color:rgb(0,0,0);">较好</td> 
   <td style="color:rgb(51,51,51);">较好</td> 
   <td style="color:rgb(51,51,51);">较好</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">最好</td> 
   <td style="color:rgb(0,0,0);">最好</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">较好(需要培养用户习惯)</td> 
   <td style="color:rgb(0,0,0);">最好</td> 
   <td style="color:rgb(0,0,0);">一般</td> 
   <td style="color:rgb(0,0,0);">较好</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">交互</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">简单</td> 
   <td style="color:rgb(0,0,0);">一般</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">一般</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">一般</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">复杂</td> 
   <td style="color:rgb(0,0,0);">复杂</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">较好(需要培养用户习惯)</td> 
   <td style="color:rgb(0,0,0);">最好</td> 
   <td style="color:rgb(0,0,0);">一般</td> 
   <td style="color:rgb(0,0,0);">较好</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">项目规模</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">中小型</td> 
   <td style="color:rgb(0,0,0);">均可</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">中小型</td> 
   <td style="color:rgb(0,0,0);">均可</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">中大型</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">中大型</td> 
   <td style="color:rgb(0,0,0);">均可(游戏除外)</td> 
   <td style="color:rgb(0,0,0);">中小型</td> 
   <td style="color:rgb(0,0,0);">中小型</td> 
   <td style="color:rgb(0,0,0);">中小型</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">开发工具</td> 
   <td style="color:rgb(0,0,0);">Visual Studio Code</td> 
   <td style="color:rgb(0,0,0);">Visual Studio Code</td> 
   <td style="color:rgb(0,0,0);">Visual Studio Code</td> 
   <td style="color:rgb(0,0,0);">Visual Studio Code</td> 
   <td style="color:rgb(0,0,0);">Xcode</td> 
   <td style="color:rgb(0,0,0);">Android Studio</td> 
   <td style="color:rgb(0,0,0);">Visual Studio Code…</td> 
   <td style="color:rgb(0,0,0);">Xamarin Studio/Xamarin.Forms/Xamarin for Visual Studio</td> 
   <td style="color:rgb(0,0,0);">Visual Studio Code+微信web开发者工具</td> 
   <td style="color:rgb(0,0,0);">Visual Studio Code+小程序开发工具</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">优点</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">1、代码重合度最高；</td> 
   <td style="color:rgb(0,0,0);">1、简单易学；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">1、代码重合度高；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">1. Vue技术栈首选</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">1、性能和交互体验好；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">1、性能和交互体验好；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">1. 移动端特性(离线/AppShell/消息推送/桌面图标)</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">1. .net团队转型首选</td> 
   <td style="color:rgb(0,0,0);">1、适合建立品牌</td> 
   <td style="color:rgb(0,0,0);">1、用完即走</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">2、开发速度快，难度低；</td> 
   <td style="color:rgb(0,0,0);">2、灵活；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">2、开发速度相当较快，难度适中；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">2. 开发速度快</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">2、适用iOS系统；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">2、适用Android系统；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">2. 渐进式增强</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">2. 开发速度快，复用性高</td> 
   <td style="color:rgb(0,0,0);">2、文档齐全，开发容易</td> 
   <td style="color:rgb(0,0,0);">2、文档齐全，开发容易</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">3、新手易转入，尤其是做过web开发；</td> 
   <td style="color:rgb(0,0,0);">3、适合多个场景；</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">3. 轻量</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">3、资料齐全；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">3、资料齐全；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">3. WebApp的进化方向</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">3、体验更接近原生</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">4、性能较好；</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">4. 性能优于RN</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">缺点</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">1、性能一般；</td> 
   <td style="color:rgb(0,0,0);">1、不能一次编写，到处运行；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">1、学习点多；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">1. Dom及部分CSS, Web事件等不支持</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">1、学习知识多；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">1、学习知识多；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">1. 浏览器支持不够完美(Safari)https://caniuse.com/#search=service%20workers</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">1. 第三方库资源少</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">1、微信相关，公司访问不了，mac机可以网页版</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">1、微信相关，公司访问不了，mac机可以网页版</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">2、内存占用高，APP包比较大；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">2、跨平台支持力度不够；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">2. 模块组件不足</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">2、开发速度慢；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">2、开发速度慢；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">2. 要求HTTPS</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">2. 需要了解较多Native知识</td> 
   <td style="color:rgb(0,0,0);">2、体验一般</td> 
   <td style="color:rgb(0,0,0);">2、需要学习小程序开发知识</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">3、自定义插件难；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">3、发展速度快，资料不够齐全；</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">3.&nbsp; 较新, 社区活跃不高</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">3. 用户习惯需要培养</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">3、需要学习公众号开发知识</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">4、不适合UI超频繁更新的场景，如复杂的动画等；</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td style="color:rgb(0,0,0);">&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">案例</td> 
   <td style="font-weight:bold;color:rgb(0,0,0);">WOW项目</td> 
   <td style="font-weight:bold;color:rgb(0,0,0);">街电（网站和管理系统）</td> 
   <td style="font-weight:bold;color:rgb(0,0,0);">Eufylife(应用市场可下载)</td> 
   <td style="font-weight:bold;color:rgb(0,0,0);">阿里双11主会场</td> 
   <td style="font-weight:bold;color:rgb(0,0,0);">AnkerBox（App Store）</td> 
   <td style="font-weight:bold;color:rgb(0,0,0);">AnkerBox（Google Play）</td> 
   <td style="font-weight:bold;color:rgb(0,0,0);">FlipKart Lite、饿了么</td> 
   <td style="font-weight:bold;color:rgb(0,0,0);">&nbsp;</td> 
   <td style="font-weight:bold;color:rgb(0,0,0);">街电公众号（可关注）</td> 
   <td style="font-weight:bold;color:rgb(0,0,0);">街电小程序（可搜索）</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:115px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);">相关资料</td> 
   <td style="color:rgb(0,0,255);">https://ionicframework.com/https://github.com/ionic-team/ionichttps://github.com/Alexintosh/Awesome-Ionic</td> 
   <td style="color:rgb(0,0,255);">https://reactjs.org/https://github.com/facebook/reacthttps://github.com/enaqx/awesome-react</td> 
   <td style="color:rgb(0,0,255);">https://facebook.github.io/react-native/https://github.com/jondot/awesome-react-native</td> 
   <td style="color:rgb(0,0,255);">https://weex.apache.org/https://github.com/joggerplus/awesome-weex</td> 
   <td style="color:rgb(0,0,255);">https://developer.apple.com/ios/http://www.cocoachina.com/https://github.com/vsouza/awesome-ios</td> 
   <td style="color:rgb(0,0,255);">https://www.android.com/https://github.com/wasabeef/awesome-android-uihttps://www.oschina.net/android</td> 
   <td style="color:rgb(0,0,255);">https://developers.google.com/web/progressive-web-apps/https://github.com/hemanth/awesome-pwa</td> 
   <td style="color:rgb(0,0,255);">https://www.xamarin.com/https://github.com/benoitjadinon/awesome-xamarinhttps://www.visualstudio.com/zh-hans/xamarin/?rr=https%3A%2F%2Fcn.bing.com%2F</td> 
   <td style="color:rgb(0,0,255);">https://mp.weixin.qq.com/https://github.com/fritx/awesome-wechat&nbsp;https://developers.weixin.qq.com</td> 
   <td style="color:rgb(0,0,255);">https://github.com/justjavac/awesome-wechat-weapphttps://github.com/opendigg/awesome-github-wechat-weapp</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr style="height:22px;"> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">结论</td> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">适合跨平台中小项目，如PC Web、Mobile Web、Mobile APP（iOS、Android）等，一套代码实现多个平台功能</td> 
   <td style="color:rgb(0,0,0);">适合前端各个场景，依赖其他技术或者框架</td> 
   <td style="font-weight:bold;color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">适合跨移动端中小项目，如iOS APP、Android APP，专注APP</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">较新的一个跨平台解决方案，支持Vue.js和Rax，性能是其最大的优势</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">适合大型或者复杂交互体验iOS APP</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">适合大型或者复杂交互体验Android APP</td> 
   <td style="color:rgb(51,51,51);font-family:Arial, 'Microsoft YaHei', sourcecode, sans-serif;">适合纯Web团队及部分Native功能要求不多的项目(https://whatwebcando.today/)</td> 
   <td style="color:rgb(51,51,51);">适合中小型项目，对于UI要求不高的场景</td> 
   <td style="color:rgb(51,51,51);">只适合开发微信公众号，推广个人或企业品牌</td> 
   <td style="color:rgb(51,51,51);">只适合开发微信小程序，适合轻应用</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>