weex簡介
Weex 是一套簡單易用的跨平台開發方案,能以 web 的開發體驗構建高性能、可擴展的 native 應用,為了做到這些,Weex 與 Vue 合作,使用 Vue 作為上層框架,並遵循 W3C 標准實現了統一的 JSEngine 和 DOM API,這樣一來,你甚至可以使用其他框架驅動 Weex,打造三端一致的 native 應用。
Hello World
嘗試 Weex 最簡單的方法是使用 Playground App 和在 dotWe 編寫一個 Hello World 例子。你不需要考慮安裝開發環境或編寫 native 代碼,只需要做下面兩件事:
- 為你的手機安裝 Playground App,當然,Weex 是跨平台的框架,你依然可以使用瀏覽器進行預覽,只是這樣你就無法感受到 native 優秀的體驗了。
- 在新標簽頁中打開 Hello World 例子,點擊預覽,然后用 Playground 掃碼即可。
在這個例子中,我們看到了熟悉的 HTML 語義化標簽、CSS 樣式和 Javascript 代碼。這是一個最簡單的 Weex 示例,它在頁面中渲染了一個 “Hello World”。請注意,這不是一個 H5 頁面,而是 native 的。
發生了什么?
就如示例代碼所示:
<template> <div> <text class="text">{{text}}</text> </div> </template> <style> .text { font-size: 50; } </style> <script> export default { data () { return { text: 'Hello World.' } } } </script>
你可以試着修改Hello World示例如果你有以前的知識構建VueJS的例子,然后生成一個新的二維碼掃描。如果你沒有以前的VueJS知識,別擔心,這個指南教你。此外,你可以學習(VueJS指南)(https://vuejs.org/v2/guide)。它太容易了,對吧?看一下語法,這就是vue。
工作原理
Updated time: 14/06/2017
整體架構
Weex 表面上是一個客戶端技術,但實際上它串聯起了從本地開發環境到雲端部署和分發的整個鏈路。開發者首先可以在本地像撰寫 web 頁面一樣撰寫一個 app 的頁面,然后編譯成一段 JavaScript 代碼,形成 Weex 的一個 JS bundle;在雲端,開發者可以把生成的 JS bundle 部署上去,然后通過網絡請求或預下發的方式傳遞到用戶的移動應用客戶端;在移動應用客戶端里,WeexSDK 會准備好一個 JavaScript 引擎,並且在用戶打開一個 Weex 頁面時執行相應的 JS bundle,並在執行過程中產生各種命令發送到 native 端進行的界面渲染或數據存儲、網絡通信、調用設備功能、用戶交互響應等移動應用的場景實踐;同時,如果用戶沒有安裝移動應用,他仍然可以在瀏覽器里打開一個相同的 web 頁面,這個頁面是使用相同的頁面源代碼,通過瀏覽器里的 JavaScript 引擎運行起來的。
本地開發環境
Weex 的本地開發環境基於 web 開發體驗而設計,web 開發者可以通過自己熟悉的 HTML/CSS/JavaScript 技術和語法實現移動應用的界面。同時 Weex 也對 Vue.js 這一非常優秀的前端框架做了官方的支持。
除此之外,Weex 的工程設計也是 web 開發者非常熟悉的,首先 web 開發者可以使用自己熟悉的 npm 進行依賴管理;其次 web 開發者在通過項目腳手架初始化工程、開發、調試、質量控制等各個環節,都可以參考 web 開發已有的最佳實踐。
和如今 web 開發的最佳實踐一樣,Weex 會把一個頁面的源代碼全部編譯打包成一個 JS bundle,在瀏覽器中,我們需要把這個 JS bundle 作為一段 <script>
載入網頁,在客戶端里,我們把這段 JS bundle 載入本地,並通過 WeexSDK 直接執行。
雲端部署和分發
Weex 的 JS bundle 可以作為 web 開發中的一段靜態資源進行部署和下發。幾乎可以復用 HTML5 所有的工程體系和最佳實踐。比如在本地開發環境通過部署工具將 JS bundle 部署到 CDN、通過 CMS 或搭建平台把業務數據和模塊化的前端組件自動化拼接生成 JS bundle、通過服務端 JS bundle 的流量和日志統計頁面的訪問情況、通過 AppCache 或類似的方式對 JS bundle 在客戶端進行緩存或預加載以降低網絡通信的成本等。
客戶端 JavaScript 引擎
Weex 的 iOS 和 Android 客戶端中都會運行一個 JavaScript 引擎,來執行 JS bundle,同時向各端的渲染層發送規范化的指令,調度客戶端的渲染和其它各種能力。我們在 iOS 下選擇了 JavaScriptCore 內核,而在 Android 下選擇了 UC 提供的 v8 內核。無論是從性能還是穩定性方面都提供了強有力的保障。
為了讓整個移動應用的資源利用得更好,我們在客戶端提供的 JavaScript 引擎是單例的,即所有 JS bundle 公用一個 JavaScript 內核實例,同時對每個 JS bundle 在運行時進行了上下文的隔離,使得每個 JS bundle 都能夠高效安全的工作。我們還把 Vue 2.0 這樣的 JS Framework 做了預置,開發者不必把 JS Framework 打包在每個 JS bundle 里,從而大大減少了 JS bundle 的體積,也就進一步保障了頁面打開的速度。
客戶端渲染層
Weex 目前提供了 iOS 和 Android 兩個客戶端的 native 渲染層。每個端都基於 DOM 模型設計並實現了標准的界面渲染接口供 JavaScript 引擎調用。並且結合 web 標准和 native 的特點和優勢實現了一套統一的組件和模塊。Weex 在性能方面的表現也是非常優異的,尤其是界面首屏加載時間、native 下長列表的資源開銷和復用情況、CPU、內存、幀率 等關鍵指標。當然,盡管 Weex 官方已經提供了一組開發者最常用的組件和模塊,但面對豐富多樣的移動應用研發需求,團隊也難免會力不從心,為此我們提供了靈活自由的橫向擴展能力,開發者可以根據自身的情況定制屬於自己的客戶端組件和模塊,進一步豐富 Weex 在客戶端上的能力。
瀏覽器渲染
Weex 除了提供 iOS 和 Android 的客戶端渲染層之外,還基於 Vue 2.0 對官方的所有組件和模塊進行了封裝,開發者可以基於 Vue 2.0 用同一套源代碼構建出在瀏覽器中相同效果的頁面。並且同樣可以橫向擴展。