1. 程式人生 > >直擊根源:微信小程式中web-view再次重新整理後頁面需要退兩次

直擊根源:微信小程式中web-view再次重新整理後頁面需要退兩次

背景

在上一章(直擊根源:vue專案微信小程式頁面跳轉web-view不重新整理)解決了vue在小程式回退不重新整理的問題之後,會引出了一個重新整理的頁面需要點選返回兩次才能返回上一個頁面

問題描述

在A頁面從B頁面帶了引數返回之後,A頁面會重新整理,直接導致了,A頁面返回上一個頁面需要點選兩次,其中點選一次時還是A頁面。

解決方案

  1. 首先第一個想法就是,設定一下退回按鈕直接跳到上一個頁面去;經過資料查詢,回退按鈕是沒有直接觸發函式的,也就是說不能直接控制回退的功能。
  2. 在尋找資料時,發現可以間接的觸發一個unload函式,於是嘗試在當前頁面退回按鈕點選後,會立即觸發當前頁面的unload方法,在unload裡面嘗試跳轉到A的前一頁,結果如下:

    1. 在第一次點選退回,沒有觸發unload
    2. 再次點選退回,成功觸發了unload

    與期望不符,預期unload第一次退回觸發才可以進行頁面跳轉

  3. 那麼是web-view重新整理產生的這個頁面,也不能幹掉,讓web-view重新整理這個頁面就可以了,找了很多資料,沒有理出一個頭緒,web-view既然是第二次重新整理產生的,那麼讓只重新整理第一次是不是就可以解決了,於是做了如下嘗試:

    在B頁面把A頁面的web-view的src變數置為空,然後在A頁面web-view上新增wx:if={{src!==''}}的條件控制,在src為空時銷燬web-view,然後在B頁面退回通過另一個變數把需要的url傳遞過去在A頁面onShow

    ,再設定src為一個我們期望的跳轉url,總結一下:

     A頁面跳到B頁面時設定A的src為空-銷燬了`web-view`,退回A頁面時在onShow方法在設定src的值-`web-view`被重新渲染

    測試結果得到了預期:
    頁面被重新整理,且沒有了A頁面退回兩次的情況

總結

1. web-view在src變化之後,會產生一個新的頁面,並加入的頁面棧裡面
2. 重新整理之後的頁面回退不會有unload方法呼叫
3. web-view銷燬重建可以避免產生新的頁面
4. 銷燬重建解

自此,微信小程式使用vue巢狀頁面重新整理的核心問題都解決