Weex
Weex是阿里巴巴開發(fā)的,用于開發(fā)跨平臺軟件的框架.
最近剛剛研究Weex,所以先對其進行一個簡單的基本的介紹.在學習的React Native之后,對于跨平臺框架理念的理解相對容易些,在下面的介紹中,我會對它們進行對比分析.
Weex優(yōu)勢
Weex的優(yōu)勢所在:
- 輕量級
Weex使用標簽化語言,語法非常簡單,使用Vue.js框架,學習成本較低,對于前端開發(fā)尤甚. - 擴展性強
Weex封裝了豐富的組件和api,可以完成各種定制化的需求 - 高性能
Weex使用純本地渲染,體驗更好;可以實現(xiàn)熱更新. - 跨平臺
Weex實現(xiàn)了Write Once Run Everywhere,并且適配了Web端,這與RN的Learn Once Write Everywhere和只適配iOS和android不同.
Weex開發(fā)環(huán)境搭建
和RN對比,Weex的開發(fā)環(huán)境配置更簡單.
只需要安裝命令行工具: npm install -g weex-toolkit.然后就可以運行Weex文件啦!
Weex的運行也很簡單,不需要特殊的開發(fā)工具,只需要使用你習慣的編輯工具創(chuàng)建Weex文件(一般以.we為后綴名).
在網頁運行
命令行weex fileName.we
如上命令會在瀏覽器里打開工程,本地編輯文件保存后,頁面會自動刷新,這也就是Weex強調的熱加載!
在客戶端運行
命令行weex fileName.we --qr -h {ip or hostname},會在終端生成二維碼如下
通過下載Weex的運行終端Weex Playground App,在APP內掃描二維碼即可.
需要強調的是: 所有在客戶端運行的Weex項目,都是使用客戶端原生組件進行渲染的,所以是純客戶端的體驗,這一特點也是我們在追求跨平臺框架時絕不妥協(xié)的一點.縱觀跨平臺框架發(fā)展史,凡是在體驗上妥協(xié)的框架,都已經或者終將被淘汰.
Weex語法
Weex使用標簽語言,三個標簽<template>,<style>,<script>描述了全部的Weex渲染和交互.
<template>
功能類似于HTML,用于進行UI布局,Weex文件中必須包含該標簽.
<template>內部只能包含一個用來形容布局的根標簽,
<style>
可以理解為是CSS的語法集合,用來描述組件的樣式,非必須
Weex使用的是Flex布局,<style>內部使用Flex的布局屬性,需注意的是屬性名使用的是中劃線而非駝峰命名方式.
Flex布局的優(yōu)點和靈活在這里不多做介紹,感興趣的可以自己研究下.
<script>
用于管理數(shù)據(jù)和事件.非必須
組件的data-binding就是使用<script>實現(xiàn)的,在數(shù)據(jù)發(fā)生變化時,組件會自動刷新布局.
Weex在實際開發(fā)中的問題
在使用中發(fā)現(xiàn)了Weex的一些不足之處,現(xiàn)做個簡單說明.
- 不支持本地圖片
Weex內的image標簽只能設置網絡圖片,不支持本地圖片的使用 - style標簽不夠豐富
相比Web靈活的style標簽,Weex只支持一部分特定的Flex標簽
總結
Weex因為主打的是Write Once Run Everywhere,所以對于Native端一些常見的功能,類似打開相機,需要自己進行封裝,所以Weex更適合開發(fā)用于展示頁面和頁面內交互的項目.
關于Weex和React Native的對比,個人覺得這篇總結不錯,大家可以看看.
