ionic3 适配微信

先抛出目前关于ionic 嵌套进微信出现的已知问题.

一: 如果不用ionic3 的懒加载模式的话.

1. 第一次加载会特别慢. (不用懒加载的话).
   2.物理按键返回,直接就退回到微信页面了.

二: 用懒加载的方式处理
1.虽然不会出现第一次加载特别慢, 但是单页面刷新出现异常/无法返回到上一页等等....... (页面栈直接清空,当前页出现在栈的最顶层)
2.跳转层级深的时候, 物理按键返回,会回到一些不想看到的历史记录页.

当然还有很多小的问题, 在这里只提到了上面这几个最明显的.

那么有没有什么办法 能结合这两种模式, 既能让它第一次加载没那么慢, 又不会造成多余的历史页呢?

接着往下看的话,请先熟悉ionic3 的懒加载模式, 以及 IonicPage 及 segment: 'detail/:id', 官网也明确的说明了产生的一些问题:

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.

详细了解请移至官网:
https://ionicframework.com/docs/api/navigation/IonicPage/

下面我分享下自己对于嵌套微信使用时做的一些优化,虽然也不是百分百完美的, 但是至少从体验 和 交互上 解决了一些问题:

1. 解决了 第一次加载慢的问题 (懒加载 与 非懒加载交互使用)
   2.解决了单页面刷新异常的问题 (单页面刷新返回到app首页. 注:不用懒加载的页面,你刷新时不会到首页的. )
2. 解决了物理按键返回的问题.

先上张图:

屏幕快照.jpg 可以看到有很多页面, 其实只是列举出来的一部分. 页面多了. 一次性加载的话,也就出现了,第一次加载慢的问题.. 为了避免这种问题, 从ionic3开始就出现了懒加载的模式....打住, 懒加载的问题 已经抛出了. 现在直接说下我的程序架构是怎么搭建的 屏幕快照.png

我们把tabar 和 tabar 下的 root1, root2,root3,root4 这几个page不采用懒加载的模式.
而其余页面 不涉及到一加载就展示的页面(跳转才展示的页面),我们用懒加载的模式.

屏幕快照 2018-01-11 下午2.04.51.png

这样当你,切换tabar 的下的 4个 root页面时, 是不会产生历史记录页面的. 当你点击导航栏左上角的返回,会直接回到微信的.

然后我们再来处理跳转到详情页面时遇到的问题.
当你跳转到详情页面时,因为详情页是懒加载的模式, 当你刷新后,或停留在当页,并且导航栏的返回按钮也没了.

这时候,就是因为页面stack造成的. 当前页成了第一页.

我们的处理办法是, 在懒加载的页面 如果涉及到刷新, 也让他返回到app首页.

首先在懒加载页面的初始化方法中.
constructor(public nav: NavController){
获取当前nav的 页面数量. 如
if(this.nav.getViews().length==0){
this.nav.goToRoot({}); //此时会触发tabar的初始化方法.
}
}

在tabar的初始化方法中:
constructor( public nav: NavController) {
//思路,因为懒加载的页面刷新之所以没有返回到app首页 ,是因为它的路径发生了变化(不知道为什么发生了变化的 请看 IonicPage里面先关的属性). 此时我们通过判断它的hash值, 如果不为空, 就置空后, 拿到有多少历史记录页, 此时让他返回到首页.
if(window.location.hash!=""){
window.location.hash="";
var len=-(window.history.length-1);
window.history.go(len);//!!重点,返回多次
}
this.setupBrowserBackButtonBehavior();
}
通过这个思路,就完美的解决了懒加载页面 刷新 不能返回首页的问题.

在此,只是提供一个思路.那么具体的情况,你可以参考这种方式去优化