目錄
- 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。
1、首次打開白屏時間長
2、不能按需加載對應頁面js
3、整個app使用相同的執行環境，隱患很多等
一般app都是越做越大，越做越複雜，想想是不是有點可怕呢。
所以官網也是引導我們集成Weex到已有的app。
多頁面應用
其實原生app本就是多頁面的場景，好比瀏覽器可以開很多窗口，上面那個例子就只是在一個窗口裏來回折騰。
說了這麼多，那上面那個例子的底部tab1、2、3怎麼實現呢，對，這就是多頁面的成本，應該有好多跟我們一樣，完全用Weex開發出一個從無到有的app，考慮了很多，底部這塊我們還是決定用原生去做，這塊我們是找了原生開發同學去做了一些支持的，這塊據說是原生開發很基礎很基礎的一部分，大概半天就能搞定，可是後續的擴展性、性能優化、延展性等就好說多了，下面僅提供我們這邊的一個思路。
- iOS: UITabBarController + UIViewController 把tab1、2、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頁面不多、輕量等，完全也是可以用單頁面模式的。
最後如果大家有一點點喜歡，對你有一點點的幫助，歡迎點贊收藏啊。