這篇文章主要介紹小程序怎樣更新webview頁面,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),定興企業(yè)網(wǎng)站建設(shè),定興品牌網(wǎng)站建設(shè),網(wǎng)站定制,定興網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,定興網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶成長自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
在小程序其它頁面做了操作,數(shù)據(jù)發(fā)生改變,回到webview頁面時(shí)需要更新webview里面的數(shù)據(jù)。由于小程序沒有提供與webview的實(shí)時(shí)通信能力,因此刷新頁面是個(gè)可考慮的做法。
最常見的做法,修改一下webview的url,加點(diǎn)query參數(shù)什么的,頁面就會更新了。但是這會增加webview的瀏覽history,導(dǎo)致用戶在后退的時(shí)候,會在webview內(nèi)退到前一個(gè)頁面,而不是退到小程序的前一個(gè)頁面。
在小程序內(nèi)調(diào)用wx.redirectTo(OBJECT)
方法。這里填當(dāng)前頁面的url。其實(shí)是關(guān)閉當(dāng)前頁面重新打開,變相達(dá)到刷新webview的目的。但是由于重新打開了小程序頁面,因此耗時(shí)會增加一些。并且,用戶會看到前一個(gè)頁面閃一下,然后出現(xiàn)新頁面。
首先,讓webview做條件渲染:
需要刷新時(shí),先把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需要延時(shí)一小段時(shí)間,否則會出現(xiàn)error。
猜測setData后頁面實(shí)際更新應(yīng)該是在下一次的requestAnimationFrame,因此如果頁面完全不卡頓可能16ms就可以了,保險(xiǎn)起見,我設(shè)了100ms。
以上是“小程序怎樣更新webview頁面”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!