/页/

现在有两个小程序，一个是芋圆，一个是。

小程序最初是群里方正做的，后来被深帆IT狗接手，我们想照搬的时候已经有可以运行的demo了，当时Taro名气很大，但是实质上不尽如人意，我研究了很久Taro的源码，发现可以使用来避免小程序自定义组件在构造函数中无法传递参数的问题，于是就正式开始动手了。

小程序自定义组件构造函数不能传参数的问题。用过的都知道，组件构造函数有两个参数，是帮你传入的，是 JSX 中同名标签的属性组成的对象，是上面组件的 () 生成的对象的并集。小程序只是个方法，你传入什么它都有，不会帮你加东西。

经过大概三周的开发，已经脱离了方正最初的源码，组件的思路是采用双模板机制，也就是用户在编写的时候，分别用不同的样式（es6 和 jsx）来编写，经过一些神奇的操作之后，会生成三个文件，第一个是一个 js 文件，es5 和 ，通过方法来实现类机制，第二个是一个 json 配置对象，涉及到路由和窗口颜色的定义，第三个是一个 wxml 文件，我们把方法的 jsx 提取出来，转成这个文件。

现在我们的小程序有以下几个优势

支持npm安装

支持 less 和 sass

支持内置小程序UI库

支持在JSX中直接使用p、div、i、b等HTML标签，会转化为wxml中的view、text标签。

支持在 JSX 中使用函数体和复杂对象参数，即 ={(){ .log() }} 或 ={this..bind(this, , {aaa:111,bbb: 222})}

支持全生命周期，保证顺序。

重新封装所有wx接口，并将回调样式转化为样式

anu 小程序转换的性能是有保证的，不会像 taro 那样直接使用，而是在页面虚拟 DOM 更新时才发送，这样就避免了复杂的数据 diff 和数据序列化。

的性能很差，无法传入过大的对象，会把数据序列化，所以有些翻译框架会做 diff 操作，但只要降低频率，这一步就可以省略。

事件系统支持，是模拟防止事件冒泡的API，微信小程序的同学说了，用户事件是异步的，所以这里只有定义接口，没有过程化的。

与

1、微信小程序的事件机制存在缺陷，不支持与。我们将e.当做一个事件对象，为其添加type、、、等属性和空的与方法。

2.绑定事件时，不要使用this..fn或者this..fn，而是使用this.fn。微信在给模板填写数据时，会将数据JSON化，并清除所有事件。

3. 组件系统基于小程序的元素，由于不支持插槽，所以无法使用{this..}实现显式的组件嵌套。

4. 对 ref 机制支持不完整（refs 可以放在组件实例中，但是不能放在 DOM 中，因为没有 DOM）

5. 无状态组件尚未实现

6 尚不支持

7. 不支持

8. 不支持TML属性

关于组件标签设置组件标签，需要官方支持slot机制，目前回复如下：

使用

从“/anu”git下载，定义命令行到/cli目录，执行npm link

使用

创建项目

定位

开始监视目录中的文件变化。

使用微信开发工具打开dist目录，并将其存放到src目录下进行开发。

当小程序大小还在1mb的时候，开发体验很好，性能也很好。但随着大小限制放开，产品经理开始乱搞，小程序原生的API和组件机制跟不上，一个APP上不可能有10个弹窗层，每个都写一遍，没有继承是它的硬伤，事件机制跟我们熟悉的机制相差甚远，设计也很蠢，wxs又太奇怪了。所以标签引入之后，很多人直接引入到页面里去了……因此诞生了这样的转译框架，包括TX里面的weby。

目前市面上很多翻译框架都是 Vue 风格的，这对于有技术栈的同学来说比较不公平，所以就有了 Taro、Anu 这样的翻译框架。Anu 保留了虚拟 DOM 的模板，所以会比 Taro 更能突破小程序的束缚。

【关于投稿】

如果你有原创好文章可以贡献，请直接给公众号留言。

①消息格式：

【投稿】+《文章标题》+文章链接

②示例：

【投稿】《别再称自己为程序员，我十多年IT工作的总结》:

③最后请附上你的个人资料~