作者｜司徒正美

编辑|秦云

本文已获作者授权转载。原文请点击链接：

anu小程序是去哪儿网推出的基于微信小程序的解决方案。

近年来出现了很多转换小程序的解决方案，如mina、wept、wepy、-、taro等。一方面说明小程序确实繁荣。另一方面也暴露了小程序本身抽象能力的不足，并反思了这些补救措施。工具也有各种弊端，所以一直战斗到现在。

所有工具的目的都是为了优化开发体验，为小程序添加各种天然的支持能力——例如css（、sass、less）的工业抽象、npm支持（享受世界开源库）、es6、es7语法糖，强类型约束，vue/组件开发，vuex/状态管理……但是这些小程序都没有，落后得就像回到了ie6的史前时代。

因为小程序看起来很像Vue（指它的指令风格），所以早期的翻译者都是基于Vue的。他们解决了多少问题，就制造了多少问题。因此社区继续重新发明轮子。人们发现小程序的虚拟DOM机制其实来源于API，这也是一个很好的证据。因此，风格翻译器应运而生。最著名的代表就是芋头，但芋头是早产儿，虫子很多。

因此，经过多方考虑，我公司开发了自己的小程序工具。正如上一篇文章提到的，对于这么多的困难，社区中已经有相应的解决方案。剩下的问题是如何将它们集成到一个方便的框架中。 anu小程序依赖于这个实现良好的迷你框架，并依赖于组内现有的代码。经过两个月的努力，克服了一切障碍，达到了完美。下面让我向您展示这个出色的结果。

小程序最大的问题是没有组件继承机制。所谓自定义组件只是一个，无法指定父类。换句话说，面向配置的编程是20年前的事了。因此，大家都在尝试参考vue/等广泛流行的组件机制。其次，小程序的模板机制也很薄弱，限制也很多。虽然有点像vue，但是它的数据会通过JSON进行过滤。因此，函数不能被传递。如何克服这个问题是困难的。

我们先看第一个问题。小程序的JS文件基本分为4类，app.js、目录下的JS文件、目录下的JS文件、其他目录下的JS文件。为了方便区分，将anu依次标识为App类、Page类、，都是翻译器处理的对象。其他目录下的JS只会被复制，不会被翻译。 App类、Page类、类都应该通过定义组件来实现。

App类是文件app.js，用于提取依赖项并构建app.json。下面是用户编写的app.js，以及翻译后的app.js和app.json。 app.json不需要用户编写。事实上，我们的翻译器涵盖了小程序各种配置所使用的所有json，这更符合我们的开发方式。

Page 类是目录中定义的组件。 anu 会将其 es6 类样式更改为 .定义的类，因为es6类转换成es5形式时，会增加很多辅助方法，导致页面尺寸过大。 ，这对于大小有限的小程序来说是无法忍受的。

下面是 //.js 翻译的示例：

翻译后生成三个文件：

类是目录中的组件。小程序有两种定义组件的方式，组件和自定义组件。 anu翻译器会将类翻译成组件，当组件更新时，将其收集到Page类组件中。最后统一Page类，减少页面的刷新频率。

该组件被转换为两个文件。请注意，它的 wxml 包装在标签中。

通过使用组件开发方式，我们改变了原本应该将两三个文件写成一个文件的繁琐开发方式。当然，如果引入了xxx.less、xxx.sass、anu小程序，也会被当成对应目录下的wxss文件。另外好处是，无需添加插件和配置，就可以在原有的开发工具（、）上享受语法高亮和提示。

第二个问题是模板数据的突破。小程序之所以没有使用后面引入的自定义组件机制，而是使用标签，是因为它可以完全接受上面传递下来的所有数据。自定义组件需要在对象中定义才能被接受。这也太不一样了。

小程序的Page类的wxml不能使用函数来操作数据。当然可以用wxs，但是wxs太没用了。因此，我们的解决方案是在虚拟DOM中进行diff，统一提交给Page类。这就是anu小程序的双模板机制。它还编译并加载了 JSX 模板，并优化了 wxml。当用户为组组件编写JSX时，与编写普通程序没有什么不同。然而，为了突破小程序的限制，我们在这个JSX中添加了这么多的随机数，这些随机数就是各种UUID。例如，我们将向具有用户定义事件的标签添加三个 UUID。

翻译后的第一个模板：

data--code对应类的UUID，data--code对应实例的UUID，data-tap-fn对应事件UUID。在 JSX 中它仍然是原始方法。

这是第二个翻译后的模板，wxml 使用的模板。当我们运行小程序时，我们会先运行所有的组件。当然，JSX（第一个模板）也会运行。当它们运行时，事件回调将被保存到实例中，并且实例将被保存到类中。然后我们点击wxml，它运行这个统一委托，它会从事件对象中查找，然后在 {: '', : '', : ""}里面找到。

然后我们可以通过类的UUID找到类，通过实例的UUID从类中获取实例，然后通过事件的UUID从实例中获取事件，最后触发事件。由于事件在JSX中已经绑定了this和，所以无论参数是简单类型还是复杂类型，参数传递问题都解决了。和taro一样，只能传递简单类型，并且只能绑定一次。 anu小程序将与JSX diff同步最新数据。当涉及到样式单元处理和复杂的数据计算以及功能问题时，我们也会做同样的事情。因此，anu小程序的双模板机制是一种聪明的实现，很容易规避小程序的设计。

对于最受诟病的问题，即更新过于频繁导致性能不佳，anu将所有数据更新提交给Page类。其他方面，我们实现了对无状态组件的支持，支持用户代码的并行构建，支持动态添加wx:key，支持智能省略wx:if分支（因为if分支在JSX中已经过滤过一次，数据已经被修剪），支持复杂的if和for语法的翻译，比市面上其他翻译器更强大。

最后欢迎大家尝试：

推荐活动

全球建筑师峰会将于12月7-8日在北京国际会议中心举行。会议主题包括微服务金融架构、微服务架构、数据基础设施平台建设、短视频架构、区块链、信息隐私安全等话题。 。邀请了阿里巴巴、百度等公司的技术专家进行分享。