深刻Weex系列（一）之Weex入門準備

時間 2019-11-16

標籤深刻 weex 系列入門準備简体版

原文原文鏈接

1、A New Start

在上一個系列文章中咱們說到大前端必定是能夠預見到的將來的趨勢之一，那麼從本篇文章中我將開啓一個新的系列，從入門到深刻，一步步走近大前端的核心腹地。計劃本系列文章包含如下內容：html

Weex入門準備，包含學習資料、學習途徑等；
Weex項目實踐，使用Weex開發一個原生的界面；
Weex源碼分析系列；
Weex的本地接入封裝；
針對Weex不夠高的地方進行源碼修改。

2、Why is Weex？

這個章節原本是想忽略的，由於說Weex那確定繞不開ReactNative，而這個章節也極易引發口水；可是不寫總以爲技術選型沒有作到位。所以我就簡單說幾句：技術選型與團隊規模、團隊成員技術偏好、技術穩定性、易用性等方面息息相關，沒有最正確的選型，只有最合適的選型。引入一項新技術的初衷是爲了解放生產力、跟進新技術，而不是爲了趟坑自虐。錯誤的技術選型（例如一個小團隊卻選擇了一個須要持續維護的技術方向）不只不會提高生產力，反而會下降生產力、傷害團隊成員的技術熱情。前端

3、What is Weex？

Weex 是一套簡單易用的跨平臺開發方案，能以 web 的開發體驗構建高性能、可擴展的 native 應用，爲了作到這些，Weex 與 Vue 合做，使用 Vue 做爲上層框架，並遵循 W3C 標準實現了統一的 JSEngine 和 DOM API，這樣一來，你甚至可使用其餘框架驅動 Weex，打造三端一致的 native 應用。vue

從Weex官網介紹咱們能夠看出幾個關鍵詞：跨平臺、高性能、Vue、W3C標準、三端一致；以上關鍵詞咱們會在逐漸的深刻了解過程當中逐步體會到。web

放一張Weex總體架構圖：能夠參考下面備註。
apache

Weex 表面上是一個客戶端技術，但實際上它串聯起了從本地開發環境到雲端部署和分發的整個鏈路。開發者首先能夠在本地像撰寫 web 頁面同樣撰寫一個 app 的頁面（Weex File），而後編譯成一段 JavaScript 代碼（transformer），造成 Weex 的一個 JS bundle；在雲端，開發者能夠把生成的 JS bundle 部署上去（deploy），而後經過網絡請求或預下發的方式傳遞到用戶的移動應用客戶端（Server————>JS FrameWork）；在移動應用客戶端裏，WeexSDK 會準備好一個 JavaScript 引擎（JSCore、V8），而且在用戶打開一個 Weex 頁面時執行相應的 JS bundle，並在執行過程當中產生各類命令發送到 native 端進行的界面渲染或數據存儲、網絡通訊、調用設備功能、用戶交互響應等移動應用的場景實踐（callJs、callNative）；同時，若是用戶沒有安裝移動應用，他仍然能夠在瀏覽器裏打開一個相同的 web 頁面，這個頁面是使用相同的頁面源代碼，經過瀏覽器裏的 JavaScript 引擎運行起來的。瀏覽器

看起來是否是還有點抽象，那好人話來了！見下圖，忽略掉Weex FrameWork與Native的交互，能夠參考理解爲咱們發佈新版本Apk的過程。
微信

4、Quick Start

體驗Weex的Demo能夠參考快速上手；weex

在dotWe編寫或者粘貼Demo中的代碼實時預覽；
下載Weex專門的一個 Playground App掃描網頁右邊的二維碼。

5、DevTools

Weex開發環境的搭建並不複雜，能夠參考搭建開發環境章節。此處主要推薦下Weex的開發使用工具：網絡

Sublime架構
- 安裝、破解能夠參考《mac sublime3 破解版的安裝、插件管理和配置》；
- 安裝的一些插件：Emmet、HTML-CSS-JS Prettify、Vue Syntax Highlight、VueJs Snippets等。
WebStrom
- 安裝、破解能夠參考《Webstorm 2017 MAC版本----------下載及破解碼》；
- 對Vue進行設置，參考《關於webstorm 對 vue的設置》；
- 添加weex的插件，在plugin中搜索weex，而且設置對vue的支持。