最近項目在改造，嘗試使用Weex代替原有的H5 和原生頁面，提高系統運行效率。期間遇到了很多坑，後面會仔細講講，先來看下Weex的基本信息。
一、什麼是weex
"Weex是一個可以使用現代化的 Web 技術開發高性能原生應用的框架"，這是Weex官網對其的一句很簡介明瞭的定義。Weex是一個可以利用web 前端開發技術來實現Android/ios 原生引用的框架，使用 Vue 作爲上層框架，並遵循 W3C 標準實現了統一的 JSEngine 和 DOM API。
二、整體架構
本地開發的web 頁面，構建形成 Weex 的一個 JS bundle（native）；在雲端，開發者可以把生成的 JS bundle 部署上去，然後通過網絡請求或預下發的方式傳遞到用戶的移動應用客戶端；在移動應用客戶端裏，WeexSDK 會準備好一個 JavaScript 引擎，並且在用戶打開一個 Weex 頁面時執行相應的 JS bundle，並在執行過程中產生各種命令發送到 native 端進行的界面渲染或數據存儲、網絡通信、調用設備功能、用戶交互響應等移動應用的場景實踐。
1、Weex 的 iOS 和 Android 客戶端中都會運行一個 JavaScript 引擎，來執行 JS bundle。
2、Weex向各端的渲染層發送規範化的指令，調度客戶端的native渲染和其它各種能力。
3、我們在 iOS 下選擇了 JavaScriptCore 內核，而在 Android 下選擇了 UC 提供的 v8 內核。
原理：
1、將XML+CSS+JavaScript代碼轉換爲JSBundle
2、JSBundle傳給JS Framework解析爲Json格式的Virtual DOM
3、客戶端通過接收Virtual DOM渲染界面
三、技術特點
1、一次實現，多端適用
使用Weex框架+ web開發語言和開發經驗開發應用，可構建 Android、iOS 和 Web 應用三端統一的應用。
2、支持的前端框架
Weex並不強依賴在特定的框架上使用，但官方推薦使用的是vue.js 和 Rax 前端框架，這倆種框架也是Weex 目前功能最全、最穩定的方案。在 WeexSDK v0.10.0 （發佈於 2016 年 2 月 17 日）以及後續的版本中，集成了 v2 版本的 Vue.js。
- Vue.js 是一個不斷進化中的前端框架。
- Rax 是提供類 React 語法和兼容性的前端框架。
3、調試工具
- 官方推薦使用Playground 來調試，預覽weex頁面，在 Playground 裏，你可以打開各種示例。
- 訪問 Weex online playground. 在這個網站上，你可以瀏覽、修改、新建各種基於 Vue.js 的單頁面例子，並用 WeexPlayground 應用掃碼查看實時效果。
- 同時weex 也提供了weex debug ，需要APP集成 weex sdk。weex debug 啓動步驟如下：
1、執行 weex debug 指令； 執行成功後會提示訪問URL、端口等。
2、訪問URL，會有一個debug 二維碼
3、使用繼承了weex sdk 的APP引用掃碼，鏈接APP和網頁，就可以在調試網頁。
4、weex debug 支持對單個文件進行調試， 通過 weex debug [folder | file] 命令進行編譯。
四、weex和 web的平臺差異
雖然使用weex框架可以實現web , android 、ios 三端統一，但是它與純web 開發有幾點很明顯的區別。
1、weex環境中沒有 DOM
weex的運行環境以原生應用爲主，在 Android 和 iOS 環境中渲染出來的是原生的組件，不是 DOM Element。
- 不支持 DOM 操作
原生環境中不支持 Web API，沒有 Element 、Event 、File 等對象。不支持選中元素，如 document.getElementById 、 document.querySelector 等；當然也不支持基於 DOM API 的程序庫（如 jQuery）。
- 有限的事件類型
Weex支持在標籤上綁定事件，和在瀏覽器中的寫法一樣，但是Weex 中的事件是由原生組件捕獲並觸發的，行爲和瀏覽器中有所不同，事件中的屬性也和 Web 中有差異。支持 Web 中的事件類型，詳情請參考《通用事件》。同時，不區分事件的捕獲階段和冒泡階段，相當於 DOM 0 級事件。
2、Weex環境中沒有BOM
BOM（Browser Object Model），即瀏覽器對象模型，是瀏覽器環境爲 javascript 提供的接口。Weex 在原生端並不基於瀏覽器運行，不支持瀏覽器提供的 BOM 接口。
- 沒有 window 、screen 對象
因爲沒有BOM ，所以不支持供瀏覽器中的window, screen對象，獲取設備的屏幕或環境信息，可以使用 WXEnvironment 變量。
| WXEnvironment | 備註 |
| weexVersion | WeexSDK 的版本 |
| appName | 應用的名稱 |
| appVersion | 應用的版本 |
| platform | 運行平臺，可能的值是 Web 、Android 、iOS 之一 |
| osName | 系統的名稱 |
| osVersion | 系統版本 |
| deviceWidth | 設備寬度 |
| deviceHeight | 設備高度 |
// 獲取屏幕高度
this.scrollHeight = (750 / weex.config.env.deviceWidth * weex.config.env.deviceHeight-140) ;
- 沒有doucment 對象
在瀏覽器中 document 表示了當前活動的文檔模型，在 Android 和 iOS 環境中並沒有這個對象，也不支持與其相關的 DOM 操作
- 沒有location，history，navigator 對象
Weex 也提供了 navigator 模塊來操作頁面的跳轉，使用方法參考《navigator 導航控制》
3、能夠調用移動設備原生 API
Weex 提供了clipboard 、 navigator 、storage等模塊來調用移動設備原生 API。同時，提供了橫向擴展的能力，可以擴展原生模塊，具體的擴展方法請參考《iOS 擴展》 和《Android 擴展》
參考資料