Weex 簡介

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 用同一套源代碼構建出在瀏覽器中相同效果的頁面。而且一樣能夠橫向擴展。