1. 程式人生 > 實用技巧 >APICloud開發者進階之路| WKWebView的使用介紹

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方法。