（總結）Weex若干特性總結分析

1.Weex是什麼？

　　背景：weex基於vue.js(2W+ star)，由阿里團隊推出。是一款小巧輕量的前端開發框架，支持組件化和數據綁定。目前，尤雨溪以技術顧問的形式加入weex開發。weex目前在阿里已被用於去年天貓雙十一，並準備投入今年雙十一活動，有必定的業務實踐經驗。

　　核心思想：write once run everywhere && Native Speed in Native Platform

　　目前獲取資源的主要平臺：

　　　　官網：https://alibaba.github.io/weex/

　　　　Github：https://github.com/alibaba/weex

　　　　weex中文社區：http://weex.help/

　　　　weex 文章：  https://github.com/weexteam/article/issues

     　　weex 調試： https://github.com/weexteam/article/issues/50

   　　  weex交流室： https://gitter.im/weexteam/cn?utm_source=share-link&utm_medium=link&utm_campaign=share-link

　　　  weex學習實踐指南：https://github.com/vczero/weex-learning

 

2.特性

　　2.1語法

　　 

       每一個we文件由：<template>頁面結構、<style>界面樣式、<script>數據和邏輯組成。

　　<template>：

 　　相似傳統HTML結構

　　<style>：

　　支持盒模型和flex佈局。樣式寫法：weex採用羊肉串的寫法：background-color，RN採用駝峯backgroundColor。  

　　

　　<script>：

 　　數據和邏輯

　　 分離思想對應傳統web的語法：原生的css、html、javascript的語法 語法學習成本較低。

　　 基於Vue的語法結構，與傳統web開發所遵循的結構樣式分離邏輯一致。模板可理解爲普通的html，數據綁定使用mustache風格，樣式直接使用css（實現了flexbox）。更接近經常使用的web開發方式，語法學習成本較低。

       目前weex的一些文檔比較少，但因爲基於vue，基本的語法可供參考vue文檔。如生命週期在weex文檔基本沒有論述，可結合vue進行學習。整體而言框架語法學習曲線較平緩。

　　2.2組件化

　　Weex：組件（<template>頁面結構  <style>界面樣式  <script> 數據和邏輯）

　　

　　

　　2.3 跨平臺特性 write once run everywhere

　　實現原理：1）核心工具是transformer把weex的we文件轉換成純JS代碼；

　　

　　實現原理：2）在客戶端運行一個 JavaScript 引擎，隨時接收 JavaScript 代碼；在客戶端設計一套 JS Bridge，讓 native 代碼能夠和 JavaScript 引擎相互通訊。

web端的處理：

 

　　　　　　　　

 

　　  同構 HTML5 版本主要利用 JS Bridge、組件定義、API 定義方面的高度抽象—— HTML5 的版本在性能和體驗上有必定的劣勢，並非最理想化的效果。weex核心的主戰場仍是客戶端，但亦可降級到H5。

　　2.4 數據綁定

　　實現：採起了數據監聽+依賴收集（data binding + data change）的策略。沒有經過髒檢查，沒有經過全量 diff Virtual DOM 樹（和RN不一樣）的方式。weex注重性能上的優化，相對RN有必定的性能提高。

3.環境搭建

 　　web端：簡單。weex **.we便可。基本按照demo文檔很快能夠運行出helloworld。參照：http://zct1989.oschina.io/2016/07/04/weex1/

　　 Android端：須要學習Android環境配置和Android項目結構，不然較易出錯。

　　

　　主要關注圖中紅色圈圈部分：第一個爲JS Bundle文件，其他爲需配置的Android文件。具體配置方法參考：http://smilevenus.com/2016/07/03/%E9%98%BF%E9%87%8CWeex%E6%A1%86%E6%9E%B6Android%E5%B9%B3%E5%8F%B0%E5%88%9D%E4%BD%93%E9%AA%8C/

　　ios端：參照 http://blog.csdn.net/dongyu0729/article/details/52104194  http://weex.help/topic/57ada512a16ef6026b9c7595 或可利用weex提供的weexplayground軟件掃碼直觀看運行效果。（原理相似）

　4.調試工具

 　　　 weex devtools：weex debug 可同時檢查weex裏VDOM屬性、原生代碼調試、進行Javascript 代碼斷點調試，支持IOS和Android兩個平臺。與普通的chrome瀏覽器調試界面同樣。能夠在chrome查看，支持節點調試查看，支持真機調試。。https://github.com/weexteam/article/issues/50

  5 Demo展現

　　以下Demo涉及如下幾點：

　　1）組件化開發思路。Demo涉及tabbar，navigator，list，stream等內置組件，及其他自定義組件。採用標準格式設置module.exports後，每個we文件均可以做爲一個組件來require使用。模塊化和組件化進行的很完全。RN相似。

　　2）List組件，可配置懶加載功能。採用recyclerview來實現。

　　3）獲取後臺數據，採用stream模塊的fetch方法，知足平常須要。

　　4）navigator實現頁面切換。weex也是基於路由棧的機制，可是需配置好js bundle地址。

　　5）參數傳遞。可採用URL，父子組件，兄弟組件傳遞（採用dispatch和on方法。參見：）等方法。本demo採用URL傳遞。

　　6）生命週期，created，相似RN的constructor(props)。weex文檔較少。但考慮到weex和RN的基本思想一致，能夠藉助RN來理解和使用weex。

 　　 Demo展現（頻道頁，列表頁，Android上運行）：

　　                

　　6 存在問題：

　　　　主要是生態問題

　　　　1）. weex七月底所有開源完成。開源時間較晚。
　　　　2）. github目前有6k+ start，主要貢獻人員以阿里爲主，額外貢獻人較少。
　　　　3）. issue和pull request也比較少，社區目前規模比較小。
　　　　4.） 文檔更新較慢，demo bug較多。
　　　　5）. KPI項目？部分開發者對阿里後續維護有所擔憂。
　　　　但隨着weex的開源、vue做者尤的加入以及weex較優秀的跨平臺特性和在性能上的優化。社區前景可觀。

　　　　SEO問題持續關注。