Weex系列(3) —— 單頁面仍是多頁面

目錄

• Weex系列(序) —— 總要知道原生的一點東東(iOS)
• Weex系列(序) —— 總要知道原生的一點東東(Android)
• Weex系列(1) —— Hello World項目
• Weex系列(2) —— 頁面跳轉和通訊
• Weex系列(3) —— 單頁面仍是多頁面
• [Weex系列(4) —— 老生常談的三端統一]
• [Weex系列(5) —— 封裝原生組件和模塊]
• [Weex系列(6) —— css相關小結]
• [Weex系列(7) —— web組件和webview]
• [Weex系列(8) —— 是時候簡析一下流程原理了]
• [Weex系列(9) —— 踩坑填坑的集錦]
• [Weex系列(10) —— 先這麼多吧想到再寫。。。]

時間老是過得那麼快，一週又過去了。天愈來愈冷了，感受跟要冬眠似的，愈來愈懶得動腦了，哈哈哈，下面開始進入咱們的主題吧。

單頁面應用

單頁面應用（single page web application，SPA），你們應該很熟悉了，如今好多頁面都採用的是這種模式，優缺點網上一搜一籮筐，支持的框架也有不少，react全家桶、vue全家桶等。

Weex的上層語言有vue，因此咱們是否是也能夠用vue全家桶來打造一個App，官網的回答是能夠的。

用weex腳手架初始化項目，選項vue-router後面居然跟了一個(not recommended)不推薦的。

demo以下圖，這個例子很簡單，就不上傳代碼了，其實官網有一個很典型的例子weex-hackernews(https://github.com/weexteam/w...，用了vuex和vue-router，感受入了weex這個坑的（doge），應該都看過研究過這個例子吧。官網有一個 使用 Vuex 和 vue-router ，你們也能夠點進去看一下。

而後咱們來簡單分析一下吧

一個bundlejs

上面的例子，雖然有三個tab，還有一個page3，感受好多頁面的樣子，像web同樣，最後打包只有一個js，是否是感受到一絲不對的氣息，是啊，這麼一個大的app就這麼一個js。

一、首次打開白屏時間長
二、不能按需加載對應頁面js
三、整個app使用相同的執行環境，隱患不少等

通常app都是越作越大，越作越複雜，想一想是否是有點可怕呢。
因此官網也是引導咱們集成Weex到已有的app。

多頁面應用

其實原生app本就是多頁面的場景，比如瀏覽器能夠開不少窗口，上面那個例子就只是在一個窗口裏來回折騰。
說了這麼多，那上面那個例子的底部tab一、二、3怎麼實現呢，對，這就是多頁面的成本，應該有好多跟咱們同樣，徹底用Weex開發出一個從無到有的app，考慮了不少，底部這塊咱們仍是決定用原生去作，這塊咱們是找了原生開發同窗去作了一些支持的，這塊聽說是原生開發很基礎很基礎的一部分，大概半天就能搞定，但是後續的擴展性、性能優化、延展性等就好說多了，下面僅提供咱們這邊的一個思路。

• iOS: UITabBarController + UIViewController 把tab一、二、3.js的路徑分別賦值給UIViewController，以前也有分析過WXDemoViewController你們能夠去看看。

UIViewController * weexVC = [[WXDemoViewController alloc] init];((WXDemoViewController *)weexVC).url = url;

• Android: 這個用的是Fragment，網上搜weex Fragment，會出來好多有參考價值的文章，你們能夠去了解一下，我就不截圖了，怕有版權之類的。

navigator

感受這個詞在我前面的文章裏也是屢次出現過了。是啊，底部tab1對應tab1.js渲染完頁面，怎麼進去到相應的page.js呢，就是我上一篇講的了，用的基本就是navigator了，並且在page.js對應的頁面，咱們也是可使用vue-router的。

這個固然是用原生的模塊組件封裝的，有興趣的能夠看看WXNavigatorModule.m這個文件，因此頁面的進退、切換等效果也都是極佳的，我的感受徹底超過單頁面應用。

小結

讀完文章的不難發現，個人觀點就是偏向於多頁面應用。各有所需，你們徹底能夠根據本身的場景來選擇，若是你的app頁面很少、輕量等，徹底也是能夠用單頁面模式的。

最後若是你們有一點點喜歡，對你有一點點的幫助，歡迎點贊收藏啊。