Weex 是什麼java
Weex is a extendable cross-platform solution for dynamic programming and publishing projects.
Weex是針對動態編程和發佈項目的一個可擴展、跨平臺的解決方案。node
這是來自Weex Document的介紹。這句話我的感受仍是很是有誘惑力的。爲何？擊中移動端開發兩個痛點。android
動態編程＋發佈。Weex能作到隨時編程發佈到服務端，應用端即時更新。想一想之前，應用開發－測試－發佈，多麼繁瑣和耗時的一個流程，萬一線上出了bug，那真是痛不欲生，尤爲時用戶量上百萬千萬的應用，老闆連殺你的心都有。可是有了Weex就不同了。修復bug，用戶都是無感知的（老闆也是無感知的，哈哈哈）。git
跨平臺。這是移動端無數人嚮往的和爲之努力的事。一處編寫，處處運行。Weex支持Android，iOS，Web三大平臺，一份代碼，三個平臺通用。等到有一天，Weex真的發展強大起來，公司成本估計能夠節省很多。會不會一個Weex開發人員拿三份工資呢？（估計是我想太多😂）github
github地址:[https://github.com/alibaba/weex(https://github.com/alibaba/weex)chrome
Meet weexnpm
Install Weex Playground App to see examples we already written.編程
If you want to write a demo, install weex-toolkit in Node.js 4.0+ andjson
Run weex init to generate & start a simple project in an empty folder.瀏覽器
Follow the instructions in the project README.
Enjoy it.
安裝Playground.apk到手機端，若是你想寫一個demo，安裝weex-toolkit在Node.js 4.0+環境的基礎上，用weex生成並啓動一個簡單的工程在一個文件夾中。詳情請查看README
For android
Prerequisites
Install Node.js 4.0+
Under project root
-- npm install, install project
-- ./startInstall Android Environment
Run playground, In Android Studio
Open android/playground
In app/java/com.alibaba.weex/IndexActivity, modify CURRENT_IP to your local IP
Click (Run button)Add an example
綜上所述，首先須要安裝node.js4.0+環境。而後安裝weex-toolkit工具生成.we文件，使用Playground.apk進行掃一掃安裝到手機端進行調試。
也能夠使用weex-devtools(android)使用chrome瀏覽器進行調試
官方中文版本環境搭建及demo運行Weex快速上手教程(Weex Tutorial)
weex啓動及界面渲染流程圖
初始化過程
初始化過程png
啓動調用過程
啓動調用過程.png
效果果真達到了write once，run everywhere！並且運行效果能夠與原聲媲美，而且virtual dom的加入更加優化了性能問題，切對native擴展等提供了很好的預留，目前能夠採用組件形式與全頁形式進行集成。
初始化操做
1. BaseApplication 初始化SDK 引擎WXSDKEngine.init(this, null, null, new ImageAdapter(), null);
WXSDKEngine初始化了三件事：
一、初始化so庫文件，渲染邏輯、腳本業務框架等都封裝在了這裏；
二、初始化initScriptsFramework ： 初始化腳本框架；
三、register 操做，初始化weex組件與module；private void renderWX() {
Rect outRect = new Rect();
getWindow().getDecorView().getWindowVisibleDisplayFrame(outRect);
if (instance != null) {
instance.destroy();
instance = null;
}
instance = new WXSDKInstance(this);
instance.registerRenderListener(this);
Map<String, Object> options = new HashMap<>();
options.put("bundleUrl", WEEX_INDEX_URL);
instance.renderByUrl(TAG, WEEX_INDEX_URL, options, null, ScreenUtil.getDisplayWidth(this),
ScreenUtil.getDisplayHeight(this), WXRenderStrategy.APPEND_ASYNC);
}
首先看這個方法，能夠在activity oncreate中被調用，能夠清楚的看到，註冊了渲染監聽器，以及傳入了當前屏幕的寬高及url，能夠猜想weex的適配方案採用的是百分比方案。
2. WXSDKInstance
renderByUrl 方法內調用了httpadapter進行加載url，而且拼裝了user-agent header參數；
3. DefaultWXHttpAdapter
網絡處理 其實就是一個封裝的簡單的網絡請求工具類，把請求下來的json數據回調給WXSDKInstance
4. WXSDKInstance render 方法進行view的建立初始化
5. WXSDKManager createInstance
一、將json數據與instanceId添加到renderManager中；
二、使用bridge橋接管理器進行UI繪製；
6. WXBridge 做用： execJS 調用 so庫方法執行JS腳本，進行UI渲染；
最後提供與React Native的比較：
挺好的問題：
DSL 語法差別很大，可能 weex 更輕量一些，上手快一些；
Native 性能 weex 仍是有一些優點的，包也更小。
weex平臺一致化看起來比較牛掰，，，，，
本文分享自微信公衆號 - 喘口仙氣（gh_db8538619cdd）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。