整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
今天又發現了一個好東西，給大家分享一下。 Weex，相信很多小伙伴都沒有聽說過，至少之前我是沒有啦。先來看看Weex是干什么的？
Weex 致力于使開發者能基于當代先進的 Web 開發技術，使用同一套代碼來構建 Android、iOS 和 Web 應用。具體來講，在集成了 WeexSDK 之后，你可以使用 JavaScript 和現代流行的前端框架來開發移動應用。
Weex 的結構是解耦的，渲染引擎與語法層是分開的，也不依賴任何特定的前端框架，目前主要支持 Vue.js 和 Rax 這兩個前端框架。
Weex 的另一個主要目標是跟進當代先進的 Web 開發和原生開發的技術，使生產力和性能共存。在開發 Weex 頁面就像開發普通網頁一樣；在渲染 Weex 頁面時和渲染原生頁面一樣。
就是一套前端代碼，可以構建Android、iOS 和 Web應用。和起步的wex5類似啦。
如果你想先觀望觀望，可以到這里體驗一下，Weex有一個在線編寫代碼的平臺。 你可以在上面寫單個頁面的例子，而不需要任何配置。在平臺上源代碼應該用 Vue.js 的單文件組件 語法來編寫，在 Web 平臺的渲染結果將顯示在一個模擬的手機殼中。
如果你想在移動設備上預覽渲染結果，你只需要安裝Weex playground app 或將 Weex SDK 集成到您自己的應用程序中，然后使用掃描網頁右側的二維碼。
官方文檔說“文本只能放在 標簽里，否則將被忽略。”，但是我寫了好像并沒有額。不過不要向我學習啦，我只是試試。哈哈...推薦還是放到<text>標簽。
在 <style> 標簽內，你可以寫 CSS 來描述一個組件的樣式，需要注意的是，這些樣式在 Weex 里只能作用于當前組件。（強制 scoped）。
Weex 在 iOS 和 Android 上都實現了一個渲染引擎，并提供了一套基礎的內置組件。基于這些組件，你可以用 js 封裝更多的上層組件。
盡管 Weex 中的組件看起來很像 HTML 標簽，但你無法使用所有 HTML 標簽，只能使用內置組件和自定義組件。
在框架內部，Weex 使用的是原生系統提供的 Widget 來渲染的。盡管 Weex 強調每個跨平臺的一致性，但我們仍然接受平臺本身的行為和 UI 差異。 例如 switch 組件 在 Android 和 iOS 上看起來是不同的（在 Web 端的外觀模擬了 iOS）。
下面看看包含那些內置組件:
<div> 常見 <image> 常見 <text> 常見 <a> 常見 <list> 列表 <cell> 列表子元素 <recycle-list> 新的列表容器，具有回收和復用的能力 <refresh> & <loading> 下拉刷新 & 上拉加載 <scroller> 類flex <input> 常見 <textarea> 常見 <switch> <slider> 輪播圖 <indicator> 輪播圖指示器 <video> 常見 <waterfall> 瀑布流布局 <web> webview
對于那些不依賴于 UI 的功能，Weex 推薦將它們包裝到模塊中，然后使用 weex.requireModule('xxx') 來引入。 這是使用 javascript 調用原生功能的一種方法，如網絡，存儲，剪貼板和頁面導航等功能。這里有一個使用 stream 模塊獲取 Vue.js 的 star 數 的例子。
同樣，Weex 也提供了一套基礎的內置模塊，也支持將已有的原生模塊集成到 Weex 中。
關于如何擴展 Weex 的原生組件和原生模塊，可以參考下列文檔：
擴展 Web 渲染器 擴展 Android 擴展 iOS
一次編寫，處處運行
Weex 可以只編寫一份代碼，開發出三端都可用的頁面。
在多個端中使用相同的源代碼可以顯著提高開發效率，并簡化測試，構建和發布流程。在此基礎上，Weex 可以將前端的打包、測試流程與手機端監控、發布系統結合起來，提高開發效率。
盡管 Weex 多端都是用的同一份代碼，但是仍然支持針對特定的平臺開發功能。Weex 提供了 weex.config.env 和 WXEnvironment（它們是相同的）來獲得當前的運行時環境。你可以用 WXEnvironment.platform 來確定代碼運行在哪個平臺上。除了平臺以外，WXEnvironment 還包含其他環境信息，如 osVersion 和 deviceModel，參考 Weex variable 了解更多詳細信息。
前端框架對 Weex 而言只是一個語法層，它們和原生渲染器是解耦的。Weex 并沒有強綁定與某個特定的前端框架，而是可以把渲染原生 UI 的能力賦予某些前端框架。
目前 Weex 將 Vue.js 和 Rax 作為其內置的前端框架。
Vue.js 是一套用于構建用戶界面的漸進式框架。 Rax 兼容 React 接口的前端框架。
然而 Weex 也不是只支持 Vue 和 Rax，你也可以把自己喜歡的前端框架集成到 Weex 中。
Weex 提供了一個命令行工具 weex-toolkit 來幫助開發者使用 Weex。它可以用來快速創建一個空項目、初始化 iOS 和 Android 開發環境、調試、安裝插件等操作。
目前 weex-toolkit 只支持創建 Vue.js 的項目。創建 Rax 的項目可以使用 rax-cli，參考 Rax 的官方網站 了解其用法。
初始化
npm install weex-toolkit -g
這條命令會向你命令行環境中注冊一個 weex 命令。你可以用 weex create 命令來創建一個空的模板項目：
weex create awesome-app
命令執行完以后，在當前目錄的 awesome-app 文件夾里就有了一個空的 Weex + Vue.js 項目。
開發
下一步就是進入剛剛創建的文件夾，并且安裝依賴，然后執行 npm start
cd awesome-app npm install npm start
然后工具會啟動一個本地的 web 服務，監聽 8081 端口。你可以打開 http://localhost:8081 查看頁面在 Web 下的渲染效果。 源代碼在 src/ 目錄中，你可以像一個普通的 Vue.js 項目一樣來開發.
除此之外，你還可以打開 http://localhost:8081/preview.html 開啟一個預覽頁面，它會把 web 端的頁面放在一個 iframe 中渲染，而且在右側生成一個二維碼。用 Weex playground app 掃描這個二維碼可以看到頁面在手機上渲染的真實效果。
編譯和運行
默認情況下 weex create 命令并不初始化 iOS 和 Android 項目，你可以通過執行 weex platform add 來添加特定平臺的項目。
weex platform add ios weex platform add android
由于網絡環境的不同，安裝過程可能需要一些時間，請耐心等待。如果安裝失敗，請確保自己的網絡環境暢通。
為了能在本地機器上打開 Android 和 iOS 項目，你應該配置好客戶端的開發環境。對于 iOS，你應該安裝并且配置好 Xcode。對于 Android，你應該安裝并且配置好 Android Studio。當開發環境準備就緒后，運行下面的命令，可以在模擬器或真實設備上啟動應用：
weex run ios weex run android weex run web
調試
weex-toolkit 還提供了強大的調試功能，只需要執行：
weex debug
這條命令會啟動一個調試服務，并且在 Chrome （目前只支持基于 V8 引擎的桌面瀏覽器） 中打開調試頁面。詳細用法請參考 weex-toolkit 的文檔。
喜歡小編的點擊關注，了解更多知識！
源碼地址和源文件下載請點擊下方“了解更多”
016年Qcon大會首日，阿里巴巴資深總監、淘寶移動平臺、阿里百川負責人莊卓然宣布移動端高性能動態化方案Weex即時內測，并將于6月開源。此消息一出，群情洶涌，在座的程序猿、攻城獅們紛紛拿起手機掃碼，以期第一時間感受Weex的神奇之力。
在第二天的主題分享會上，阿里巴巴前端開發專家趙錦江和技術專家徐凱對Weex進行了深入的解析。以下為演講速記整理后的成文。
阿里怎么看待移動開發？
目前的移動開發者面臨的最大痛點就是面對極其復雜的環境，對此，莊卓然給出一個公式，移動開發的復雜度=應用數量×平臺數量×要適配的各種各樣的機型。
如何解決這個問題呢？在解決問題之前，首先要對移動開發的未來有著精準的研判。
阿里認為，移動開發的未來必定更加平衡，也就是說必須是性能與動態兼得，如此，才能夠滿足未來用戶的需求。另外，移動開發在未來也必定是開放互聯的狀態，移動互聯網將來肯定是基于更加大眾化的技術體系，沒有平臺之間的隔閡，而且簡單易用。
所以，阿里結合移動開發的現狀并圍繞其愿景推出了Weex解決方案。
事實上，在去年的雙11活動中，Weex就得到了實戰的驗證，且表現不俗。時至今日，Weex已經被阿里技術團隊多次運用，并“創造”出各種豐富的場景，整體的表現非常優異。
把移動端所有界面拆分成各個page，然后中間設置有路由的控制邏輯，同時，將移動端各種各樣的能力通過各種API提供給開發者。這是阿里對移動開發模型的理解。
Weex通過標準化的東西，包括HTML、CSS和JS這些前端非常快速易用好學的語法作為開發體驗，提供給開發者。另外，Weex的語法設計尊重還Web的標準。
Weex的工作原理
Weex設計之初就考慮到在三端（iOS、安卓和H5）上能夠得到展現。在最上面的DSL，阿里一般稱之為Weex文件（.we），通過Transformer轉換成js-bundle，再部署到服務器，這樣服務端就完成了。在客戶端，第一層是JS-Framework，最后到RenderRengine。
輸入是Virtual DOM輸出是native或者H5 view，還原成內存中的樹型數據結構，再創建view，把事件綁定在view上，把view基本屬性設上去。Weex Render會分三個線程，不同的線程負責不同的事情，讓JS線程優先保障流暢性。
Weex的性能、擴展性以及可用性究竟怎樣呢？
性能方面，阿里對Weex做了多次壓測。在加載時間、幀率、內存消耗、CPU占用（包括靜默和峰值）等多個方面，Weex都表現得非常出色。
在談及性能之時，幀率和加載時間幾乎都會被提及，但是往往忽略了一個事實，那就是Native UI開發中通常沒有JS資源在服務器端加載。Weex會把JS內置到客戶端里，以免除下載的問題，從而更為有效地提升性能。
兼容性是Weex非常重視的問題，對此，阿里是這樣來解決的。
首先是單測保證，包括JS和H5的單測，保證最基礎的UT（Unit Test）本身所帶來的含義。
其次是UI的自動化，分為兩個部分，一是截圖對比，將最終產生的結果和意料中的結果進行圖形對比；二是Layout Results，包括Model以及其他的布局類的，通過基本的信息完成測試的過程。
在擴展性方面，Weex可以寫很多頁面，而且通過路由機制幫助開發者將頁面進行串聯。
Weex已開放內測，可用性方面正在逐步完善。包括Playground、調試工具、腳手架、AppHub、編輯器等多個方面，一些工作已經完成就緒，絕大部分工作將在5、6月份完成。
最后，是Weex的三種工作模式。
1.全頁模式
目前支持單頁使用或整個App使用Weex開發（還不完善，需要開發Router和生命周期管理），這是主推的模式，可以類比RN。
2.Native Component模式
把Weex當作一個iOS/Android組件來使用，類比ImageView。這類需求遍布手淘主鏈路，如首頁、主搜結果、交易組件化等，這類Native頁面主體已經很穩定，但是局部動態化需求旺盛導致頻繁發版，解決這類問題也是Weex的重點。
3.H5 Component模式
在H5種使用Weex，類比WVC。一些較復雜或特殊的H5頁面短期內無法完全轉為Weex全頁模式（或RN），比如互動類頁面、一些復雜頻道頁等。這個痛點的解決辦法是：在現有的H5頁面上做微調，引入Native解決長列表內存暴增、滾動不流暢、動畫/手勢體驗差等問題。
另外，WVC將會融入到Weex中，成為Weex的H5 Components模式。
前端開發的同學，應該對data屬性不陌生，data-* 屬性可以在所有的 HTML 元素中嵌入數據。因此，所有主流瀏覽器都支持data-*屬性，各種js框架也必須有它的使用，weex也不例外。
本文適合有點weex基礎的人，看開頭以為是講data-*屬性？不僅僅，一定要看到最后。
同h5使用方式一樣，在weex頁面中使用data-作為前綴設置屬性，data-* 屬性由以下兩部分組成：
以iOS代碼為例，我們監聽一下WXComponent的setWx_component方法，觀察一下設置的data-屬性，此處我沒有在WeexSDK中檢測，而是在load中hook一下WXComponent的setWx_component方法：
+ (void)load {
[super load];
// 對WEEX組件進行兼容
NSError *err;
[UIView aspect_hookSelector:@selector(setWx_component:) withOptions:AspectPositionAfter usingBlock:^(id<AspectInfo> info){
WXComponent *comp = info.arguments.firstObject;
if (!comp) return;
NSLog(@"%@", self.attributes);
} error:&err];
if (err) {
NSLog(@"badge aspect setWx_component >>>>\n%@", err.localizedDescription);
}
}會發現自定義屬性前綴 "data-" 的“-”會被原生代碼忽略，變成駝峰命名的屬性，如data-badge在原生代碼中，獲取到的屬性名是dataBadge，如下圖所示：
原生獲取的屬性列表
手誤之后更驚喜的發現：
// vue代碼
<div data-badge="8888" extra-data="aaa" mypro="bbb" class="titleDiv">
<text>這是一段文字說明</text>
</div>也就是說，vue中的weex開發中，標簽除了支持data-屬性，還支持其他字符串的自定義屬性以及*-*的模式，只是包含-的屬性會變成駝峰命名。
rax中貌似不支持含有“-”的屬性，因此可以直接用正常變量命名的字符串即可：
// rax代碼
<View className="border" data1='aaa' bbb="bbb" dataBadge="ccc">
<Text>這是一段文字</Text>
</View>原生獲取的屬性列表
因此可以看出，正常變量命名字符串都可以作為自定義屬性，注意vue和rax的區別即可。
有了自定義屬性，可以方便對weex元素進行監聽和操作，是不是很方便呢？
Weex官網和Rax上都找不到相關說明，自己試試才知道哦。
有問題歡迎留言交流。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
