使用 Vue 開發 Weex 頁面

Vue & Weex 介紹

Vue.js 是 Evan You 開發的漸進式 JavaScript 框架，在易用性、靈活性和性能等方面都很是優秀。開發者可以經過撰寫 *.vue 文件，基於 <template>, <style>, <script> 快速構建組件化的 web 應用。

Vue.js 在 2016 年 10 月正式發佈了 2.0 版本，該版本加入了 Virtual-DOM 和預編譯器的設計，使得該框架在運行時可以脫離 HTML 和 CSS 解析，只依賴 JavaScript；同時 Virtual-DOM 也使得 Vue 2.x 渲染成原生 UI 成爲了可能。

Weex 是一套簡單易用的跨平臺開發方案，能以 Web 的開發體驗構建高性能、可擴展的原生應用。 Weex 與 Vue 有官方合做，支持將 Vue 2.x 做爲內置的前端框架，Vue 也藉此具有了開發原生應用的能力。

嚐鮮體驗

開始以前，但願你能對 Weex 和 Vue 有基本的瞭解，推薦閱讀 Weex Tutorial 和 Vue Introduction 瞭解更多信息。

快速建立項目

Weex 官方提供了 weex-toolkit 的腳手架工具來輔助開發和調試。

首先安裝 weex-toolkit 工具：

npm install weex-toolkit@beta -g

注：目前 weex-toolkit 僅在 beta 版中才支持初始化 Vue 項目，使用前請確認版本是否正確。

而後初始化 Weex 項目：

weex init awesome-project

執行完命令後，在 awesome-project 目錄中就建立了一個使用 Weex 和 Vue 的模板項目，生成的項目功能和用法能夠參考其 package.json 和 README 。

編寫代碼

在建立了項目而且配置好了開發環境以後，咱們就能夠開始寫代碼了。

雖然開發的是原生應用，可是代碼寫起來和 Web 中並沒什麼不同。你能夠選擇本身喜歡的前端開發環境、能夠寫 .vue 文件、也能夠直接寫 javascript 文件、可使用 ES6+ 、可使用發佈在 npm 上的模塊、能夠擴展 Weex 的組件或者模塊。

注意事項

Vue.js 最初是爲 Web 設計的，雖然能夠基於 Weex 開發移動應用，可是 Web 開發和原生開發畢竟不一樣，在功能和開發體驗上都有一些差別，這些差別從本質上講是原生開發平臺和 Web 平臺之間的差別，Weex 正在努力縮小這個差別的範圍。

參考文章《Vue 2.x 在 Weex 和 Web 中的差別》瞭解存在差別的緣由和細節。

使用其餘工具庫

Vue.js 也有較多周邊技術產品，如 Vuex 和 vue-router 等，這些庫也能夠在 Weex 中很好的工做。

關於 Vuex 和 vue-louter 的使用方法，能夠參考《在 Weex 項目中使用 Vuex 和 vue-router》。

咱們基於 Weex 和 Vue 開發了一個的完整項目 weex-hackernews ，引入了包含 Vue 2.x 的 WeexSDK，建立了三端的項目和基本的編譯配置。在項目中使用了 Vuex 和 vue-router ，可以實現同一份代碼，在 iOS、Android、Web 下都能完整地工做。

擴展 Weex

Weex 內置了一些通用的組件和模塊，能夠知足基本上使用需求。爲了控制 SDK 的體積和保持框架的通用性，咱們會謹慎地選擇內置的組件和模塊，並不會一應俱全將全部功能都封裝進 SDK。不過咱們提供了額外的組件市場，在其中將能找到知足不一樣需求、各式各樣的組件和模塊，此外 Weex 也具有橫向擴展的能力，開發者能夠自行定製和擴展 Weex 組件和模塊。

Weex 的底層設計比較靈活，除了組件和模塊之外，開發者甚至能夠定製 Weex 內置的前端框架，Vue 2.x 就是一個成功的例子。

能夠閱讀如下文檔瞭解更多信息：

• 《iOS 擴展》
• 《Android 擴展》
• 《HTML5 擴展》
• 《定製本身的 JS Framework》

Vue 2.x 在 Weex 中的特點功能

我想，你必定對 Vue 爲何能渲染成原生頁面 、Weex 爲何能將內核切換成 Vue 心存好奇。若是你對這些細節感興趣，能夠閱讀這篇文章 《how it works》。

流式渲染

在 Weex 中，咱們能夠經過 <foo append="tree|node"> 的方式定義頁面首次渲染時的渲染顆粒度，這讓開發者有機會根據界面的複雜度和業務需求對首次渲染過程進行定製。append="tree" 表示整個結點包括其全部子結點所有生成完畢以後，纔會一次性渲染到界面上；而 append="node" 則表示該結點會先渲染在界面上做爲一個容器，其子結點會稍後作進一步渲染。

表單控件綁定

在 Weex 中，咱們針對 <input> 和 <textarea> 這兩個表單控件提供了和 web 體驗相同的 v-model 指令。經過 <input v-model="message"> 或 <textarea v-model="message">，開發者能夠把數據 message 的值自動展現在文本框上，同時用戶修改了文本框的值的時候，數據 message 會自動被更新。

多頁面上下文隔離

如 Weex 工做原理文中所述，全部 Weex 的 JS bundle 公用一個 JavaScript 內核實例。因此如何可以讓多個 JS bundle 中使用的 Vue 是徹底隔離的，而且其中一個頁面對 Vue 進行擴展或改寫不會影響到其它頁面就變成了一個問題，經過 Weex 和 Vue 雙方的協做，這一問題已經得以解決。你們能夠放心使用。

<transition> 過渡狀態

Weex 支持了 Vue 2.x 中經典的 <transition> 寫法，開發者能夠經過 <transition> 輕鬆定義一個界面在兩種狀態中的過渡方式。