用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

0809湖人vs凯尔特人圣诞大战:微信小程序中web-view再次刷新后頁面需要退兩次

湖人vs爵士季后赛 www.nbgeh.club Rolan 2019-8-16 00:58

背景#在上一章(直擊根源:vue項目微信小程序頁面跳轉web-view不刷新)解決了vue在小程序回退不刷新的問題之后,會引出了一個刷新的頁面需要點擊返回兩次才能返回上一個頁面問題描述#在A頁面從B頁面帶了參數返回之后, ...

背景#

在上一章(直擊根源:vue項目微信小程序頁面跳轉web-view不刷新)解決了vue在湖人vs爵士季后赛回退不刷新的問題之后,會引出了一個刷新的頁面需要點擊返回兩次才能返回上一個頁面

問題描述#

在A頁面從B頁面帶了參數返回之后,A頁面會刷新,直接導致了,A頁面返回上一個頁面需要點擊兩次,其中點擊一次時還是A頁面。

解決方案#

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

    Copy
    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,總結一下:

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

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

總結#

Copy
1. web-view在src變化之后,會產生一個新的頁面,并加入的頁面棧里面 2. 刷新之后的頁面回退不會有unload方法調用 3. web-view銷毀重建可以避免產生新的頁面 4. 銷毀重建解

自此,微信小程序使用vue嵌套頁面刷新的核心問題都解決了

分享至 : QQ空間
收藏
原作者: 奔跑的Abbott 來自: cnblogs