WEEX中文文档

# 介绍

什么是 Weex ？

  • Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架。
  • Weex 的发音是 /wiːks/, 和 Weeks 同音。

Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，在集成了 WeexSDK 之后，你可以使用 JavaScript 语言和前端开发经验来开发移动应用。

Weex 渲染引擎与 DSL 语法层是分开的，Weex 并不强依赖任何特定的前端框架。目前 Vue.js (opens new window) 和 Rax (opens new window) 这两个前端框架被广泛应用于 Weex 页面开发，同时 Weex 也对这两个前端框架提供了最完善的支持。Weex 的另一个主要目标是跟进流行的 Web 开发技术并将其和原生开发的技术结合，实现开发效率和运行性能的高度统一。在开发阶段，一个 Weex 页面就像开发普通网页一样；在运行时，Weex 页面又充分利用了各种操作系统的原生组件和能力。

# 概述

想初步了解 Weex 其实非常简单。

尽管 Weex Playground 是 Apache Weex 的一部分，但 Online Editor 不是。

这里有一个使用 Weex 和 Vue.js 开发的 最简单的例子 (opens new window)。你可以大致了解 Weex 是如何工作的。

weex-example-yo

在 <template> 部分，包含了 <div> 元素，这个被广泛应用于 Web 页面中，在 Weex 里它也是一个通用的容器。<text> 元素就和普通的 HTML 不太一样了，它提供了显示文本的能力，在 Weex 上，所有文本必须放在 <text> 标签中。

在 <style> 部分，你可以定义各种 CSS 样式。需要注意的是，这些样式在 Weex 里只能作用于当前组件，scoped (opens new window)。

# 原生组件

在上面的例子中，<div> 和 <text> 在移动端上渲染出来的都是原生组件，充分利用了操作系统组件的能力与渲染速度。

native-component

Weex 提供了一套基础的内置组件 (opens new window)。你可以对这些基础组件进行封装、组合形成自己的组件；也可以创建自己的全新组件来包装操作系统提供的地图、视频等功能。可以访问 扩展 iOS 能力 和 扩展 Android 能力来了解如何去实现自定义组件。

在框架内部，Weex 使用原生组件来渲染，并尽可能保持多平台一致性。但在不同平台上，或多或少会有一些渲染、行为上的差异。比如对于 <switch> 组件，在不同平台上的视觉效果是不一致的。

different-switch

# 原生模块

对于那些不依赖于 UI 组件的功能，Weex 将它们包装成多个 模块，比如 动画模块 (opens new window)。在前端代码中，使用 weex.requireModule('xxx') 引入一个模块，之后就可以调用它提供的各种方法。Weex 模块包装了网络、存储、剪切板、导航等各种功能供前端调用。比如你可以使用 stream 模块来获取 Vue.js 的 Star 数量。

Weex 已经提供了不少内置模块 (opens new window)，同时也支持将 App 特有的功能包装成自定义模块提供给前端调用。如果想了解怎么做，可以浏览以下文档。

# 一次编写，处处运行

Weex 的目标就是使用开发者基于一份代码，编写出可以运行在 iOS，Android 和 Web 上的应用，并最大化地提高开发效率和简化测试、构建、发布流程。

有一些场景，你可能仍然需要写一些平台相关的代码。Weex 提供 WXEnvironment 用来获取 Weex 运行的环境变量，浏览 Weex 环境变量 (opens new window)，了解更多。

# 使用前端框架

Weex 应用需要依赖前端框架来编写，但 Weex 并没有绑定、限制在特定的框架上。目前 Vue.js (opens new window) 和 Rax (opens new window) 是最广泛应用于 Weex 开发的前端框架，也是目前功能最全、最稳定的方案。

vue-rax

  • Vue.js 是一个不断进化中的前端框架。
  • Rax 是提供类 React 语法和兼容性的前端框架。

Vue.js 和 Rax 都已经集成到 Weex 中，并默认提供。

将自己喜欢的前端框架和 Weex 进行结合是可以的，但并不是那么容易。我们也在不断开发和简化这种接入工作，如果想了解如何做，或有任何想法可以和我们联系。你也可以先阅读一下 这篇文档了解它是做什么的。

# 下一步

当你看到这里的时候，我相信你已经了解了 Weex 的基本知识。下一步就是深入了解 Weex 的其他特性，并且动手试一试吧。

如果你想用 Weex 来开发自己的应用，请阅读

如果你想为 Weex 贡献自己的力量，比如提交代码、修改文档或提交一些 Bug，可以阅读

# 合作伙伴

FirstUI物料商城 (opens new window)
FirstUI物料商城

# FirstUI预览

考虑快速预览，所以暂未上架App应用，后续待功能完善再进行上架。

微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 H5
微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 H5

← 加入 Weex 社区 →