现如今市面上端的形态多种多样,Web、ReactNative、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。由于我们团队的开发更偏向 React 技术栈,所以我们考虑基于 React 语法提供一套解决方案。
    对比了社区时下最流行的多端脚手架,我们最终选择了由京东·凹凸实验室倾力打造的多端开发解决方案Taro ,选型依据详见下表:

    技术栈 Vue React
    多端脚手架 chameleon mpvue uni-app wepy taro nanachi
    开发工具 DSL 类Vue vue vue 类vue React15 React
    IDE/图形化开发工具
    语法校验工具 自研 IDE支持 ESLint规则
    TypeScript
    Typing/自动补全 AP IDE支持 API+JSX
    样式 sass,less,styus sass,less,stylus sass,less,styus sass,less,styus sass,less,styus,CSSModules sass
    多端支持 小程序支持 微信、百度、支付宝 微信,百度、支付宝,字节跳动 微信,百度、支付宝,字节跳动 微信、百度、支付宝 微信、百度,支付宝,字节跳动 微信、百度、支付宝、快应用
    移动端容器 Weex Weex ReactNative ReactNative
    移动端增强 chameleonSDK nvue Expo
    多端编译方式 自研多态协议 环境变量条件编译 自研条件编译语法 环境变量条件编译 环境变量+文件条件编译 环境变量条件编译
    H5兼容AP1 自研多态协议
    跨端组件库
    组件库/工具库/demo 第三方组件 较少 丰富 丰富 丰富 较丰富 较少
    第三方工具库 较少 较丰富 丰富 丰富 较丰富 较少
    Demo 较少 较丰富 较丰富 丰富 较丰富 较少
    状态管理工具 vuex vuex vuex Redux Redux/MObX/Dva 自研globalData
    转换微信小程序工具
    自研组件库
    流行度 GitHubStar 3843 16281 2921 16779 16084 2470
    GtHubssue/PR 68/8 1369/104 215/18 1662/441 2026/368 195/11
    NPM+CNPM下载量 241/周 1971/周 N/A 976/周 4332/周 372/周
    案例 较少 丰富 非常丰富 丰富 丰富 较少
    开发者人数 -~1000人 ~5000人 10000+ ~5000人 ~5000人 ~500人
    自建开发者社区
    其他 其他 1、半开源,二次开发困难 1、微信优先
    2、微信虚拟dom模仿react
    3、底层依赖nervjs可直接别名代替react
    1、不能直接启动h5服务器
    2、路由刷新白屏
    3、支付包支持优先
    4、demo必须快应用才能预览
    5、微信小程序异常
    备注:数据采集于2019年3月11日,以各框架目前稳定版特性为标准
    结论:taro可以用于公司内部开发小程序和公众号。主要考虑因素如下:
    1、公司前端以React技术栈为主
    2、React技术栈对微信和h5的支持最好
    3、社区活跃,issue响应快,经过项目实战验证,暂时没发现致命问题
    4、多端能力强:可以支持RN和其他小程序

    基于Taro,结合了公司现有公共能力,我们提供了移动 WEB 多端脚手架,此外考虑到Taro官方提供的扩展UI库Taro UI成熟度不足,且无法满足内部定制需求,我们在此基础上提供了移动 WEB 多端 UI 组件库rtaro-ui
    此外,如果你只是想开发小程序也可以使用移动 WEB 多端脚手架,小程序官方框架并没有融合目前主流的工程化开发思想,例如不完整的 ES.Next 语法,较为封闭的开发工具等等,这使得很多业界开发模式与工具不能在小程序开发中得到相应体现,像是从前端工业时代回退到了刀耕火种的年代。
    参考资料:
    第三方框架和官方框架的对比
    小程序开发:用原生还是选框架
    我们评测了 5 个主流跨端框架,这是它们的区别