Weex從入門到超神（一）

leonlei發表於2017-12-19

Weex從入門到超神（一）

隨著移動端發展進入白熱化階段，很多中小型公司越來越注重於APP的更新迭代速度。加上去年微信小程式的問世，前端同學似乎迎來了“第二春”，越來越多的 Native 開發者感受到了前所未有的壓力，人家已經打到家門口了，難道就這樣兩眼旁觀嗎？

兩年前 Facebook 團隊釋出了一個全新的移動端和前端無縫銜接的框架 React Native，很明顯是用 React 開發的，支援在 Native 上執行的這麼一個玩意，這相對於蘋果漫長的稽核機制的確是一個福音。可是 React 的學習曲線比較陡，網上大部分教程的性質都是 “React Native 從入門到放棄”，RN雖好，但是對於大多數移動開發者來說學習成本過高。

去年阿里巴巴開源了一個類似 RN 的框架 Weex ，雖然面世才一年多，已經收穫了廣泛的關注，今年 Weex 已經被納入 Apache 基金會的孵化專案。

Weex從入門到超神（一）

為什麼選擇 Weex

轉載請註明出處：來自LeonLei的部落格http://www.gaoshilei.com

作為 Native 開發者，我們很清楚 Native 走到今天所面臨的困境，相較於前端比較呆板不夠靈活，任何改動都需要重新打包提交稽核然後釋出版本，這個週期最短也要1~2天的時間，一直有人在說要用 H5 替代 Native ,這不是危言聳聽，移動端市場正在遭受著衝擊。

大部分中小型的網際網路公司都是小步快走的模式進行版本迭代，版本釋出的靈活性就顯得尤為重要，可能產品早上想的功能點晚上就要上線，Native 肯定是辦不到的，H5 這個時候就顯示出它的優勢了；但是 H5 有一個致命的缺點就是效能太差，使用者體驗遠達不到 Native 帶來的那種絲滑流暢般的享受。所以這兩年，RN 和 Weex 悄然崛起就是為了解決這種矛盾。

不管是 RN 還是 Weex 都能做到實時修改頁面不需要 Native 發版，他們的原理都是一樣的，通過 js 來渲染 Native 介面。
Weex 在很大程度上借鑑了 RN 的思想和方式，對比一下 RN 和 Weex 的差異和優缺點：

優點

  • 由於 Weex 採用了 Vue 作為上層框架，相較於 React 更加輕量，Vue 的官網宣傳就是非常輕量，體積小巧，語法簡單。
  • Vue 的學習成本相較於 React 更加小，大部分 Native 開發者更容易上手。
  • Weex 吸收了 RN 的精華，可以說 Weex 是站在巨人的肩膀上問世。

缺點

  • Weex 相較於 RN 起步比較晚，社群沒有 RN 活躍。
  • 從問世的時間上來看，RN 具有更大的優勢，Weex 的學習資料比較少。
  • Weex 現在存在的 BUG 相較於 RN 還比較多，對於使用來說會有一些影響。

不管選擇 RN 還是 Weex ，我們的目的都是一樣：通過 js 語法渲染成 Native 的頁面，至於該選擇哪個，這就要結合自己公司的實際情況來選，沒有絕對的好與壞。
由於我們公司的 H5 專案是用 Vue 開發的，所以我們也就毫不猶豫的選擇了 Weex。

Weex從入門到超神（一）

可能大部分 Native 開發者看到這裡就要說一句：球都麻袋！Weex 都還搞明白怎麼又提到 Vue ，這是什麼鬼；Vue 是國人開發的一個 JS 框架，大家可以去官網看看，文件都是中文比較方便，這裡就不再贅述，有一點 H5 基礎都可以很快上手。Vue官網

Weex 專案結構

想必大多數 Native 開發者對於前端的知識還是匱乏的，雖然 Weex 官網有教程會教你怎麼安裝怎麼執行，大部分同學任然會卡在某一個步驟走不下去，所以基礎工作還是要做好，後面的路才會順暢。

首先給大家介紹 Node.js 和 npm ，剛開始接觸這個我也是懵逼的，這兩者之間有什麼關係？為什麼要安裝 Node.js ？ 搞懂這個關係後面對 weex 中結構理解會有很好的幫助，npm 是 Node.js 預設的包管理器，從 Node.js 0.6.3 開始，npm 整合到了 Node.js 的安裝包裡面，所以我們安裝 Node.js 的目的是使用 npm 來管理 weex 所用到的一些依賴庫。

至於怎麼安裝，可以參考 Weex 的官方教程

前端同學用到的 npm 有點類似我們用的 Cocopods 來管理第三方依賴庫，安裝 Cocopods 之前你必須安裝 ruby ，因為 Cocopods 依賴 ruby 才能執行， npm 也是一樣的道理，npm 依賴 Node.js 才能執行。

Weex 的檔案格式有兩種，分別是 .we 、.vue，可以很明顯的發現用 Vue 可以直接寫 Weex 頁面。筆者開始接觸 Weex 的時候也是直接學 Vue ,不僅可以用來寫 Weex 還可以寫寫其他 H5 頁面。 所以我建議學 Weex 直接看 Vue 就可以了。

Weex 的目錄結構


├── src  
├── node_modules 
├── dist
├── build
├── bin
├── package.json
├── webpack.config.js    
└── config.js   
       
複製程式碼

src

原始碼存放的位置，如.we .vue

node_modules

依賴庫的存放位置，類似於Xcode專案中的 Pods 資料夾。在 package.json 所在目錄執行 npm install 就會自動安裝好所有的依賴，有點像 pod install。

dist

存放編譯好的js檔案

build

存放npm build 時的 js 檔案，可在 package.json 檔案中配置

bin

存放一些 shell 指令碼，一般用不到

package.json

專案的配置和依賴庫檔案，有點類似 podfile 檔案

webpack.config.js

webpack 的配置檔案

config.js

專案的相關配置檔案，你可以在這個檔案中配置切換不同的環境

提到 webpack ，這個比較複雜，我們只需要知道 Weex 用 webpack 進行打包編譯就行了，當然也可以用其他工具來打包；感興趣的同學可以看一下 webpack 的官網。
當你執行 npm bulid 時，對應的是執行 package.json 中配置的 scripts: build 命令，src 資料夾中的檔案都會被編譯好並存放到 dist 資料夾中，這個路徑在 webpack.config.js 檔案中可以進行配置。npm run 後面跟的命令都是在 package.json 的 scripts 配置的。

轉載請註明出處：來自LeonLei的部落格http://www.gaoshilei.com

Weex 前端的專案目錄大概就是這樣，Weex 前端的原始碼不在這次的討論範圍之類，如果大家感興趣想看 Weex 前端的原始碼，在 node_modules 資料夾中就可以找到。關於 Weex SDK原始碼在後續文章中會進行深度解析。

Weex 執行原理

官方也給出了 Weex 的執行原理圖，順手牽羊拿了過來：

Weex從入門到超神（一）

不難發現，Weex 其實就是將 .vue 、.we 檔案編譯成 js 檔案，打包成所謂的 JS Bundle 放到 dist 資料夾中，然後將編譯好的 JS Bundle 部署到伺服器上，我們的 iOS、安卓、瀏覽器就可以訪問對應的 JS 然後由 SDK 渲染成 Native 的頁面，或者瀏覽器的核心渲染成 DOM 節點顯示。這裡有個坑要提一下：雖然說是三端統一的，實際開發中還是要做相容處理的。

本篇文章淺顯的介紹了 Weex 的應用背景和工作原理，下篇文章將深入分析 Weex 的實現原理。

Weex從入門到超神（二）

相關文章