微信小程式 webview 頁面重新整理

微信小程式 webview 頁面重新整理

問題描述

在微信小程式原生頁面做了操作，資料發生改變，回到 webview 頁面時需要更新 webview 裡面的資料。由於小程式沒有提供與 webview 的實時通訊能力，因此重新整理頁面是個可考慮的做法。

解決方案

首先，解決回到 webview 重新整理的問題，webview 自帶快取，直接物理鍵返回，或者 back api 返回，都不會更新實時資料，這個問題可以利用 onShow 生命週期，在 onShow 生命週期中改變 webview 的 src 屬性；

注意：
在 onShow 中改變 src 連結時，需要改變 src 的原連結，如果直接賦值原連結，不會起作用，所以需要在 query 引數再加上時間戳，才能讓當前 webview 重新整理頁面；

引發的問題：
這種處理方式頁面是會更新了。但是會增加webview的瀏覽history，導致使用者在後退的時候，會在webview內退到前一個頁面，而不是退到小程式的前一個頁面。

處理方式：
首先，讓webview做條件渲染；需要重新整理時，先把webviewUrl設為空，銷燬當前webview。然後再把webviewUrl設為當前值。最終綜合解決方式如下：

<template>
  <div>
    <!--此處是重點-->
    <web-view v-if="webViewUrl.length" :src="webViewUrl"></web-view>
  </div>
</template>

<script>
  import api from "common/js/util/util";

  export default {
    data() {
      return {
        webViewUrl:''
      }
    },
    onShow(){
      //此處是重點
      if(wx.getStorageSync('isJournalBack')){
        let urlTemp = this.webViewUrl;
        this.webViewUrl = '';
        wx.removeStorageSync('isJournalBack');
        setTimeout( () => {
          this.webViewUrl=urlTemp.split('?')[0]+'?flag='+Date.parse(new Date())+'&' + urlTemp.split('?')[1];
        }, 100)
      }
    },
    onLoad(option) {
      if(wx.getStorageSync('isJournalBack')){
        wx.removeStorageSync('isJournalBack');
      }
      let str='/dist/journalList.html';
      if(JSON.stringify(option) !== '{}'){
        str+='?';
        for (var i in option){
          str+=i+'='+option[i]+'&'
        }
        str=str.slice(0,str.length-1);
      }
      this.webViewUrl = `${api.httpEnv()}${decodeURIComponent(str)}`
      console.log(this.webViewUrl)
    },
  }
</script>

這樣便可以在不影響導航欄歷史的情況下重新整理頁面，也可以是跳轉url。
這裡重新賦值 url 之後，頁面內容的更新應該是非同步執行的，因此我們後一次修改 url 需要延時一小段時間，否則會出現 error 。
猜測重新賦值 url 後頁面實際更新應該是在下一次的 requestAnimationFrame ，因此如果頁面完全不卡頓可能16ms就可以了，保險起見，我設了100ms。