Weex

Weex是阿里巴巴開發(fā)的,用于開發(fā)跨平臺(tái)軟件的框架.
最近剛剛研究Weex,所以先對(duì)其進(jìn)行一個(gè)簡(jiǎn)單的基本的介紹.在學(xué)習(xí)的React Native之后,對(duì)于跨平臺(tái)框架理念的理解相對(duì)容易些,在下面的介紹中,我會(huì)對(duì)它們進(jìn)行對(duì)比分析.

Weex優(yōu)勢(shì)

Weex的優(yōu)勢(shì)所在:

• 輕量級(jí)
  Weex使用標(biāo)簽化語(yǔ)言,語(yǔ)法非常簡(jiǎn)單,使用Vue.js框架,學(xué)習(xí)成本較低,對(duì)于前端開發(fā)尤甚.
• 擴(kuò)展性強(qiáng)
  Weex封裝了豐富的組件和api,可以完成各種定制化的需求
• 高性能
  Weex使用純本地渲染,體驗(yàn)更好;可以實(shí)現(xiàn)熱更新.
• 跨平臺(tái)
  Weex實(shí)現(xiàn)了Write Once Run Everywhere,并且適配了Web端,這與RN的Learn Once Write Everywhere和只適配iOS和android不同.

Weex開發(fā)環(huán)境搭建

和RN對(duì)比,Weex的開發(fā)環(huán)境配置更簡(jiǎn)單.
只需要安裝命令行工具: npm install -g weex-toolkit.然后就可以運(yùn)行Weex文件啦!
Weex的運(yùn)行也很簡(jiǎn)單,不需要特殊的開發(fā)工具,只需要使用你習(xí)慣的編輯工具創(chuàng)建Weex文件(一般以.we為后綴名).

在網(wǎng)頁(yè)運(yùn)行

命令行weex fileName.we
如上命令會(huì)在瀏覽器里打開工程,本地編輯文件保存后,頁(yè)面會(huì)自動(dòng)刷新,這也就是Weex強(qiáng)調(diào)的熱加載!

在客戶端運(yùn)行

命令行weex fileName.we --qr -h {ip or hostname},會(huì)在終端生成二維碼如下

qr.png

需要強(qiáng)調(diào)的是: 所有在客戶端運(yùn)行的Weex項(xiàng)目,都是使用客戶端原生組件進(jìn)行渲染的,所以是純客戶端的體驗(yàn),這一特點(diǎn)也是我們?cè)谧非罂缙脚_(tái)框架時(shí)絕不妥協(xié)的一點(diǎn).縱觀跨平臺(tái)框架發(fā)展史,凡是在體驗(yàn)上妥協(xié)的框架,都已經(jīng)或者終將被淘汰.

Weex語(yǔ)法

Weex使用標(biāo)簽語(yǔ)言,三個(gè)標(biāo)簽<template>,<style>,<script>描述了全部的Weex渲染和交互.

<template>

功能類似于HTML,用于進(jìn)行UI布局,Weex文件中必須包含該標(biāo)簽.
<template>內(nèi)部只能包含一個(gè)用來(lái)形容布局的根標(biāo)簽,

<style>

可以理解為是CSS的語(yǔ)法集合,用來(lái)描述組件的樣式,非必須
Weex使用的是Flex布局,<style>內(nèi)部使用Flex的布局屬性,需注意的是屬性名使用的是中劃線而非駝峰命名方式.
Flex布局的優(yōu)點(diǎn)和靈活在這里不多做介紹,感興趣的可以自己研究下.

<script>

用于管理數(shù)據(jù)和事件.非必須
組件的data-binding就是使用<script>實(shí)現(xiàn)的,在數(shù)據(jù)發(fā)生變化時(shí),組件會(huì)自動(dòng)刷新布局.

Weex在實(shí)際開發(fā)中的問(wèn)題

在使用中發(fā)現(xiàn)了Weex的一些不足之處,現(xiàn)做個(gè)簡(jiǎn)單說(shuō)明.

• 不支持本地圖片
  Weex內(nèi)的image標(biāo)簽只能設(shè)置網(wǎng)絡(luò)圖片,不支持本地圖片的使用
• style標(biāo)簽不夠豐富
  相比Web靈活的style標(biāo)簽,Weex只支持一部分特定的Flex標(biāo)簽

總結(jié)

Weex因?yàn)橹鞔虻氖?code>Write Once Run Everywhere,所以對(duì)于Native端一些常見的功能,類似打開相機(jī),需要自己進(jìn)行封裝,所以Weex更適合開發(fā)用于展示頁(yè)面和頁(yè)面內(nèi)交互的項(xiàng)目.

關(guān)于Weex和React Native的對(duì)比,個(gè)人覺得這篇總結(jié)不錯(cuò),大家可以看看.