uni-app之自定義404等錯誤頁面
阿新 • • 發佈:2021-07-25
注:本人使用微信小程式測試版、開發版等無效。但官方的參考文件,讓我暫時記住他,以觀後效。
當Webview視窗載入錯誤地址(如本地頁面不存在)或者訪問網路資源失敗(如無法訪問網路)時會自動顯示預設錯誤頁面。
可以通過以下方法,自定義webView頁面。開啟manifest.json配置檔案,在App常用其他設定中,開啟錯誤的html頁面。
或切換為原始碼檢視,在app-plus下新增程式碼。
"app-plus": { "error": { "url": "hybrid/html/error.html" }, //... },
error.html需要放到根目錄下的hybrid/html目錄下,否則不會被編譯進去
錯誤頁面中監聽事件
在定義的error.html頁面中可以通過監聽"error"事件獲取更多錯誤資訊:
// 獲取錯誤資訊
document.addEventListener("error",function(e){ var url = e.url; // 錯誤頁面的url地址 var href = e.href; // 錯誤頁面的完整路徑(包括完整的協議頭) },false);
注意
Android平臺使用iframe時如果無法載入頁面在不同版本系統上存在差異:
- 5.0及以上版本:Webview視窗物件不會載入錯誤頁面,僅iframe節點顯示無法載入頁面;
- 5.0以下版本:Webview視窗物件會載入錯誤頁面。
如果需要更詳細的錯誤頁面配置,包括5+App和wap2app、單獨設定視窗的錯誤頁面、錯誤頁面的監聽事件,請參考https://ask.dcloud.net.cn/article/73。
參考網址
自定義Webview的404等錯誤頁面,Webview視窗載入頁面錯誤時顯示:https://ask.dcloud.net.cn/article/73
有志者,事竟成,破釜沉舟,百二秦關終屬楚; 苦心人,天不負,臥薪嚐膽,三千越甲可吞吳。