Weex 概述

2023-12-25 17:04 更新

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

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

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

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

Weex Example

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

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

原生組件

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

Native Components

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

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

Different 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)境變量,了解更多。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號