Weex 概述

想初步了解 Weex 其實非常簡單。

• 安裝 Weex Playground. 在 Playground 里，你可以打開各種示例。
• 訪問 Online Editor. 在這個網(wǎng)站上，你可以瀏覽、修改、新建各種基于 Vue.js 的單頁面例子，并用 WeexPlayground 應(yīng)用掃碼查看實時效果。

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

這里有一個使用 Weex 和 Vue.js 開發(fā)的最簡單的例子。你可以大致了解 Weex 是如何工作的。

在 ?<template>? 部分，包含了 ?<div>? 元素，這個被廣泛應(yīng)用于 Web 頁面中，在 Weex 里它也是一個通用的容器。?<text>? 元素就和普通的 HTML 不太一樣了，它提供了顯示文本的能力，在 Weex 上，所有文本必須放在 ?<text>? 標簽中。

在 ?<style>? 部分，你可以定義各種 CSS 樣式。需要注意的是，這些樣式在 Weex 里只能作用于當(dāng)前組件，scoped。

原生組件

在上面的例子中，?<div>? 和 ?<text>? 在移動端上渲染出來的都是原生組件，充分利用了操作系統(tǒng)組件的能力與渲染速度。

Weex 提供了一套基礎(chǔ)的內(nèi)置組件。你可以對這些基礎(chǔ)組件進行封裝、組合形成自己的組件；也可以創(chuàng)建自己的全新組件來包裝操作系統(tǒng)提供的地圖、視頻等功能?？梢栽L問 擴展 iOS 能力 和 擴展 Android 能力來了解如何去實現(xiàn)自定義組件。

在框架內(nèi)部，Weex 使用原生組件來渲染，并盡可能保持多平臺一致性。但在不同平臺上，或多或少會有一些渲染、行為上的差異。比如對于 <switch> 組件，在不同平臺上的視覺效果是不一致的。

原生模塊

對于那些不依賴于 UI 組件的功能，Weex 將它們包裝成多個 模塊，比如 動畫模塊。在前端代碼中，使用 ?weex.requireModule('xxx')? 引入一個模塊，之后就可以調(diào)用它提供的各種方法。Weex 模塊包裝了網(wǎng)絡(luò)、存儲、剪切板、導(dǎo)航等各種功能供前端調(diào)用。比如你可以使用 stream 模塊來獲取 Vue.js 的 Star 數(shù)量。

Weex 已經(jīng)提供了不少內(nèi)置模塊，同時也支持將 App 特有的功能包裝成自定義模塊提供給前端調(diào)用。如果想了解怎么做，可以瀏覽以下文檔。

• 擴展 Web 組件
• 擴展 Android 能力
• 擴展 iOS 能力

一次編寫，處處運行

Weex 的目標就是使用開發(fā)者基于一份代碼，編寫出可以運行在 iOS，Android 和 Web 上的應(yīng)用，并最大化地提高開發(fā)效率和簡化測試、構(gòu)建、發(fā)布流程。

有一些場景，你可能仍然需要寫一些平臺相關(guān)的代碼。Weex 提供 ?WXEnvironment? 用來獲取 Weex 運行的環(huán)境變量，瀏覽 Weex 環(huán)境變量，了解更多。