詳解如何探測(cè)小程序返回到webview頁(yè)面

在公司項(xiàng)目中經(jīng)常會(huì)遇到一個(gè)場(chǎng)景, 嘗試過(guò)各種不同的方法, 最后想到了一種很技術(shù)上簡(jiǎn)單且可行的方法.

經(jīng)常被QA同學(xué)反應(yīng)同一類(lèi)型的問(wèn)題

項(xiàng)目是小程序(wepy), 部分頁(yè)面使用webview(vue). 經(jīng)常會(huì)遇見(jiàn)一個(gè)場(chǎng)景: 當(dāng)小程序navigateTo到一些頁(yè)面對(duì)用戶(hù)的"收藏狀態(tài)", "身材細(xì)節(jié)"做了修改后, 用戶(hù)點(diǎn)擊返回按鈕回到上一個(gè)頁(yè)面, 收藏的狀態(tài)或是身材細(xì)節(jié)沒(méi)有改變.

那是當(dāng)然的, 作為一個(gè)小程序中的webview, api相當(dāng)有限, 沒(méi)有一個(gè)事件可以讓網(wǎng)頁(yè)觸發(fā)重新渲染動(dòng)作, 輪詢(xún)更是不理智的表面功夫.

我們?cè)囘^(guò)綁定blur和click事件來(lái)模擬事件, 試過(guò)從業(yè)務(wù)邏輯上加入一些時(shí)間點(diǎn)檢查狀態(tài), 最后才想到個(gè)技術(shù)簡(jiǎn)單, 操作簡(jiǎn)單的解決方案.

解決方法

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

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

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

第二步, 在html里監(jiān)聽(tīng)query變化. 我遇到問(wèn)題的項(xiàng)目使用的是vue.

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

這樣就解決了觸發(fā)退回到webview的事件探測(cè)問(wèn)題, 剩下的只要根據(jù)業(yè)務(wù)來(lái)重新渲染可能變化的部分就行了.

更多

小程序的部分每次都需要改變url的query參數(shù)沒(méi)有辦法, 但是對(duì)vue設(shè)計(jì)這么良好的框架還有一定改良空間.

我們可以把這串代碼寫(xiě)到mixin里, 對(duì)性能有些小影響, 但方法沒(méi)寫(xiě)也不會(huì)去執(zhí)行, 只是在不需要的頁(yè)面上多了個(gè)observer.

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

那么在vue頁(yè)面中就省去了寫(xiě)watch的麻煩, 直接像小程序那樣寫(xiě)onShow方法就行了.

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

總結(jié), 使用了這個(gè)方法如需再添加需要探測(cè)onShow事件的頁(yè)面, 只需要:

小程序webview的url在onShow的時(shí)候修改ts參數(shù)

在vue文件里添加onShow方法, 進(jìn)行業(yè)務(wù)操作. (方法里的this是正常指向vm的)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。