1. 程式人生 > >微信小程式--Web-View重新整理Html頁面

微信小程式--Web-View重新整理Html頁面

最近進行小程式開發,因為主體上是複用了公眾號的內容,所有采用了Web-View載入H5的方式進行,其中有一個需求是連線藍芽裝置收集資料並上傳到後臺,點選H5中的按鈕,進入到藍芽採集頁面,然後在採集完資料後,跳回H5頁面並重新整理。


在H5中呼叫wx.miniProgram.navigateTo調到了小程式頁面,然後採集完資料,最開始想到的是使用reLaunch重新載入H5頁面,但是由於小程式新開page並載入H5的速度並不快,總感覺這個頁面過渡時間長。於是想著能否直接navigateBack返回,然後重新整理H5頁面。

data{
       bindUrl: "http://itlao5.com/wp";
} 

首先,我的Web-View是動態載入的,通過setData改變bindUrl值來重新整理頁面,然而,我返回繼續呼叫setData方法,發現並沒有重新整理頁面。因為setData的bindUrl值並沒有變化,Web-View不重新整理。於是想了一個辦法,bindUrl加引數變成“itlao5.com/wp?”,這樣bindUrl變了,Web-View就會重新整理。


重新執行,Web-View確實重新整理了,然而,當我按返回鍵時,問題出現了:按一下返回鍵,並沒有退出,按第二下才退出小程式,原因竟然是我載入了兩個Url,按第一下返回鍵時,只是Web-View退回了“itlao5.com/wp

”。


於是又得想其他辦法,既然bindUrl值改變會重新整理Web-View,那我將bindUrl置為空字串"",然後再setData為“itlao5.com/wp”,是否能解決問題呢?
即:

this.setData {
       bindUrl: ''
}
this.setData {
       bindUrl: 'http://itlao5.com/wp'
}

最後,在藍芽採集頁把bindUrl先修改,再返回,然後,程式碼就定格在下面的樣子:

goBck: function() {
var pages = getCurrentPages(); // 當前頁面  
var beforePage = pages[pages.length - 2]; // 前一個頁面 
var url = beforePage.data.bindUrl; // 前一個頁面當前載入的url
       beforePage.setData {
             bindUrl: ''
} 
       beforePage.setData {
             bindUrl: url;
} 
// 兩次setData,達到重新整理bindUrl的目的
       wx.navigateBack({ 
               success: function() { 
// 返回前一個頁面成功
}
}); 
}

這算是一種取巧的方式,但是,目的達到了,省略了page頁的重新載入,同時也達到了H5重新整理的目的,而且不會影響到返回佇列。最主要的是,重新整理速度快。


因為第一次寫小程式,js也不太懂,只有邊學習邊開發。該問題如果有更好的,更專業的方式解決,麻煩指教,多謝!