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問題持續關注。