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

系列文章的目錄在 ? 這裏

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

不過，首先要明確的是，使用 Weex 寫出來的是原生應用，頁面的概念還和 Web 上同樣嗎？

Weex 裏「頁面」的概念

寫的有些亂，與下邊內容關係不太，不理解能夠忽略。

Weex 的實例在 Web 上是和「瀏覽器頁籤」的概念相對應的，一般一個 Weex 實例就是一個「頁面」。

在 Web 上，只要沒有新開頁籤，網頁中的各類跳轉，都是記錄在 History 對象中的，對於 Weex 而言，這些都至關與在一個「頁面」以內。在 Native 上，頁面的跳轉是記錄在 Navigator 中的，內部也有一個棧來存儲跳轉記錄，能夠 push 、 pop。

要想在原生頁面之間（Weex 多實例之間）跳轉，可使用 navigator 模塊，也能夠看看 weex-router。

想深刻理解這方面的概念，還須要瞭解一些 Native 開發的知識。原生開發裏邊，頁面是個比較上層的概念，能夠來回切換和銷燬，在背後還有生命週期更長程序在運行，Weex Runtime 就運行在這一層裏，多個 Weex 的實例會共用一個 Runtime。

由於 vue-router 的設計和實現都是在同一個頁面內的，是 SPA 概念裏的產物。其實前端路由也是基於 SPA 產生的概念，在 Weex 或者原生應用這種多頁跳轉的場景裏可能並不合適，慎重使用。雖然 weex-hackernews 項目裏用了 vue-router ，可是依然在同一個 Weex 實例中。相關話題我在 《使用 vue-router》這篇文章裏詳細再說。

編寫入口文件

以 weex-hackernews 爲例，看 webpack.config.js 中的配置，src/entry.js 就是入口文件。項目代碼中由於用了 Vuex 和 vue-router，入口文件還有點長，其實只須要引入口組件，配置掛載點，而後初始化 Vue 實例就好了。

import Vue from 'vue'
import App from './App.vue'

// 將 App 組件掛載到 #root 之上，生成的 DOM 節點會替換 #root 標籤
App.el = '#root'

// 建立 Vue 實例
new Vue(App)

這還要求你在 Web 入口 HTML 文件裏手動寫上 #root 的標籤：

<div id="root"></div>

至於 Android 和 iOS 平臺，只要指定了 el 屬性便可，屬性值就無所謂了，Weex 會默認將其掛載到容器根視圖中（可由 Native 端配置）。

使用單文件組件

在配置好入口文件以後，就能夠開始寫組件了，推薦寫單文件組件，也就是 .vue 文件。語法就再也不重複介紹，官方文檔中寫得很詳細，能支持 ES6+，甚至能夠配置 TypeScript 、Sass 、Stylus 、PostCSS 、Jade 等語法。

須要注意的是，針對 Web 平臺，依然使用 Webpack + vue-loader 的方式編譯 .vue 文件，可是針對 Android 和 iOS 平臺，你必須使用 Webpack + weex-loader 才能夠。也就是說，針對 Web 和 Native 平臺要分別生成兩份不一樣的 js bundle，具體的配置參考 webpack.config.js。

只使用 Vue Runtime 的功能

Weex 已經將 Vue Runtime 的代碼整合進了 SDK 中，Vue 中支持的語法特性也能用在 Weex 中。注意，是 Vue Runtime (運行時構建)。若是你下載過 Vue 2.0 對外發布的版本，應該能發現除了區分產品版和開發版，既區分 「Standalone」 版本和 「Runtime-only」 版本，具體的差別能夠看官方安裝指南（其實有些名詞不太好翻譯，看英文原版文檔或許能理解得更準確一些）。

簡單來講，Vue 在 Weex 中使用的是「預編譯」模式，只保留了運行時，不支持實時編譯模板。簡單來講，就是不支持下邊幾個特性：

• 定義組件時不支持使用 template 屬性。

• 不支持使用 x-templates。

• 不支持使用 Vue.compile。

如何作到跨平臺？

寫代碼的過程和寫其餘 Vue 2.0 項目是同樣的，沒什麼可說的。可是既然說了是寫原生應用，就要注意跨平臺的問題，雖然 Weex 抹平了不少差別，可是平臺差別是客觀存在的。Web 和 Android 和 iOS 畢竟都不相同，想寫跨平臺的應用，瞭解平臺差別仍是頗有必要的。

瞭解平臺差別

推薦閱讀官方文檔：

• 《Weex 和 Web 平臺的差別》

大概摘錄一下是這樣的：

• Weex 環境中沒有 DOM

  • 不支持 DOM 操做，原平生臺沒有 DOM 概念。

  • 並不支持 Web 中全部的事件類型，詳情請參考《通用事件》。

  • 不區分事件的捕獲階段和冒泡階段，至關於 DOM 0 級事件。

• Weex 環境中沒有 BOM

  • 沒有 window 、screen 對象，能夠經過 WXEnvironment 獲取設備環境信息。

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

  • 沒有 history 、location 、navigator 對象，有 navigator 模塊。

• 可以調用移動設備原生 API

  • 能夠經過模塊調用設備原生 API，如 clipboard 、 navigator 、storage 等。

使用通用組件

爲了保證三端可用，不能使用瀏覽器提供的標籤，只能用 Weex 提供的標籤（組件）。若是你寫了 <figure> 或者 <menu> 這類組件，在 Web 端能夠看到效果，可是在客戶端上渲染效果是不肯定的。並且，客戶端上沒有 SEO 和語義化的需求，HTML5 中的大多數標籤均可以經過別名實現（參考 weex-component-alias）。

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

• Weex 支持的組件列表

使用通用樣式

CSS 的屬性特別多，寫法也特別多，能力很強大，也有不少坑。一方面新標準在不斷的提出，像 CSS Grid 和 Houdini 這些概念也逐漸受到關注；另外一方面舊標準是很難再廢除的，新舊語法總能摩擦出各類奇葩的行爲，CSS 也是容易滋生「奇技淫巧」的地方，也有各類關於「最佳實踐」的話題，不少人樂於此道。瀏覽器內部爲了處理這些邊界狀況確定用了大量「特殊技巧」。

然而在實際使用中，絕大多數的網頁只用了其中不多一部分屬性（參考 Global CSS property usage）。Weex 是由 Native 平臺解析的樣式，Android 和 iOS 自己並不支持 CSS ，全部解析都是原生渲染器實時計算的，因此必然要再性能和可用性之間作平衡。既然不能支持、也不打算支持全部 CSS 特性，那就必然要分清主次，優先支持經常使用樣式。

Weex 對 CSS 樣式的支持狀況，能夠參考這篇文檔。簡單歸納下邊幾點：

• 支持基本的盒模型。

• 支持 position 定位佈局。

• 支持使用 flexbox 佈局。

• 使用限制

  • 只支持單個類名選擇器，不支持關係選擇器，也不支持屬性選擇器。

  • 默認是組件級別的做用域，沒有全局樣式。

  • 不支持樣式繼承（由於有做用域隔離）。

  • 考慮到樣式的數據綁定，樣式屬性暫不支持簡寫。