APICloud開發者進階之路| WKWebView的使用介紹
在iOS系統中,WebView分為UIWebView和WKWebView,相比於UIWebView,WKWebView在效能和功能等方面有很大提升,具有Safari相同的JavaScript引擎,支援更多的HTML5特性,並且沒有點選事件延遲,滾動時也不會影響頁面渲染。
使用方式:
可以在config.xml全域性配置useWKWebView欄位來使用:
<preference name="useWKWebView" value="true" />
或者在開啟頁面時通過useWKWebView引數來使用:
api.openTabLayout({ name: 'detail', url: './detail.html', useWKWebView: true, bgColor: '#fff', title: '詳情', navigationBar: { background: '#fff' } });
注意事項和建議:
-
在開啟新頁面時應儘量使用openTabLayout來代替openWin,使用tabLayout的原生導航欄,加快開啟速度。
-
為頁面設定合適的背景顏色,以避免在視窗切換過程中閃現黑色背景。
-
使用UIWebView時,若系統記憶體不足時會直接結束掉應用,而使用WKWebView時則只是結束掉頁面的渲染程序,因此會表現為頁面白屏。可以在config.xml中配置WKWebViewRecoveryMode來重新整理頁面或者熱重啟應用。
-
localStorage和UIWebView頁面不通用,為避免出現相容性問題,簡單的本地資料存取可以用api物件下的prefs相關介面,而大量的快取資料則可以使用fs、db來儲存。
-
跨域問題,WKWebView中限制了跨域訪問,若伺服器未設定允許跨域,則無法使用XMLHttpRequest和jQuery的ajax訪問,只能使用api.ajax。在canvas中畫圖片時,除了圖片伺服器需設定允許跨域外,還需要使用blob的方式來載入圖片,可參考附件示例。本地圖片則可以轉換成base64使用。注:為方便檢視js報錯資訊,在loader和測試版(debug開啟)中預設允許跨域,而正式版禁止跨域。
-
輸入框自動獲取焦點問題。為達到更好的體驗,如果輸入框要在開啟頁面時自動獲取焦點彈出鍵盤,需使用api.setFocus方法。