1. 程式人生 > 其它 >uni-app之自定義404等錯誤頁面

uni-app之自定義404等錯誤頁面

注:本人使用微信小程式測試版、開發版等無效。但官方的參考文件,讓我暫時記住他,以觀後效。

當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

有志者,事竟成,破釜沉舟,百二秦關終屬楚; 苦心人,天不負,臥薪嚐膽,三千越甲可吞吳。