如何探測小程序返回到webview頁面

在公司項目中常常會遇到一個場景, 嘗試過各類不一樣的方法, 最後想到了一種很技術上簡單且可行的方法.

常常被QA同窗反應同一類型的問題

項目是小程序(wepy), 部分頁面使用webview(vue). 常常會碰見一個場景: 當小程序navigateTo到一些頁面對用戶的"收藏狀態", "身材細節"作了修改後, 用戶點擊返回按鈕回到上一個頁面, 收藏的狀態或是身材細節沒有改變.

那是固然的, 做爲一個小程序中的webview, api至關有限, 沒有一個事件能夠讓網頁觸發從新渲染動做, 輪詢更是不理智的表面功夫.

咱們試過綁定blur和click事件來模擬事件, 試過從業務邏輯上加入一些時間點檢查狀態, 最後纔想到個技術簡單, 操做簡單的解決方案.

解決方法

第一步, 在小程序webview綁定的url上加上時間戳.

<web-view src="{{url}}"/>

onShow () {
  this.url = ${base_url}?ts=Date.now()
}

第二步, 在html裏監聽query變化. 我遇到問題的項目使用的是vue.

watch: {
      '$route.query.ts': function () {
        this.fetchData()
        this.patchRender() // 獲取數據, 從新渲染變化的部分
      }
    }

這樣就解決了觸發退回到webview的事件探測問題, 剩下的只要根據業務來從新渲染可能變化的部分就好了.

更多

小程序的部分每次都須要改變url的query參數沒有辦法, 可是對vue設計這麼良好的框架還有必定改良空間.

咱們能夠把這串代碼寫到mixin裏, 對性能有些小影響, 但方法沒寫也不會去執行, 只是在不須要的頁面上多了個observer.

Vue.use(function () {
  Vue.mixin({
    watch: {
      '$route.query.ts': function () {
        this.$options.onShow && this.$options.onShow.call(this)
      }
    }
  })
})

那麼在vue頁面中就省去了寫watch的麻煩, 直接像小程序那樣寫onShow方法就好了.

onShow () {
    this.fetchData()
    this.patchRender() 
  },
  methods: {
    fetchData () {//...}
  }

總結, 使用了這個方法如需再添加須要探測onShow事件的頁面, 只須要:

1. 小程序webview的url在onShow的時候修改ts參數
2. 在vue文件裏添加onShow方法, 進行業務操做. (方法裏的this是正常指向vm的)

原文地址