資訊專欄INFORMATION COLUMN
目錄
Weex系列(序) —— 總要知道原生的一點(diǎn)東東(iOS)
Weex系列(序) —— 總要知道原生的一點(diǎn)東東(Android)
Weex系列(1) —— Hello World項(xiàng)目
Weex系列(2) —— 頁面跳轉(zhuǎn)和通信
Weex系列(3) —— 單頁面還是多頁面
[Weex系列(4) —— 老生常談的三端統(tǒng)一]
[Weex系列(5) —— 封裝原生組件和模塊]
[Weex系列(6) —— css相關(guān)小結(jié)]
[Weex系列(7) —— web組件和webview]
[Weex系列(8) —— 是時(shí)候簡析一下流程原理了]
[Weex系列(9) —— 踩坑填坑的集錦]
[Weex系列(10) —— 先這么多吧想到再寫。。。]
時(shí)間總是過得那么快，一周又過去了。天越來越冷了，感覺跟要冬眠似的，越來越懶得動(dòng)腦了，哈哈哈，下面開始進(jìn)入我們的主題吧。
單頁面應(yīng)用單頁面應(yīng)用（single page web application，SPA），大家應(yīng)該很熟悉了，現(xiàn)在好多頁面都采用的是這種模式，優(yōu)缺點(diǎn)網(wǎng)上一搜一籮筐，支持的框架也有很多，react全家桶、vue全家桶等。
Weex的上層語言有vue，所以我們是不是也可以用vue全家桶來打造一個(gè)App，官網(wǎng)的回答是可以的。
用weex腳手架初始化項(xiàng)目，選項(xiàng)vue-router后面竟然跟了一個(gè)(not recommended)不推薦的。
demo如下圖，這個(gè)例子很簡單，就不上傳代碼了，其實(shí)官網(wǎng)有一個(gè)很典型的例子weex-hackernews(https://github.com/weexteam/w...，用了vuex和vue-router，感覺入了weex這個(gè)坑的（doge），應(yīng)該都看過研究過這個(gè)例子吧。官網(wǎng)有一個(gè) 使用 Vuex 和 vue-router ，大家也可以點(diǎn)進(jìn)去看一下。
然后我們來簡單分析一下吧
一個(gè)bundlejs上面的例子，雖然有三個(gè)tab，還有一個(gè)page3，感覺好多頁面的樣子，像web一樣，最后打包只有一個(gè)js，是不是感覺到一絲不對(duì)的氣息，是啊，這么一個(gè)大的app就這么一個(gè)js。
1、首次打開白屏?xí)r間長
2、不能按需加載對(duì)應(yīng)頁面js
3、整個(gè)app使用相同的執(zhí)行環(huán)境，隱患很多等
一般app都是越做越大，越做越復(fù)雜，想想是不是有點(diǎn)可怕呢。
所以官網(wǎng)也是引導(dǎo)我們集成Weex到已有的app。
其實(shí)原生app本就是多頁面的場(chǎng)景，好比瀏覽器可以開很多窗口，上面那個(gè)例子就只是在一個(gè)窗口里來回折騰。
說了這么多，那上面那個(gè)例子的底部tab1、2、3怎么實(shí)現(xiàn)呢，對(duì)，這就是多頁面的成本，應(yīng)該有好多跟我們一樣，完全用Weex開發(fā)出一個(gè)從無到有的app，考慮了很多，底部這塊我們還是決定用原生去做，這塊我們是找了原生開發(fā)同學(xué)去做了一些支持的，這塊據(jù)說是原生開發(fā)很基礎(chǔ)很基礎(chǔ)的一部分，大概半天就能搞定，可是后續(xù)的擴(kuò)展性、性能優(yōu)化、延展性等就好說多了，下面僅提供我們這邊的一個(gè)思路。
iOS: UITabBarController + UIViewController 把tab1、2、3.js的路徑分別賦值給UIViewController，之前也有分析過WXDemoViewController大家可以去看看。
UIViewController * weexVC = [[WXDemoViewController alloc] init];((WXDemoViewController *)weexVC).url = url;
Android: 這個(gè)用的是Fragment，網(wǎng)上搜weex Fragment，會(huì)出來好多有參考價(jià)值的文章，大家可以去了解一下，我就不截圖了，怕有版權(quán)之類的。
navigator感覺這個(gè)詞在我前面的文章里也是多次出現(xiàn)過了。是啊，底部tab1對(duì)應(yīng)tab1.js渲染完頁面，怎么進(jìn)去到相應(yīng)的page.js呢，就是我上一篇講的了，用的基本就是navigator了，而且在page.js對(duì)應(yīng)的頁面，我們也是可以使用vue-router的。
這個(gè)當(dāng)然是用原生的模塊組件封裝的，有興趣的可以看看WXNavigatorModule.m這個(gè)文件，所以頁面的進(jìn)退、切換等效果也都是極佳的，個(gè)人感覺完全超過單頁面應(yīng)用。
小結(jié)讀完文章的不難發(fā)現(xiàn)，我的觀點(diǎn)就是偏向于多頁面應(yīng)用。各有所需，大家完全可以根據(jù)自己的場(chǎng)景來選擇，如果你的app頁面不多、輕量等，完全也是可以用單頁面模式的。
最后如果大家有一點(diǎn)點(diǎn)喜歡，對(duì)你有一點(diǎn)點(diǎn)的幫助，歡迎點(diǎn)贊收藏啊。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108810.html
摘要：剛看到這仨頁面的時(shí)候，我就想著可以用路由，做成三端統(tǒng)一。樣式這部分真的三端基本是高度統(tǒng)一的，部分微調(diào)一下就可以了，也正是這樣，我們后續(xù)才能迅速解決和。終于不是談?wù)勅私y(tǒng)一了，也是真的體驗(yàn)了一次，雖然最后有點(diǎn)出入，但是下次基本是沒問題了。 目錄 Weex系列(序) —— 總要知道原生的一點(diǎn)東東(iOS) Weex系列(序) —— 總要知道原生的一點(diǎn)東東(Android) Weex系列(...
摘要：的方法在安卓底下會(huì)崩潰，結(jié)果竟然是要在里面設(shè)置正確的，因?yàn)槲沂怯霉倬W(wǎng)的腳手架搭起來的項(xiàng)目，不知道大家會(huì)不會(huì)遇到，改一下就可以解決問題了。 目錄 Weex系列(序) —— 總要知道原生的一點(diǎn)東東(iOS) Weex系列(序) —— 總要知道原生的一點(diǎn)東東(Android) Weex系列(1) —— Hello World項(xiàng)目 Weex系列(2) —— 頁面跳轉(zhuǎn)和通信 Weex系列(3)...
摘要：的方法在安卓底下會(huì)崩潰，結(jié)果竟然是要在里面設(shè)置正確的，因?yàn)槲沂怯霉倬W(wǎng)的腳手架搭起來的項(xiàng)目，不知道大家會(huì)不會(huì)遇到，改一下就可以解決問題了。 目錄 Weex系列(序) —— 總要知道原生的一點(diǎn)東東(iOS) Weex系列(序) —— 總要知道原生的一點(diǎn)東東(Android) Weex系列(1) —— Hello World項(xiàng)目 Weex系列(2) —— 頁面跳轉(zhuǎn)和通信 Weex系列(3)...
摘要：由于最開始沒有一點(diǎn)點(diǎn)原生開發(fā)的經(jīng)驗(yàn)，所以我就直接用的腳手架初始化項(xiàng)目。那下面我們就從最最原始的項(xiàng)目開始吧，序篇太枯燥，自由發(fā)揮時(shí)間開始啦。執(zhí)行如下代碼，最后會(huì)得到如圖的項(xiàng)目結(jié)構(gòu)。入口文件等簡析進(jìn)行了初始化。 目錄 Weex系列(序) —— 總要知道原生的一點(diǎn)東東(iOS) Weex系列(序) —— 總要知道原生的一點(diǎn)東東(Android) Weex系列(1) —— Hello Wor...
閱讀 2713·2021-09-26 10:19
閱讀 2156·2021-09-24 10:27
閱讀 2535·2021-09-01 10:42
閱讀 2316·2019-08-29 16:09
閱讀 2497·2019-08-29 15:17
閱讀 1462·2019-08-29 15:09
閱讀 649·2019-08-29 11:14
閱讀 2317·2019-08-26 13:25
