最近收到了一个项目需求，需要是需要将现有的前端h5代码封装成app，也即是要提供出.apk和.aab文件，然后可以支持上传到fackbook和google play供用户下载。
项目背景：使用nextjs框架的纯web项目
根据需求，个人制定的简要的okr目标如下：
一.调研市面上现有的跨端开发方案
二.制定技术方案，选取最适合本项目的跨端技术
三.先拟定一个demo项目，然后根据demo延伸至实际项目
四.解决实际项目封装app时遇到的问题
五.总结经验，形成文档输出
一、调研市面上的技术方案
跨端开发app目前主要的几种方案：react-native、weex、uniapp、flutter
1.react-native
使用语言：js的扩展jsx
优势：
- 可以基于js开发，方便复用前端开发人员及部分web代码
- web兼容性和性能都较好，开发人员比较好找
- react作为响应式框架，代码结构清晰，开发效率较高
- 可以使用ReactNative实现跨平台
劣势：
- 使用js作为语言，性能不及原生，js和原生通信交互，进一步损失性能
- 由于UI表现使用原生模拟web/css，有一定的局限性和兼容性，从而在实现真正跨平台时，会经常碰到兼容性及功能局限性
社区：Facebook维护，社区较为活跃
总结：React是企业用的最多，各方面都比较成熟的方案，是可以备选的方案，但性能和兼容性上未能到达极致体验，需要积累避坑经验
2.weex
使用语言：js/vue/原生扩展
优势：
- 同react，可以结合vue框架书写
- 对于熟悉vue的同学能较快入门
劣势：
- 同react，最初由阿里巴巴开发，后来转交给Apache基金会
- 测试bug较多，后续缺乏维护动力
社区：Apache基金会
总结：相比ReactNative，Weex稳定度和社区较差，淘汰
3.Uniapp
使用语言：js+vue+微信小程序组件
优势：
- 使用js+vue，能让前端无需学习，就能快速开发
- 一套代码，能同时支持APP/H5/小程序，是较为全面的跨平台框架
- 兼任小程序，能同时发布到多个小程序平台
劣势：
- 使用js+小程序多进程架构，在ui和逻辑通信过程中，性能大打折扣，对实现复杂界面及极致效果时会有点力不从心
- App实现部分不开源（最新部分开源），遇到问题只能等官方解决
- 兼容性较差，大部分时间不是在开发，而是在优化性能及调试各端兼容性问题
社区：DCloud
总结：ui和逻辑通信过程较为复杂，不利于信息管理，并且app实现部分无法开源，因此遇到关键问题是无法解决的，放弃。
4.Flutter
使用语言：dart/第三方扩展
优势：
- google出品，目前可以同时跨Android/IOS/Web/Windows/Mac
- desktop版本在开发中（计划2020年发布），同时也是google下一代操作系统Fuchsia的官方UI方案
- flutter框架性能优异，兼容性小，类似react的组件化响应式开发框架，开发效率较高
- 官方提供移动端大量第三方组件，能极快的提高UI组装效率，关键还开源，哪里不好改哪里，开发不怕遇到天花板
- 工具链强大，热更新秒看结果，极大的提高开发效率
- dart强类型语言，相对js在代码提示，代码重构上有较大方便性，在开发过程中就能避免很多bug产生
劣势：
- UI组织方式比较另类（代码嵌套方式，习惯了就好）
- 不支持小程序，web实现不是最优方案，在内存和性能上会比传统开发有较多消耗
- 插件还需完善，第三方插件很难做到跨所有平台（大部分可以跨移动端）
社区：google pub.dev第三方社区，比较活跃
总结：Flutter作为一个新兴的技术栈，有着巨大的潜力，以google的技术背景支持下，工具链，社区都比较完善，Flutter打破了React依赖原生的缺点，直接自己接管渲染层，在各端有较好的兼容性，同时使用dart语言，相比js有较好的开发体验，组织代码更容易，再加上热更新，开发效率直接翻倍。但是dart语言有一定学习成本，并且目前flutter仍然不是很成熟，待考虑。
直接封装app的技术：hbuild、cordova、capacitor
5. hbuild
定位：一款支持html5的web开发IDE
优势：
- 可以快速将vue项目封装成5+App
- 提供多种模版选择
- 提供包括横屏等功能配置
劣势：
- 封装的原始材料为html、js、css无法做到和原生一样的效果
- 对于非vue框架开发的项目不是特别支持，有改造成本
社区：DCloud
总结：hbuild对于react项目不是天然支持，有一定的改造成本，并且脱离了原生，放弃
6.cordova.js
定位：一款使用html、css、javascript构建的工具，可以认为它是一种app壳子
优势：
- 可以天然的集成html、css、javascript的纯web项目
- 提供了多种插件，可以使用原生api
- 可以适用于多种不同的平台
社区：Apache社区
总结：cordova基于对于html、css、javascript的纯web项目的支持，并且可以支持调用原生的诸多应用，比如地图，相机等。很好的满足要求，列入待选。
7.capacitor.js
定位：是一款跨平台的原生运行时，它可以提供一套完善的原生容器。基于cordova.js
优势：
- 天然跨平台，基于cordova.js
- 有众多成功案例，并且有next.js接入案例
总结：capacitor可以很好的提供一套完美的原生容器，并且有成熟的next.js案例可供参考，最终选择使用capacitorjs来封装app
