小程序多端开源框架黑马！它是如何做到快应用小程序自由转译的？

作者 | 伍杏玲

出品 | CSDN（ID：CSDNnews）

【CSDN 编者按】目前小程序的生态众多，有微信小程序、支付宝小程序、快应用、百度智能小程序、今日头条小程序等，应运而生的小程序多端框架也有很多，例如滴滴的Chameleon、美团的Mpvue、京东的Taro、腾讯的WePY等。

这些框架虽说实现“多端兼容”，但不是全部兼容的，由于快应用与小程序有一定的差异性，据了解，上述的几款开源框架均尚未支持快应用。

目前有这样的一个“神器”：可同时支持快应用和小程序的开源框架，实现一处编写多处运行的转译，并且支持拆库开发、按需打包业务代码等功能。

它便是由去哪儿网大前端团队研发的娜娜奇（nanachi）小程序快应用转译框架。

下面由CSDN（ID：CSDNnews）协同去哪儿网技术学院专访去哪儿网技术总监、公共技术部大前端负责人黄庆（昵称：Neo）和去哪儿网公共技术部前端架构师钟钦成（昵称：司徒正美），一起来解开这个多端神器nanachi的神秘面纱。

快应用小程序一键转译

CSDN：nanachi框架的特性是如何？对比其他公司的框架，优点是什么呢？

Neo：nanachi拥有许多特有的功能：

第一，智能WebView化，这样可以减轻小程序体积的压力。众所周知，小程序对体积的要求比较敏感，我们的应用拥有很多业务模块，所以需要将一些非重点的业务挂在WebView上。

第二，nanachi能支持快应用。据了解，上述几款框架均未支持。快应用是基于12大厂商推出的，相信未来快应用市场将对我们尤其重要，目前快应用也给我们带来不少流量与收入。

目前，我们支持平台框架转译，譬如你将一个标准的微信小程序框架源码，放在我们框架里，可一键转译为快应用，当然还支持转换成其他平台框架。实现原理是：先将原生微信小程序代码转换成nanachi代码，再由nanachi转换成其他各种小程序、快应用的原生代码。

第三，内置自动理点与上传功能，方便改良产品，其他框架没有这个功能。还有可以做自动测试回归，因为现在的小程序都是多平台，如果每次修改完都需要回归测试的话，人力成本会很高。

这对于我们完善工具链是很重要的，因为很多框架只关注开发这块的使用，但据我们之前的经验来看，开发这块满足后，还需要关注这个程序有没有问题，测试能不能提高速度，用户又哪些交互行为等，这些其实是很重要的，所以做工具链要做完整，而不能说只关注开发这一块，这是远远不够的。

CSDN：为什么没有采用上述的几个开源框架，而选择自主研发框架呢？

Neo：目前去哪儿网主要是React技术栈，从这个角度来看，京东的Taro和我们更吻合一些。其他是基于Vue的，（如果用的话）我们需要进行较大的改造。

目前来看，小程序还在快速发展中，我们平时也密切关注业界技术发展状况。不管是京东的Taro还是美团的Mpvue，GitHub上面的Issue还比较多，（他们）处理的周期也较长。

而且有一些框架对某些重要的平台支持力度也有限。我们常说，业务不等人。所以去哪儿网需要有适合自己的业务需要的框架，这是我们做nanachi的原因。

多业务部门发布小程序时，如何协同？

CSDN：去哪儿网有很多个部门，那么在小程序的发布上，目前各部门的协同工作是如何进行的呢？

司徒正美： 我们有一个叫chaika的工具，能让各个事业部自行开发自己的业务，放在不同的Git仓库中，最终chaika会将这些模块合并成一个完整的小程序，一键发布，其中合并和发布的过程不到1分钟。

目前去哪儿网小程序的模块有以下分类：

主模块：主要功能是整个小程序的一些全局配置和全局变量等， 如: package.json 中的 modules 是小程序所有模块的依赖配置。

公共模块：这是小程序中其他模块公用的模块， 包含一些工具类代码和自定义组件等。之所以把主模块和公共模块拆成两个模块， 主要是我们考虑到公共模块也可以依赖到不同的小程序中，但主模块算是单个小程序中特有的， 所以要区别对待。

业务模块：这是业务相关的业务逻辑代码， 完全独立可拔插。

前端多生态，后端如何做统一

CSDN：目前去哪儿网已对接微信小程序、支付宝小程序、快应用、百度智能小程序，那么后端服务是如何实现的呢？是一后端对应多前端，还是一后端对应一前端的方式呢？

司徒正美：目前是一套前端代码与一套后端代码加不同的登录支付逻辑。

CSDN：相比App，对比这几种小程序生态，开发难点各是什么？

司徒正美：目前除了微信小程序，其他小程序的非常不成熟，拥有各种奇怪的Bug或限制，网上的踩坑资料也很少。

CSDN：您对这几种生态有什么看法呢？nanachi的未来规划是如何呢？

Neo：能带来流量都要尽量试探。未来框架的发展还是以覆盖平台为主，目前和今日头条小程序、QQ小程序的合作正在洽谈中。

CSDN：对比微信小程序、支付宝小程序、快应用、百度智能小程序，去哪儿网在各生态的提供的功能服务有很大差异，例如在微信端提供的服务和App的差不多，而在支付宝、百度仅提供基础服务，这样部署是基于什么标准衡量呢？

Neo：这是历史原因，毕竟微信小程序出来早，我们公司在它上面已经迭代了许多功能。其他小程序是最近半年才开始开发，因此功能少些。但以后所有小程序与快应用都是同一套代码，功能会尽量保持一致。

团队开发资源分配

CSDN：目前是团队是如何分工的呢？是一个团队对应一个端，还是一个团队负责所有小程序端呢？

司徒正美：一个团队负责所有端，各个业务线会有专员开发业务代码。

CSDN：小程序和App目前的开发资源投入分配大致是怎样的？

Neo：小程序投入的开发人员不到20人吧，App能达上百人。目前还是以App为主，小程序先占坑。

CSDN：去哪儿网小程序上有好多入口模块，请问每个功能项是写死的还是可配置的？

司徒正美：我们首页是通过一个叫Qconfig的服务实现，可以在线上自由地变更首页，用它灵活地上线或下线已有的频道。

所以你可以看到，我们在微信小程序和快应用、支付宝、百度等渠道上线的功能模块有所不同。这都是可以自由配置的。

众多矩阵小程序集成，如何做容灾

CSDN：在去哪儿网小程序里嵌入其他好几个子小程序，如果某个子程序挂了，该如何容灾呢？

司徒正美：小程序是基于多WebView，挂了不会影响其他业页的。还有可以通过上面所有的Qconfig服务能将有问题的入口给及时下掉，无需重新发布上线的。

据了解，Taro、uni-app的技术团队均在进行兼容快应用的研发，而先拔头筹的去哪儿网nanachi也不断优化框架，加强框架转译的准确度。

那么作为小程序/快应用的开发者，你对这几个框架有什么看法呢？欢迎来留言哦。

嘉宾简介：

黄庆，去哪儿网技术总监，公共技术部大前端负责人。曾先后任职高德地图、阿里巴巴(北京)。作为移动互联网老兵，从最早的iOS/Android，到后面的H5/Hybrid，以及React Native都有涉猎。目前专攻小程序，对该领域保有极大的乐观态度。

钟钦成，网名司徒正美，拥有十年纯前端经验，著有《JavaScript框架设计》一书，去哪儿网公共技术部前端架构师。爱好开源，拥有mass , Avalon, nanachi等前端框架。目前在主导公司的小程序、快应用的研发项目。

框架传送门：

https://rubylouvre.github.io/nanachi/

 热 文 推 荐 

System.out.println("点个在看吧！");
console.log("点个在看吧！");
print("点个在看吧！");
printf("点个在看吧！\n");
cout << "点个在看吧！" << endl;
Console.WriteLine("点个在看吧！");
Response.Write("点个在看吧！");
alert("点个在看吧！")
echo "点个在好看吧！"

点击阅读原文，输入关键词，即可搜索您想要的 CSDN 文章。

你点的每个“在看”，我都认真当成了喜欢