ReactNative 到 Weex 的艱難一邁

「Write once，Run Everywhere」 一次編寫，多端運行。React遷移到MIT協議，惋惜React Native依然沒改，沒有RN的日子，還好有Weex這位哥們頂着。雖然沒有RN那麼牛逼，但也算是一個不錯的小兄弟。

不少人可能要問我搞了這麼久的RN如今轉Weex幹什麼？提及來，真是一個悲傷的故事

爲何不用RN

Facebook並無像React那樣把ReactNative也遷移到MIT協議，因此使用ReactNative開發對外產品，依然有專利風險。通常的公司其實沒什麼影響，但我廠狀況比較特殊，有好幾個核心的專利技術，老闆不想冒這個險。加之隔壁的阿里Weex推得很火，那就用用看吧！

React專利許可證具體細節歡迎出門左轉看我以前的文章：《React專利許可證研究》

Weex較RN的優點

說老實話，和ReactNative打交道這麼久，忽然換一個小兄弟上，一時還真的難以適應，甚至一臉嫌棄。Weex和ReactNative的設計理念也徹底不一樣。RN重點在Native，以React的方式開發跨平臺App，它注重Native細膩的用戶體驗和強大的原生功能，運用 ReactNative 甚至不須要Native工程師就能獨立開發一款功能完善的App。

Web開發體驗

獨立開發App對Weex來講比較困難，由於它的Native能力沒有RN那般強大而全面。它更注重 Web開發體驗，顧名思義就是像開發Web網頁同樣開發跨平臺App頁面，注意了是以Web爲主導，因此它的設計理念提倡 輕量 + 可拓展（至於「高性能」較RN並沒什麼太大的體現），官方也推薦用Weex和Native混合的方式開發App，也就是把Weex做爲一個組件融入到Native App，替換傳統的 Hybrid 模式。

沒有專利限制

Weex已經加入ASF，沒有ReactNative 的專利協議限制，能夠放心大膽地使用。固然有童鞋會反問 Weex目前還在使用 FaceBook 的 Yoga引擎，會不會有隱患？這個短時間內不須要咱們操心，首先這個問題自己邊緣就很模糊，其次 像阿里這樣的大廠早晚會開發一套相似的引擎來替代，時間問題。

三端共用代碼

Weex既保留了H5的靈活性，也賦予了其Native能力，經過JavaSriptCore+JSbridge直接和Native進行通訊，較之 Hybrid的WebView + URLScheme方式性能好了不少。甚至能夠實現傳說中的 「三端融合」——也就是 Web、iOS、Android端的前端部分共用一套代碼，省去了獨立建站和維護的麻煩。

固然有得必有失，三端兼容的坑也很多，Android各機型 hack 就不提了，Web端其實就是個WebApp，要利用瀏覽器的BOM與三方的JS-SDK 來完成 DOM和HTTP之外的功能。不過使用Weex內建的標籤和樣式能夠很容易實現三端佈局樣式和基本行爲的一致，仍是大大地減小了工做量。

值得一提 Weex的佈局單位有且只有px，默認的顯示寬度 (viewport) 是 750px，組件都會以 750px 做爲滿屏寬度，但能夠經過 meta.setViewport() 手動指定頁面的顯示寬度

Type	iPhone4	iPhoneSE	iPhone8	iPhone8P	iPhoneX
物理像素	640x960	640x1136	750x1334	1080x1920	1125x2436
顯示像素	750x1125	750x1331	750x1334	750x1333	750x1624
像素比	@0.85x	@0.85x	@1x	@1.44x	@1.5x

對CSS3的支持

Weex雖然也對CSS作了必定的閹割，但比較 ReactNative，它保留得更多，甚至支持大量的CSS3特性，這一點值得讚歎。CSS3做爲Web開發的利器，放着不用不免惋惜。下面列舉Weex 和標準Web的樣式差別：

• 支持的CSS3特性包括：FlexBox、2D轉換、過渡、線性漸變、陰影（僅Web和iOS）、僞類、自定義字體（iconFront圖標也能用哦）
• 中支持單個 類名選擇器，不支持 關係型選擇器，也不支持 屬性選擇器
• 支持組件級別的做用域，爲了保持Web和Native的一致，須要 <style scoped> 聲明做用域
• 不支持CSS3動畫（動畫請使用Weex內建animation模塊）和3D轉換
• 不支持 display: none ，用模板語法 v-if 替代，不建議用 opacity: 0（Native裏有點透問題）
• 相似RN，爲了提升解析效率，Weex樣式屬性不支持簡寫，好比 font、border、transfrom不能簡寫

Weex不足之處

本節的最後，仍是想吐槽幾個Weex的不足之處，但願官方能儘快升級和改進：

社區建設緩慢

這應該是最要命的，Weex社區從去年開源到今天仍是這般冷清難免使人神傷，雖然我知道阿里內部推廣力度很大，可是既然選擇開源，就應該跳出阿里的圈子，一些成功案例、成熟解決方案、優秀架構設計等就不該該藏着掖着，否則真的很難推廣起來。我不但願遇到坑點 Google 幾圈都找不到有價值的方案，GitHub上提問半天都等不到一個滿意的答案（哈哈，說得有點激動啊，很感謝 mario 上次回答個人提問，但願能儘快反應到官方文檔裏）

Native能力提升

若是不提升Native能力，Weex的 全頁模式 價值其實不大。不要求面面俱到，但但願能再添加一些經常使用的，好比：statusBar控制、位置信息、Android動態權限分配等

真機調試工具升級

Weex提倡Web開發體驗，因此開發和調試都以Web爲主，作靜態頁面還好，但我要調試Native端的特有邏輯，就須要在Native端集成weex-devtool。這個方案的確另闢蹊徑，不過每次改完代碼須要手動刷新會不會太麻煩，能不能搞個相似RN的 熱替換 或 LiveReload功能呢？

Mac端文件權限問題

在Mac端Shell工具進入Weex的目錄，不管npm相關命令，仍是git操做都須要sudo權限，好麻煩。我很懶的，Weex在建立文件的時候能不能幫我把寫權限的事也作了？

---

哈哈，是否是我太蠢沒能領悟到技巧，不對的地方歡迎留言指正哈。不過前端工程師都是挑剔的，但願Weex能不斷改進和完善！