什么是 Weex ？

发布于 2019-12-31 14:29:15 字数 5304 浏览 10392 评论 0 收藏 0

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

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

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

概述

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

安装 . 在 Playground 里，你可以打开各种示例。
访问 Online Editor. 在这个网站上，你可以浏览、修改、新建各种基于 Vue.js 的单页面例子，并用 WeexPlayground 应用扫码查看实时效果。

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

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

Weex Example

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

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

原生组件

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

Native Components

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

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

Different switch

原生模块

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

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