這篇文章主要介紹小程序怎樣更新webview頁面,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)是一家集成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站頁面設(shè)計、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)網(wǎng)站建設(shè)公司,已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗,以探求精品塑造與理念升華,設(shè)計最適合用戶的網(wǎng)站頁面。 合作只是第一步,服務(wù)才是根本,我們始終堅持講誠信,負(fù)責(zé)任的原則,為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場環(huán)境中,互促共生。在小程序其它頁面做了操作,數(shù)據(jù)發(fā)生改變,回到webview頁面時需要更新webview里面的數(shù)據(jù)。由于小程序沒有提供與webview的實時通信能力,因此刷新頁面是個可考慮的做法。
最常見的做法,修改一下webview的url,加點query參數(shù)什么的,頁面就會更新了。但是這會增加webview的瀏覽history,導(dǎo)致用戶在后退的時候,會在webview內(nèi)退到前一個頁面,而不是退到小程序的前一個頁面。
在小程序內(nèi)調(diào)用wx.redirectTo(OBJECT)
方法。這里填當(dāng)前頁面的url。其實是關(guān)閉當(dāng)前頁面重新打開,變相達(dá)到刷新webview的目的。但是由于重新打開了小程序頁面,因此耗時會增加一些。并且,用戶會看到前一個頁面閃一下,然后出現(xiàn)新頁面。
首先,讓webview做條件渲染:
需要刷新時,先把webviewUrl設(shè)為空,銷毀當(dāng)前webview。然后再把webviewUrl設(shè)為當(dāng)前值。如下:
refreshWebview: function () { let tmpUrl = this.data.webviewUrl; this.setData({ webviewUrl: '' }); setTimeout(() => { this.setData({ webviewUrl: tmpUrl }) }, 100); }
這樣便可以在不影響導(dǎo)航欄歷史的情況下刷新頁面,也可以是跳轉(zhuǎn)url。
這里setData之后,頁面內(nèi)容的更新應(yīng)該是異步執(zhí)行的,因此我們后一次修改url需要延時一小段時間,否則會出現(xiàn)error。
猜測setData后頁面實際更新應(yīng)該是在下一次的requestAnimationFrame,因此如果頁面完全不卡頓可能16ms就可以了,保險起見,我設(shè)了100ms。
以上是“小程序怎樣更新webview頁面”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!