笔者接触uniapp已经大半月了，同时百度编程法接触了较多的混合开发框架进行技术选型对比，心理历程是感叹 -> 佩服 -> 释然 -> 平静。
一、uni-app vs taro
首先带微信小程序的框架都是国内的，国外主要玩Instagram、Twitter、Facebook、WhatsAPP，笔者因为工作需要也被迫玩过WhatsAPP。
| 框架 | 技术栈 | 案例 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | H5 | App |
|---|---|---|---|---|---|---|---|---|
| Taro | React | 丰富 | ⭕ | ⭕ | ⭕ | ⭕ | ⭕ | ⭕ |
| 娜娜奇 | React | 少 | ⭕ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ❌ |
| wepy | Vue | 丰富 | ⭕ | ❌ | ❌ | ❌ | ❌ | ❌ |
| mpvue | Vue | 丰富 | ⭕ | ❌ | ❌ | ❌ | ⭕️ | ❌ |
| uni-app | Vue | 丰富 | ⭕ | ⭕️ | ⭕️ | ⭕ | ⭕️ | ⭕ |
| megalo | Vue | 少 | ⭕ | ⭕️ | ⭕️ | ❌ | ❌ | ❌ |
| OKAM | Vue | 少 | ⭕ | ⭕ | ⭕ | ⭕ | ❌ | ❌ |
| Mpx | Vue | 少 | ⭕ | ❌ | ❌ | ❌ | ❌ | ❌ |
目前带小程序和app的混合开发框架且比较日气的主要是uni-app与taro。下面是二者更详细的比拼
| 框架 | 公司实力 | 开发软件 | 语言 | 学习成本 | 开发速度 | 跨平台 |
|---|---|---|---|---|---|---|
| Taro | 京东(凹凸实验室) | 完美支持VSCode | React | 中 | 社区活跃,轮子不多 | app向小程序覆盖,更像app |
| uni-app | DCloud | 国产HBuilderX | Vue | 中偏低 | qq群活跃,轮子多 | 小程序出身,更像小程序 |
因此：
- 1，喜欢vue的、开发更快(轮子多、hot reload)，建议选择uniapp
- 2，喜欢JSX的组件化的建议选择taro
二、uni-app性能怎么样
- Skia图像处理引擎 (Google 的)是基于jpeg图像引擎的二次封装
- vdom速度要显著优先于dom
| 平台 | 图像处理引擎 | 渲染方式 |
|---|---|---|
| Android | Skia | view->layout->renderNode ->合成->GPU渲染 |
| Ios | Quartz、OpenGL | UIKit ->Core Animation OpenGL ES-> Core Graphics |
| Flutter | Skia | Dark -> Layer Tree -> Compositor -> Skia->GPU渲染 |
| react-native/weex | bridge(基于vdom) | JS Thread -> DOM Thread -> Native Main Thread |
| webview | dom tree | html->dom tree ->render tree ->render layer + 栅格化 ->合成->gpu渲染。 |
uni-app支持webview与weex双重渲染，相当于把h5的技术与rn的技术做了一个总结。由于是基于weex的，然后下一层才是bridge。多了一层就多了一份性能问题，而且也不是全部基于weex的。所以性能方面应该会比bridge始祖ReactNative略差一点。
三、uni-app的学习
1，ui-app官网：uniapp.dcloud.io/frame?id=%e… 2，aro vs uni-app选型对比经历（blog.csdn.net/wave_1102/a… 3,【链接】正在读取MRO审批：org.modao.cc/app/7icqhnl… 4,【链接】正在读取培训考试：org.modao.cc/app/b50a136… 5,uni-ui框架github地址：github.com/dcloudio/un… 6,less sass区别：www.cnblogs.com/moumoon/p/1… 7,vue nvue区别：ask.dcloud.net.cn/question/69… 8,uniapp优点： 1，hot reload快速开发 2，高端时尚的vue语法（vue与React区别：caibaojian.com/vue-vs-reac… 3，官方声称的一系列优点（uniapp.dcloud.io/README） 4，uni-app是DCloud出品的，属于国产 9,uniapp缺点： 1，较差的编译器（HBuilderX长时间编译不稳定，没法儿点击链接，当前文件没法儿看到文件目录定位） 2，较多的注意事项（开发目录结构定义太死，命名规范定义太死等，uniapp.dcloud.io/matter） 3，言过其实的优点（uniapp.dcloud.io/history） 4，uni-app问世的时间还比较短，有很多地方还不是完善，坑很多,技术问题需要付费，且框架层问题没法儿自定义 10,Vue.config.productionTip = true 开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。(摘于官网说明) 大概意思应该就是，消息提示的环境配置，设置为开发环境或者生产环境 11,App.mpType = 'app' 系统必须配置参数，未知作用，参考ask.dcloud.net.cn/question/82… 12,app.mount()手动挂载,Vue实例没有el属性时，则该实例尚没有挂载到某个dom中； 参考www.cnblogs.com/tongbiao/p/… 13,“新闻uniapp”框架问题 1,使用var，建议使用let（www.jianshu.com/p/3ab0781d7… 2，而且这里isIos最好封装成全局的呀（blog.csdn.net/Mrchai521/a… 3，也没有统一的规范，8个人写8种规范 4，加入到员工中后，还存在重复资源的问题。每个uniapp都带框架 5，框架残缺（未加入mock数据等） 14，重要目录，参考uniapp.dcloud.io/frame?id=%e… ┌─components uni-app组件目录 │ └─comp-a.vue 可复用的a组件 ├─hybrid 存放本地网页的目录，详见 ├─platforms 存放各平台专用页面的目录，详见 ├─pages 业务页面文件存放的目录 │ ├─index │ │ └─index.vue index页面 │ └─list │ └─list.vue list页面 ├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此 ├─wxcomponents 存放小程序组件的目录，详见 ├─main.js Vue初始化入口文件 ├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期 ├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见 ├─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见 ├─node_modules 三方库缓存 ├─locales 多语言“vue-i18n”库的文案存储 ├─public H5用,app，小程序是不需要的,参考www.cnblogs.com/gaogch/p/10… └─unpackage 生成 H5 的相关资源文件，保存于 unpackage 目录 16，制图单位 1,不写单位: 出现控件不展示情况 (禁止使用) 2,px: 像素单位.手机宽度上高分辨率手机远远大于低分辨率 (慎重使用)
3,upx: 响应式单位。约等于百分比布局,基准单位750upx。实测iphone xs max pro全屏宽750，Oppo a5 全屏宽753 (有更好的替代)
缺点是不支持动态绑定且会产生“uni.upx2px() 最终生成的px都只能是整数”的问题参考 https://ask.dcloud.net.cn/question/67516
4,rpx 响应式单位。相当于upx的升级版,基准单位750rpx，实测iphone xs max pro全屏宽750，Oppo a5 全屏宽753 (推荐使用)
5,实战推荐rpx与百分比计算布局一起使用。
三、混合开发的大方向
劳动决定价值，价格围绕着买卖市场上下波动。 uni-app由于技术门槛比较低，交互与性能的精细定制化很难做到，因为价值比较低。主要适合于外包这种快速开发市场
Boss学习法了解如下：
所以目前比较好的app端跨平台框架仍然只有react-native与flutter。flutter潜力巨大，性能够好甚至跨桌面端，有计划会覆盖window maxos linus等平台。所以若是要开发app，flutter仍然是强势的选择。
