(總結)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問題持續關注。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM