如何将启动图像添加到 Sencha Touch 2 应用程序？答案

【问题标题】：How to add launch image to a Sencha Touch 2 app?如何将启动图像添加到 Sencha Touch 2 应用程序？
【发布时间】：2013-02-04 17:55:57
【问题描述】：

iOS 指南要求所有应用的启动图像。据我了解，这是一个位于应用根文件夹中的“default.png”文件。
我使用 Sencha CMD v3 打包了我的应用程序，但在加载时看不到任何启动图像。
有一些默认启动图像位于 root/webapp/resources/loading/ 文件夹中，但它们没有显示在我的应用程序中。有什么想法吗？

"startupImage"似乎只适用于添加到主屏幕的应用程序，无论如何，这是我的app.js的一部分：

startupImage: {
    '320x460': 'resources/startup/320x460.jpg',
    '640x920': 'resources/startup/640x920.png',
    '768x1004': 'resources/startup/768x1004.png',
    '748x1024': 'resources/startup/748x1024.png',
    '1536x2008': 'resources/startup/1536x2008.png',
    '1496x2048': 'resources/startup/1496x2048.png'
}

添加了相关帖子：

[2.1] Splash screen is white on startup on Android and iOS

【问题讨论】：

此启动图像仅当它作为网站托管时，我想在 android 上添加启动图像，然后您必须使用 android 的启动画面。
我一直在使用 'phoneStartupScreen' 和 'tabletStartupScreen' 属性，它们确实有效。我需要找出一个替代方案，因为这对 iphone 5 没有帮助......

标签： ios extjs sencha-touch-2

【解决方案1】：

我在我的应用程序的开头有这个 - 我没有为 iOS 打包它，但这似乎是你可能需要的：

Ext.require([    
    'Ext.XTemplate',
    'Ext.Panel',
    'Ext.Button',
    'Ext.List'
]);

// Main application entry point
Ext.application({
    phoneStartupScreen: 'images/sencha_logo.png',
    name: 'Analytics',

// setup our MVC items

这里有一个方便的链接，指向关于这个的 api 文档：

http://docs.sencha.com/touch/2-0/#!/api/Ext.app.Application-cfg-phoneStartupScreen

【讨论】：

【解决方案2】：

对于启动图像，您需要修改应用目录中的 index.html。在这里，您会在 body 标记内找到一个 ID 为 appLoadingIndicator 的 div。在我的应用程序中，我已将 #appLoadingIndicator 的内容替换为 img 标记，该标记引用我的初始图像。

<div id="appLoadingIndicator">
  <img src="resources/images/splash.png" /> 
</div>

为了自定义 css，您可能希望删除 index.html 中的默认嵌入样式，这些样式存在于 head 标记内的 style 标记中，这些样式应用于 #appLoadingIndicator。

现在添加您的自定义 css，您将准备好您的启动图像。

【讨论】：

经过测试，我发现在android手机中看不到启动画面。所以在 app.js 中添加了 phoneStartupScreen: 变量，它工作得很好。关注网址：docs.sencha.com/touch/2-0/#!/api/… 了解更多详情。