angular框架下， 解決微信H5頁面軟鍵盤彈起後頁面下方留白的問題（iOS端）--- 頁面設置100%以後，不同終端的顯示問題

在使用angular7.x開發公衆號的時候遇到幾個問題，特此記錄下

 

一、頁面底部留白問題

現象： 部分有表單的頁面，在表單輸入內容以後，鍵盤收縮之後，下方有一定的空白，下方有按鈕的時候，按鈕位置錯位，無法點擊提交，必須手動滑動是的頁面留白消失後方可提交

原因：其實就是設置頁面高度爲100%後，iOS下顯示的兼容問題。

解決辦法：

1. 在meta viewport標籤里加屬性：viewport-fit=cover；如下

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />

2.使用js代碼解決-- angular7.x

在表單中添加失去焦點事件代碼如下：

<input type="text" (blur)="fixScroll()" placeholder="請輸入xxx"/>

ts代碼如下：

fixScroll():void {     //由於Android中不存在，所以獲取終端類型判斷下
    let u = navigator.userAgent;
    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
    if (isiOS) {
        window.scrollTo(0, 0);
    }
}

 

二、在支付成功後的跳轉頁面，頁面的組件不渲染

現象： 在支付頁面點擊按鈕，微信支付，成功後在回調函數中跳轉支付結果頁面，比如 支付成功頁面，但是在成功頁面的下方能看見支付頁面的按鈕等信息，

原因：算是個微信的坑吧，如圖，調到下一級頁面中不調用ngOnInIt()鉤子函數，導致頁面組件不渲染，

 解決辦法：

讓組件重新渲染一次，代碼如下：

constructor(private zone:NgZone) {
        this.zone.run(() => {
            console.log('do something.......');
        });

}

 

三、列表頁面視圖在ios下不更新問題

現象：在二級頁面是列表頁面，在一級頁面提交數據後，在二級頁面中看不到剛提交的數據，默認顯示提交之前的第一條數據

原因：在ios下，angular組件的視圖不更新所致，

解決辦法：

使用angular中的路由監聽機制，監聽路由變化後，更新數據，驅動視圖變化，代碼如下：

constructor ( private http: HttpCustormClient,
              private router: Router, ) {
    this.navigationSubscription = this.router.events.subscribe((event: any) => {
        if (event instanceof NavigationEnd) {
            this.getWithDrawHistory();//服務端獲取的數據
        }
    });
}

由於使用了發佈訂閱，所以組件銷燬時，取消訂閱，

ngOnDestroy() {
    if (this.navigationSubscription) {
        this.navigationSubscription.unsubscribe();
    }
}

這是在使用angular框架開發公衆號時遇到的幾個比較奇葩的問題，特此記錄下，關注下方公衆號，分享更多

---

想要整理更多的碎片知識，掃碼關注下面的公衆號，讓我們在哪裏接着嘮！