溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在公司項目中經常會遇到一個場景, 嘗試過各種不同的方法, 最后想到了一種很技術上簡單且可行的方法.
經常被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事件的頁面, 只需要:
小程序webview的url在onShow的時候修改ts參數
在vue文件里添加onShow方法, 進行業務操作. (方法里的this是正常指向vm的)
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
