先拋出目前關(guān)于ionic 嵌套進微信出現(xiàn)的已知問題.
一: 如果不用ionic3 的懶加載模式的話.
- 第一次加載會特別慢. (不用懶加載的話).
2.物理按鍵返回,直接就退回到微信頁面了.
二: 用懶加載的方式處理
1.雖然不會出現(xiàn)第一次加載特別慢, 但是單頁面刷新出現(xiàn)異常/無法返回到上一頁等等....... (頁面棧直接清空,當前頁出現(xiàn)在棧的最頂層)
2.跳轉(zhuǎn)層級深的時候, 物理按鍵返回,會回到一些不想看到的歷史記錄頁.
當然還有很多小的問題, 在這里只提到了上面這幾個最明顯的.
那么有沒有什么辦法 能結(jié)合這兩種模式, 既能讓它第一次加載沒那么慢, 又不會造成多余的歷史頁呢?
接著往下看的話,請先熟悉ionic3 的懶加載模式, 以及 IonicPage 及 segment: 'detail/:id', 官網(wǎng)也明確的說明了產(chǎn)生的一些問題:
By default, the page would be navigated to as the first page in the stack with no prior history. A good example is the App Store on iOS. Clicking on a URL to an application in the App Store will load the details of the application with no back button, as if it were the first page ever viewed.
詳細了解請移至官網(wǎng):
https://ionicframework.com/docs/api/navigation/IonicPage/
下面我分享下自己對于嵌套微信使用時做的一些優(yōu)化,雖然也不是百分百完美的, 但是至少從體驗 和 交互上 解決了一些問題:
- 解決了 第一次加載慢的問題 (懶加載 與 非懶加載交互使用)
2.解決了單頁面刷新異常的問題 (單頁面刷新返回到app首頁. 注:不用懶加載的頁面,你刷新時不會到首頁的. ) - 解決了物理按鍵返回的問題.
先上張圖:
我們把tabar 和 tabar 下的 root1, root2,root3,root4 這幾個page不采用懶加載的模式.
而其余頁面 不涉及到一加載就展示的頁面(跳轉(zhuǎn)才展示的頁面),我們用懶加載的模式.
這樣當你,切換tabar 的下的 4個 root頁面時, 是不會產(chǎn)生歷史記錄頁面的. 當你點擊導航欄左上角的返回,會直接回到微信的.
然后我們再來處理跳轉(zhuǎn)到詳情頁面時遇到的問題.
當你跳轉(zhuǎn)到詳情頁面時,因為詳情頁是懶加載的模式, 當你刷新后,或停留在當頁,并且導航欄的返回按鈕也沒了.
這時候,就是因為頁面stack造成的. 當前頁成了第一頁.
我們的處理辦法是, 在懶加載的頁面 如果涉及到刷新, 也讓他返回到app首頁.
首先在懶加載頁面的初始化方法中.
constructor(public nav: NavController){
獲取當前nav的 頁面數(shù)量. 如
if(this.nav.getViews().length==0){
this.nav.goToRoot({}); //此時會觸發(fā)tabar的初始化方法.
}
}
在tabar的初始化方法中:
constructor( public nav: NavController) {
//思路,因為懶加載的頁面刷新之所以沒有返回到app首頁 ,是因為它的路徑發(fā)生了變化(不知道為什么發(fā)生了變化的 請看 IonicPage里面先關(guān)的屬性). 此時我們通過判斷它的hash值, 如果不為空, 就置空后, 拿到有多少歷史記錄頁, 此時讓他返回到首頁.
if(window.location.hash!=""){
window.location.hash="";
var len=-(window.history.length-1);
window.history.go(len);//!!重點,返回多次
}
this.setupBrowserBackButtonBehavior();
}
通過這個思路,就完美的解決了懶加載頁面 刷新 不能返回首頁的問題.
在此,只是提供一個思路.那么具體的情況,你可以參考這種方式去優(yōu)化
