Weex 中的前端框架

Vue and Rax

前端技术看起来很繁荣，测试、打包、调试等工具都比较丰富，开发效率比原生开发要高很多。在大型项目中使用前端框架也是一个管理应用好方法，这样更方便于长期维护。

然而，Weex并不是一个前端框架。实际上，前端框架仅仅是 Weex 的语法层或称之为 DSL (Domain-specific Language)，它们与原生渲染引擎是分离的。换句话说，Weex 并不依赖于特定的前端框架，随着前端技术的发展，Weex 也可以集成更多广泛使用的前端框架。

目前 Weex 主要支持 Vue.js前端框架 - 图2 和 Rax前端框架 - 图3 作为其内置的前端框架。这些框架已经集成到了 Weex SDK，你不需要在额外引入。

学习一些 Vue 和 Rax 的基础知识，对使用 Weex 非常有帮助。

框架类型标记

Weex 仅在运行时（开始渲染页面之前）才会确定页面使用哪种 DSL，因此要在页面代码中标记使用的是哪种类型的前端框架。

使用注释标记

在 Weex v0.16 以及更早的版本中，使用特定格式的注释来标记框架类型，格式是 // { "framework": "xxx" }，其中的 xxx 指的是前端框架的名字（首字母大写）。

注意： 注释类型标记必须放在代码最前面。 标记之前只能有空格或者空行，不能有其他类型的字符。

例如 Vue 框架的类型标记如下：

  1. // { "framework": "Vue" }

Rax 框架的类型标记如下：

  1. // { "framework": "Rax" }

使用字符串标记 0.17+

使用注释作为框架标记不够稳妥，在打包过程中有可能会被移除掉，因此从 v0.17 版本开始 Weex 支持使用 ECMAScript 规范中的“指令序言”（Directive Prologue前端框架 - 图4）来标记各种前端框架的类型，标记的格式是 "use weex:xxx";，其中的 xxx 指的是前端框架的名字，兼容单引号和双引号，字符串内容保持小写。

注意： 字符串类型标记必须放在所有可代码之前。 标记之前可以有空格、空行或者注释，但是不能有可执行的代码。

例如 Vue 框架的类型标记如下：

  1. "use weex:vue";

Rax 框架的类型标记如下：

  1. "use weex:rax";

兼容所有版本的写法

如果你集成 Weex SDK 都在 0.17 版本之上，建议使用 "use weex:vue"; 作为框架类型标记。如果考虑兼容更早的版本，可以同时使用两种类型标记。

例如 Vue 框架的类型标记如下：

  1. // { "framework": "Vue" }
  2. "use weex:vue";

Rax 框架的类型标记如下：

  1. // { "framework": "Rax" }
  2. "use weex:rax";

Vue.js

Weex 从 v0.10.0前端框架 - 图5（发布于 2017/02/17）这个版本开始，就集成了 v2 版本的 Vue.js。Vue.js 是一套用于构建用户界面的渐进式框架，详情请参阅其官方网站前端框架 - 图6。

TIP

关于在 Weex 中使用 Vue 的技巧请参阅：《在 Weex 中使用 Vue.js》。

Rax

Rax 是一个兼容 React 接口的前端框架，请参考 Rax 的官方网站前端框架 - 图7 来获得更多信息。