Cordova+Sencha Touch应用TabPanel背景图iOS11不显示问题求助

我之前做Cordova+Sencha Touch项目时，也碰到过iOS版本兼容的资源加载坑，结合你的情况，给你几个针对性的排查和解决方向：

• 适配WKWebView的资源路径逻辑
  iOS 11开始Cordova默认切换到了WKWebView，它和旧版UIWebView的本地资源路径处理逻辑完全不同。Sencha Touch默认的资源引用方式可能在WKWebView下无法正确解析本地文件。你可以尝试用Cordova的文件API来拼接绝对路径，比如：

  // 获取TabPanel组件并设置背景图
  const tabPanel = Ext.getCmp('yourTabPanelId');
  const bgPath = cordova.file.applicationDirectory + 'www/resources/images/your-bg.png';
  tabPanel.setStyle(`background-image: url(${bgPath}); background-size: cover;`);
  

  这样能确保路径在WKWebView下被正确识别。

• 配置WKWebView的本地访问权限
  iOS 11对WKWebView的本地资源访问做了更严格的限制，你需要在config.xml里添加以下配置，允许文件URL的访问权限：

  <preference name="AllowFileAccessFromFileURLs" value="true" />
  <preference name="AllowUniversalAccessFromFileURLs" value="true" />
  

  另外建议确保cordova-plugin-wkwebview-engine插件是最新版本，虽然你说升级过插件，但可以再执行一次确认：

  cordova plugin remove cordova-plugin-wkwebview-engine
  cordova plugin add cordova-plugin-wkwebview-engine@latest
  

• 排查Sencha Touch样式的兼容性
  iOS 11的WebKit内核有更新，TabPanel的背景样式可能被默认样式覆盖，或者渲染规则变化。你可以试试：

  1. 用内联样式替代外部CSS类，直接在TabPanel的配置里指定背景，避免样式优先级问题：

     {
         xtype: 'tabpanel',
         tabBar: {
             defaults: {
                 style: 'background-image: url(resources/images/tab-bg.png); background-size: cover;'
             },
             items: [/* 你的tab项 */]
         }
     }
     

  2. 检查是否使用了background-attachment: fixed这类在WKWebView下兼容性差的属性，换成background-size: cover或contain试试。

• 检查资源路径的大小写一致性
  WKWebView对文件路径的大小写是严格敏感的，而旧版UIWebView可能会忽略大小写差异。确认你的代码中引用的背景图文件名（比如TabBg.png）和实际文件系统中的文件名完全一致，包括大小写。

• 清理构建缓存重新打包
  有时候旧的构建缓存会导致奇怪的兼容性问题，建议完全清理后重新构建：

  cordova clean ios
  rm -rf platforms/ios plugins
  npm install
  cordova platform add ios@latest
  cordova build ios
  

先从路径配置和WKWebView权限这两点入手，这是iOS 11下最常见的本地资源加载问题根源。

内容的提问来源于stack exchange，提问作者Savanna