原理
因為列表頁到詳情頁是多對一的形式，即列表頁的多條數據列表對應的是一個詳情頁，只是數據不同而；因此，可以在加載列表頁時預加載詳情頁，即創建一個詳情頁的webview,但是不顯示出來，點擊列表的時候在通過特定方法觸發詳情頁的事件，獲取響應數據，這種做法可以極大程度的縮短響應的時間。
實施方法
- 通過預加載提前加載詳情頁；
- mui.fire 觸發詳情頁面指定事件，調用ajax更新數據；
一、預加載的實現（兩種方法）：
預加載方法一：
通過mui.init方法中的preloadPages參數進行配置。
mui.init({
preloadPages:[
{
url:prelaod-page-url,
id:preload-page-id,
styles:{},//窗口參數
extras:{},//自定義擴展參數
subpages:[{},{}]//預加載頁面的子頁面
}
],
preloadLimit:5//預加載窗口數量限制(一旦超出,先進先出)默認不限制
});
在使用中，可能用不到那么多的屬性，下面是我的使用案例：
mui.init({ preloadPages: [{ url: 'account_detail.html', id: 'account_detail.html' }] }); 只需要設置url和id就可以，詳情頁需要的參數在使用mui.fire的時候傳過去；
預加載方法二：
通過mui.preload方法預加載。
var page = mui.preload({ url:new-page-url, id:new-page-id,//默認使用當前頁面的url作為id styles:{},//窗口參數 extras:{}//自定義擴展參數 }); 預加載兩種方法對比：
1.方法一為異步創建預加載頁面，並且可以同時創建多個頁面，但是由於是異步的，因此不能立即獲取到創建的webview對象，並且需要使用plus.webview.getWebviewById來獲取到創建的webview;
2.方法二為同步創建預加載頁面，可以在創建后同步獲取到webview,即方法二的“page”變量；但是方法二只能同時創建一個預加載的頁面；
二、通過mui.fire觸發自定義事件
原理：兩個同時存在的webview之間可以通過mui.fire方法來觸發另一個webview中的自定義事件，因此，我們可以在詳情頁中創建一個自定義事件，監聽列表頁中的mui.fire方法。
mui.fire( target , event , data )
target:詳情頁（列表頁中預加載的詳情頁）的webview;
event:詳情頁中監聽的自定義事件；
data:需要傳給詳情頁的參數；
1.在詳情頁創建並監聽自定義事件“account_bid_detail_fire”：
$.plusReady(function() { /** * 實例化獲取接口數據方法 */ var get_bid_detail = new GET_BID_DETAIL(); window.addEventListener('account_bid_detail_fire', function(event) { //獲得事件參數 var id = event.detail.id; console.log(JSON.stringify(event.detail)); //觸發ajax，根據id向服務器請求當前列表詳情 get_bid_detail.init(id); }); }); mui.fire從列表頁傳的參數都在event.detail中，可以輸出具體查看；
2.在列表頁觸發“account_bid_detail_fire”事件：
mui(document.body).on("tap", ".account_bid_list", function() { //觸發詳情頁面的account_bid_detail_fire事件 var detail_webview = null; if(!detail_webview) { //判斷webview是否存在 detail_webview = plus.webview.getWebviewById("account_detail.html"); } //detail_webview是在列表頁中預加載的頁面； mui.fire(detail_webview, 'account_bid_detail_fire', { id: _this.dataset.id }); //打開詳情頁面 mui.openWindow({ id: "account_detail.html",//詳情頁webview的id show: { aniShow: 'none', //頁面不顯示動畫 duration: '0' // } }); }); 接下來，在列表頁點擊列表的時候就可觸發詳情頁的“account_bid_detail_fire”事件，然后觸發詳情頁的ajax來更新請求的數據；
文末福利：
福利一：前端，Java，產品經理，微信小程序，Python等資源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入門與實戰全套詳細視頻教程：https://www.jianshu.com/p/e8197d4d9880
領取方式：
如果需要學習視頻，歡迎關注 【編程微刊】微信公眾號，回復【領取資源】一鍵領取以下所有干貨資源，獲取更多有用技術干貨、文檔資料。所有文檔會持續更新，歡迎關注一起成長！
作者：喜歡坑隊友的程序員
鏈接：https://www.jianshu.com/p/d9e30a54f0bf
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。