钟勤成
个人介绍：钟勤成，网名司徒正妹，国内知名前端专家，对浏览器兼容性问题/选择器引擎/内部机制等有深厚经验，开发过/anu等前端框架，撰写过《框架设计》一书。
众所周知，微信自从推出小程序之后，便风靡全国，就像当年互联网蓬勃发展的时候，大家都忙着抢域名、开私人博客一样。小程序之所以如此火爆，是因为微信拥有庞大的用户量，腾讯帮你解决后台问题和很多功能问题（比如分享、支付、视频播放、文件上传），相当于你一个人就能干一家公司的工作。在一部手机上，每个人不可能安装100多个APP，所以这么多小公司生存下来非常不容易，但是借助微信这个大平台，个人也可以推出一款千万人玩的热门游戏，也可以开一些小商城，避开淘宝、京东的锋芒。对于大公司来说，这也是一种新的赚钱方式和引流方式。相信未来小程序会越来越火爆。
但是小程序对于开发者来说功能并不是很强大，它的API很原始，没有类继承，npm支持滞后，不能使用CSS预处理器。因此市面上出现了各种各样的转译框架。转译框架和我们平时使用的框架没太大区别，转译框架把我们写的代码翻译成小程序支持的各种文件格式，比如wxml，wxss等。在写业务的时候，转译框架可以让我们使用比较流行的框架格式来写（之所以使用格式是因为用vue写其实并不是在运行真正的vue，用vue写其实也不是在运行真正的vue）。由于小程序没有DOM，所以流行的框架无法在微信里运行，但是它们的模仿品是可以使用的。
翻译框架的最终目的是统一公司的技术栈，让使用某种技术栈的公司不需要使用 Vue，使用 Vue 作为技术栈的公司不需要学习它。这在招聘和维护方面有很大的优势。
目前市面上的翻译框架有 wepy、、taro 等，前两个是 Vue 风格，使用了 Vue1 的语法，但还有很多 Vue 语法无法支持。Taro 是京东半年多的产品，目前还不够稳定，最大的问题是没有包含组件。
好了，又到了本文主角的时间了，anu 原本是一个迷你框架，兼容性比较高，可以运行 -、-、antd 等。anu 小程序是它的扩展，为其添加了一个 cli 和一个新的 cli，其中 cli 在编译时用于将 JSX 转换成 wxml 等，运行时用于在微信内部运行。
由于小程序的限制，所有涉及DOM的API都无法使用，例如TML、refs.dom，目前不支持，因为函数无法在wxml中运行。其他API可以正常使用，包括
各种生命周期钩子，页面组件也有两个新的钩子
div、h1、span、b 和其他 html 标签
用户以小程序形式编写的各种组件
可以在事件中传递参数，并多次绑定（这是其他翻译框架做不到的一大特色）
多循环支持
es6、es7 语法糖支持
组件标签包含组件标签
支持无状态组件
属性自动映射到
.wx对象拥有原始wx对象的所有方法，并自定义了所有请求接口。
提供两个常用别名@和@，方便用户访问常用组件目录的内容。
说了这么多，我们来看看怎么用吧。
1. 前往下载
git
2.进入anu//cli目录，执行npm link命令（如果之前执行过，则需要npm）
3.返回anu目录并使用
创建小程序项目
4.执行npm命令构建项目
5.然后使用微信开发工具打开
以下 dist 目录
去哪儿网模板作为演示项目，里面包含了一些简单的使用演示，可以使用VS Code打开
src目录下是源代码，dist目录下是最终生成的微信运行的代码。
根据微信小程序的要求，src主要分为三个部分：app.js，目录下的页面组件，目录下的公共组件。
app.js 包含所用页面组件的所有 JS 文件
页面组件源代码和生成的代码如下
import React from '@react';
import Dog from '@components/Dog/index';
class P extends React.Component {
render() {
return (
类继承的演示div>
<Dog age={12} />
div>
);
}
}
export default P;
将生成两个文件
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _ReactWX = require("../../../../ReactWX");
var _ReactWX2 = _interopRequireDefault(_ReactWX);
var _index = require("../../../../components/Dog/index");
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
function P() {}
P = _ReactWX2.default.miniCreateClass(
P,
_ReactWX2.default.Component,
{
render: function() {
var h = _ReactWX2.default.createElement;
return h(
"view",
null,
h("view", null, "\u7C7B\u7EE7\u627F\u7684\u6F14\u793A"),
h(_ReactWX2.default.template, {
age: 12,
templatedata: "data09558693",
is: _index2.default
})
);
},
classUid: "c70258"
},
{}
);
Page(_ReactWX2.default.createPage(P, "pages/demo/syntax/extend/index"));
exports.default = P;
动态链接库
src="../../../../components/Dog/index.wxml" />
类继承的演示
is="Dog" data="...data" wx:for="{{data09558693}}" wx:for-item="data" wx:for-index="index" wx:key="*this">
我们再看一下拼多多商城模板，该模板使用Sass作为预处理器。