直擊根源:vue專案微信小程式頁面跳轉web-view不重新整理

奔跑的Abbott 發表於2019-08-13
Vue

背景

最近專案需要適配小程式,專案是使用了vue開發的網站,其中改造方式是,每個頁面都使用小程式建立一個頁面通過web-view來顯示指定頁面的。

在沒有使用小程式時,路由跳轉時,重新整理頁面等等,這個是很順暢的,在使用了小程式之後,需要適配小程式的頁面,比如後退到前一頁,這個時候要重新整理頁面,於是遇到了小程式的一些特性。

問題描述

有兩個頁面:A=http://demo.com/#/A?code=12,B=http://demo.com/#/B?index=2

A頁面跳到B頁面,B頁面把一些處理後的結果以引數的形式傳給A頁面。

例如:B頁面的使用了wx.navigateBack(其它跳轉函式同理),且url(http://demo.com/#/A?code=12&index=12)以引數的形式傳給了A頁面,A頁面在OnShow方法裡面重新設定了web-view的src地址,能保證正確,但是頁面就是不重新整理,且使用微信開發者工具,能看到src已經被改變了。

嘗試解決

  1. 網上一些方法:比如先設定src為空字串,然後再通過setTimeout設定src為期望的值,且要設定時間為60ms以上(玄學),這個方法之前我還真解決了一個問題,不過那個場景是:A是一個web-view頁面,B是一個小程式頁面,B返回A時,通過給A傳遞引數,設定src可以通過此方法正確顯示,此方法但是沒有解決A、B頁面都是web-view的形式。

  2. 網上一些方法:在B頁面先把A頁面的src設定為空,然後再直接設定為需要的url,此方法依然對本問題無效

  3. 我把1、2兩種方案結合也沒有解決。

  4. 最小化正確原型

    這個時候,我在思考這個頁面到底能不能正常重新整理,注意這個想法非常的重要:

    我用了最小正確原型來先驗證,能否正確得到期望,最小原型如下:

    A的頁面web-view src=https://baidu.com,然後開啟看一下,可以正常顯示頁面,之後在B頁面返回A頁面時,給A頁面傳遞了一個url,在A頁面OnShow裡面設定了A的src=https://www.qq.com,結果頁面重新整理了,正確的顯示了www.qq.com頁面,也就是說不需要什麼settimeout。

    之後反覆測試,同樣的連線是不重新整理的;設定為空是不重新整理的。

    這個時候,已經找到了可以正常重新整理的條件,不是原連結、不是空,都可以重新整理頁面,那麼問題來了,A頁面的連結都已經變了,後面的引數變了,怎麼還跟快取了一樣(同一個get連結,會被快取起來的)。

  5. 再分析原始的A的連結
    http://demo.com/#/A?code=12,變成了http://demo.com/#/A?code=12&index=12,這個形式,改變夠大了,但是還是快取了,這個時候應該就是快取策略問題了,畢竟以前解決ie瀏覽器時,我們通過新增url隨機數就可以避免。

    注意到了嗎?vue頁面中使用了#作為路由判斷的,而#在瀏覽器中是作為錨點使用的,是不是小程式對這個解析也有差別,認為是同一個頁面,於是做了如下的測試:
    http://demo.com/?code=12&index=12/#/A

    結果,引數放到#之前,小程式果然重新整理了,看來小程式對#就是按照同一個頁面解析的,好了重新整理的問題解決了,下來看看vue是否能正確識別引數

    使用this.$route.query.index的值,成功取得了值。

最後

自此問題得以解決,總結如下:

  1. 網上的很多解決方法適用場景可能跟你的不一樣;
  2. 黔驢技窮時,使用最小正確原型開始驗證期望;
  3. 找到差異的地方,或者特殊的地方可能就是問題所在;
  4. 懂原理、機制能事半功倍快速解決問題
  5. 小程式還可以提升的更好,比如方案1真的有效,要不是之前第一版遷移方案我遇到過,我都覺得這個是開玩笑的方法