【使用 Weex 和 Vue 開發原生應用】 2 編寫獨立頁面

在配置完開發環境之後，就可以開始寫應用了。在寫應用之前，肯定會先劃分好頁面，一個一個獨立着寫的。

不過，首先要明确的是，使用 weex 寫出來的是原生應用，頁面的概念還和 web 上一樣嗎？

寫的有些亂，與下邊内容關系不太，不了解可以忽略。

weex 的執行個體在 web 上是和“浏覽器頁簽”的概念相對應的，通常一個 weex 執行個體就是一個“頁面”。

在 web 上，隻要沒有新開頁簽，網頁中的各種跳轉，都是記錄在 <code>history</code> 對象中的，對于 weex 而言，這些都相當與在一個“頁面”之内。在 native 上，頁面的跳轉是記錄在 <code>navigator</code> 中的，内部也有一個棧來存儲跳轉記錄，可以 <code>push</code> 、 <code>pop</code>。

想深入了解這方面的概念，還需要了解一些 native 開發的知識。原生開發裡邊，頁面是個比較上層的概念，可以來回切換和銷毀，在背後還有生命周期更長程式在運作，weex runtime 就運作在這一層裡，多個 weex 的執行個體會共用一個 runtime。

因為 vue-router 的設計和實作都是在同一個頁面内的，是 spa 概念裡的産物。其實前端路由也是基于 spa 産生的概念，在 weex 或者原生應用這種多頁跳轉的場景裡可能并不合适，慎重使用。雖然 weex-hackernews 項目裡用了 vue-router ，但是依然在同一個 weex 執行個體中。相關話題我在 《使用 vue-router》這篇文章裡詳細再說。

這還要求你在 web 入口 html 檔案裡手動寫上 <code>#root</code> 的标簽：

至于 android 和 ios 平台，隻要指定了 <code>el</code> 屬性即可，屬性值就無所謂了，weex 會預設将其挂載到容器根視圖中（可由 native 端配置）。

簡單來說，vue 在 weex 中使用的是“預編譯”模式，隻保留了運作時，不支援實時編譯模闆。簡單來說，就是不支援下邊幾個特性：

定義元件時不支援使用 <code>template</code> 屬性。

不支援使用 <code>x-templates</code>。

不支援使用 <code>vue.compile</code>。

寫代碼的過程和寫其他 vue 2.0 項目是一樣的，沒什麼可說的。但是既然說了是寫原生應用，就要注意跨平台的問題，雖然 weex 抹平了很多差異，但是平台差異是客觀存在的。web 和 android 和 ios 畢竟都不相同，想寫跨平台的應用，了解平台差異還是很有必要的。

推薦閱讀官方文檔：

<a href="http://weex.apache.org/cn/references/platform-difference.html">《weex 和 web 平台的差異》</a>

大概摘錄一下是這樣的：

weex 環境中沒有 dom

不支援 dom 操作，原生平台沒有 dom 概念。

不區分事件的捕獲階段和冒泡階段，相當于 dom 0 級事件。

weex 環境中沒有 bom

沒有 window 、screen 對象，可以通過 <code>wxenvironment</code> 擷取裝置環境資訊。

沒有 document 對象，沒有選擇器方法。

能夠調用移動裝置原生 api

可以通過子產品調用裝置原生 api，如 clipboard 、 navigator 、storage 等。

具體元件的使用方法參考官方文檔。

<a href="http://weex.apache.org/cn/references/components/index.html">weex 支援的元件清單</a>

css 的屬性特别多，寫法也特别多，能力很強大，也有很多坑。一方面新标準在不斷的提出，像 css grid 和 houdini 這些概念也逐漸受到關注；另一方面舊标準是很難再廢除的，新舊文法總能摩擦出各種奇葩的行為，css 也是容易滋生“奇技淫巧”的地方，也有各種關于“最佳實踐”的話題，很多人樂于此道。浏覽器内部為了處理這些邊界情況肯定用了大量“特殊技巧”。

支援基本的盒模型。

支援 <code>position</code> 定位布局。

支援使用 <code>flexbox</code> 布局。

使用限制

隻支援單個類名選擇器，不支援關系選擇器，也不支援屬性選擇器。

預設是元件級别的作用域，沒有全局樣式。

不支援樣式繼承（因為有作用域隔離）。

考慮到樣式的資料綁定，樣式屬性暫不支援簡寫。