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

Vue · 發表 2019-05-13 18:34:31

摘要：在公司專案中經常會遇到一個場景, 嘗試過各種不同的方法, 最後想到了一種很技術上簡單且可行的方法. 經常被QA同學反應同一型別的問題專案是小程式(wepy), 部分頁面使用webview(vue). 經常會遇見一個場景: 當小程式navigateTo到一些頁面對使用者的"收...

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

經常被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事件的頁面, 只需要: