詳解如何探測小程序返回到webview頁面
在公司項(xiàng)目中經(jīng)常會遇到一個場景, 嘗試過各種不同的方法, 最后想到了一種很技術(shù)上簡單且可行的方法.
經(jīng)常被QA同學(xué)反應(yīng)同一類型的問題
項(xiàng)目是小程序(wepy), 部分頁面使用webview(vue). 經(jīng)常會遇見一個場景: 當(dāng)小程序navigateTo到一些頁面對用戶的"收藏狀態(tài)", "身材細(xì)節(jié)"做了修改后, 用戶點(diǎn)擊返回按鈕回到上一個頁面, 收藏的狀態(tài)或是身材細(xì)節(jié)沒有改變.
那是當(dāng)然的, 作為一個小程序中的webview, api相當(dāng)有限, 沒有一個事件可以讓網(wǎng)頁觸發(fā)重新渲染動作, 輪詢更是不理智的表面功夫.
我們試過綁定blur和click事件來模擬事件, 試過從業(yè)務(wù)邏輯上加入一些時間點(diǎn)檢查狀態(tài), 最后才想到個技術(shù)簡單, 操作簡單的解決方案.
解決方法
第一步, 在小程序webview綁定的url上加上時間戳.
<web-view src="{{url}}"/>
onShow () {
this.url = ${base_url}?ts=Date.now()
}
第二步, 在html里監(jiān)聽query變化. 我遇到問題的項(xiàng)目使用的是vue.
watch: {
'$route.query.ts': function () {
this.fetchData()
this.patchRender() // 獲取數(shù)據(jù), 重新渲染變化的部分
}
}
這樣就解決了觸發(fā)退回到webview的事件探測問題, 剩下的只要根據(jù)業(yè)務(wù)來重新渲染可能變化的部分就行了.
更多
小程序的部分每次都需要改變url的query參數(shù)沒有辦法, 但是對vue設(shè)計這么良好的框架還有一定改良空間.
我們可以把這串代碼寫到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 () {//...}
}
總結(jié), 使用了這個方法如需再添加需要探測onShow事件的頁面, 只需要:
小程序webview的url在onShow的時候修改ts參數(shù)
在vue文件里添加onShow方法, 進(jìn)行業(yè)務(wù)操作. (方法里的this是正常指向vm的)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
chrome瀏覽器不支持onmouseleave事件的解決技巧
發(fā)現(xiàn)給div加的 onmouseleave事件在chrome 中不起效果，下面與大家分享下具體的解決方法,不會的朋友可以了解下哈，希望對大家有所幫助2013-05-05
createTextRange()的使用示例含文本框選中部分文字內(nèi)容
這篇文章主要介紹了createTextRange()的使用示例,需要的朋友可以參考下2014-02-02
使用echarts餅狀圖label既在內(nèi)部顯示數(shù)值(百分比),又顯示外部指示線
這篇文章主要介紹了使用echarts餅狀圖label既在內(nèi)部顯示數(shù)值(百分比),又顯示外部指示線問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了通過實(shí)例解析js簡易模塊加載器，隨著前端工程越來越復(fù)雜，代碼越來越多，模塊化成了必不可免的趨勢。,需要的朋友可以參考下2019-06-06
JavaScript如何讀取本地excel文件、txt文件的內(nèi)容
JavaScript是一種腳本語言,廣泛應(yīng)用于前端開發(fā),這篇文章主要給大家介紹了關(guān)于JavaScript如何讀取本地excel文件、txt文件的內(nèi)容,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
js實(shí)現(xiàn)移動端編輯添加地址【模仿京東】
本篇文章主要介紹了js實(shí)現(xiàn)移動端編輯添加地址[模仿京東]的實(shí)例。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
javascript中SetInterval與setTimeout的定時器用法
Javascript的setTimeOut和setInterval函數(shù)應(yīng)用非常廣泛，它們都用來處理延時和定時任務(wù)，比如打開網(wǎng)頁一段時間后彈出一個登錄框，頁面每隔一段時間發(fā)送異步請求獲取最新數(shù)據(jù)等，本文文章通過代碼示例給大家介紹javascript中SetInterval與setTimeout的定時器用法2015-08-08
這篇文章主要介紹了Spring mvc 接收json數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2015-12-12
在傳統(tǒng)的面向?qū)ο蟪绦蛟O(shè)計中，主要關(guān)注于公用和私有作用域。公用作用域中的對象屬性可以從對象外部訪問，即開發(fā)者創(chuàng)建對象的實(shí)例后，就可使用它的公用屬性。2009-08-08
學(xué)著js的繼承，自己也寫了個。感覺不是很好?，F(xiàn)在很多代碼都封裝成類。2010-08-08