解决WX-IOS打开公众号网页出现的底部导航条

在微信公众号中,打开跳转链接时会,浏览器底部分出现一个导航条,导致屏幕空间压缩。网上有些人给出了js,vue的解决方案,那么我贴一下angular版本的,希望能对你有所帮助。

 

代码:

export class RouteWithoutHistory extends PathLocationStrategy {
    pushState(state: any, title: string, url: string, queryParams: string): void {}
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...
  ],
  providers: [
    ...
    { provide: LocationStrategy, useClass: RouteWithoutHistory},
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

 

原理:

    底部的导航条是因为wx浏览器产生了历史记录导致的,所以我们操作的时候不产生历史记录就行啦。

 最开始,我想到了navigateByUrl中的replaceUrl参数,但这样做面临两个问题:1 改动比较大;2 Ionic的的tab中,没办法设置此参数。所以, 要另想它法。

   后面我查到,angular与dom管理history这块与LocationStrategy有关,自已写一个也比较麻烦。那就继承默认的LocationStrategy, 然后重载其pushState方法,让它不再往浏览器“通风报信”就好啦。

   换做平时,我一定会想了:“我从未听过如此奇怪的要求”。

posted @ 2020-05-20 16:46  Caption  阅读(...)  评论(...编辑  收藏