亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2019年05月14日 09:27:35   作者：陳文俊的微博  
這篇文章主要介紹了詳解如何探測小程序返回到webview頁面，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

在公司項目中經(jīng)常會遇到一個場景, 嘗試過各種不同的方法, 最后想到了一種很技術上簡單且可行的方法.

經(jīng)常被QA同學反應同一類型的問題

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

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

我們試過綁定blur和click事件來模擬事件, 試過從業(yè)務邏輯上加入一些時間點檢查狀態(tài), 最后才想到個技術簡單, 操作簡單的解決方案.

解決方法

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

<web-view src="{{url}}"/>
onShow () {
 this.url = ${base_url}?ts=Date.now()
}

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

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

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

更多

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

我們可以把這串代碼寫到mixin里, 對性能有些小影響, 但方法沒寫也不會去執(zhí)行, 只是在不需要的頁面上多了個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事件的頁面, 只需要:

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論