PhoneGap Build:图标和启动画面显示不正确
PhoneGap Build: icons and splashscreens are not displayed correctly
我遇到的问题是,当我使用 Phonegap Build 构建应用程序时,android 和 ios 图标未正确包含。
config.xml部分如下:
<icon src="www/res/icon/icon.png" />
<splash src="www/res/screen/splash.jpg" />
<platform name="android">
<icon src="www/res/icon/android/icon-ldpi.png" density="ldpi" />
<icon src="www/res/icon/android/icon-mdpi.png" density="mdpi" />
<icon src="www/res/icon/android/icon-hdpi.png" density="hdpi" />
<icon src="www/res/icon/android/icon-xhdpi.png" density="xhdpi" />
<splash gap:qualifier="port-hdpi" src="www/res/screen/android/screen-hdpi-port.png" width="480" height="800" />
<splash gap:qualifier="port-xhdpi" src="www/res/screen/android/screen-xhdpi-port.png" width="640" height="960" />
<splash gap:qualifier="land-hdpi" src="www/res/screen/android/screen-hdpi-land.jpg" width="800" height="480" />
<splash gap:qualifier="land-xhdpi" src="www/res/screen/android/screen-xhdpi-land.jpg" width="960" height="640" />
</platform>
<platform name="ios">
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="www/res/icon/ios/icon-60.png" width="60" height="60" />
<icon src="www/res/icon/ios/icon-60@2x.png" width="120" height="120" />
<icon src="www/res/icon/ios/icon-60@3x.png" width="180" height="180" />
<!-- iPad -->
<icon src="www/res/icon/ios/icon-76.png" width="76" height="76" />
<icon src="www/res/icon/ios/icon-76@2x.png" width="152" height="152" />
<!-- iOS 6.1 -->
<!-- Spotlight Icon -->
<icon src="www/res/icon/ios/icon-40.png" width="40" height="40" />
<icon src="www/res/icon/ios/icon-40@2x.png" width="80" height="80" />
<!-- iPhone / iPod Touch -->
<icon src="www/res/icon/ios/icon.png" width="57" height="57" />
<icon src="www/res/icon/ios/icon@2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="www/res/icon/ios/icon-72.png" width="72" height="72" />
<icon src="www/res/icon/ios/icon-72@2x.png" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="www/res/icon/ios/icon-small.png" width="29" height="29" />
<icon src="www/res/icon/ios/icon-small@2x.png" width="58" height="58" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="www/res/icon/ios/icon-50.png" width="50" height="50" />
<icon src="www/res/icon/ios/icon-50@2x.png" width="100" height="100" />
<!-- Splash sreens -->
<splash src="www/res/screen/ios/screen-iphone-portrait-2x.png" height="960" width="640" />
<splash src="www/res/screen/ios/screen-iphone-landscape-2x.jpg" height="640" width="960" />
<splash src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" height="1136" width="640" />
<splash src="www/res/screen/ios/screen-iphone-landscape-568h-2x.jpg" height="640" width="1136" />
<splash src="www/res/screen/ios/screen-ipad-portrait.png" height="1024" width="768" />
<splash src="www/res/screen/ios/screen-ipad-landscape.jpg" height="768" width="1024" />
</platform>
<platform name="wp8">
<icon src="www/res/icon/wp/ApplicationIcon.png" width="99" height="99" />
<!-- tile image -->
<icon src="www/res/icon/wp/Background.png" width="159" height="159" />
<splash src="www/res/screen/wp/SplashScreenImage.png" width="768" height="1280"/>
</platform>
这些文件确实存在于所述文件夹中,它们甚至分别出现在 assets/www/res
和 payload/myApp.app/www/res
中的 apk 和 ipa 中。但是 phonegap 构建不会将它们复制到 res/drawable-*
或 payload/myApp.app
。相反,它使用默认图标和启动画面(Android 中的 Cordova bot 和 iOS 中的透明图像)。
在本地完成的 WP8 构建非常有效。
我已经把Phonegap Build里面的app删除了,重新创建了,但是图标没变,只是app id高了一点。
是否必须将图标放在特殊位置,还是 config.xml 有问题?
更新:我刚刚查看了 iOS 构建的调试输出。一些 PNG 被复制了,但 ipa 仍然包含 Payload\MyApp.app
中的透明图标。复制日志示例:
CopyPNGFile build/MyApp.app/icon-76.png MyApp/Resources/icons/icon-76.png
cd /project
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/copypng -compress /project/MyApp/Resources/icons/icon-76.png /project/build/MyApp.app/icon-76.png
android也是如此:
[crunch] Processing image to cache: /project/res/drawable-hdpi/icon.png => /project/bin/res/drawable-hdpi/icon.png
[crunch] (processed image to cache entry /project/bin/res/drawable-hdpi/icon.png: 67% size of source)
嗯,我确实在config.xml中定义了其他directories/files!
我在使用 SplashScreen 时也遇到了一些问题,请参阅下一个答案:
在 config.xml
旁边添加:
<preference name="SplashScreen" value="screen"/>
这些也是我的 config.xml
中用于图标和初始屏幕的条目(仅限 Android):
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
</platform>
<icon src="resources/android/icon/drawable-xhdpi-icon.png" />
此外,这个 NPM 包可能会引起您的兴趣:https://www.npmjs.com/package/cordova-media-generator
问题中显示的语法是本地 Cordova 的语法。
Phonegap Build 服务似乎没有使用相同的语法。如果您非常接近 the Phonegap Build docs,使用 gap:platform
属性而不是将您的图标嵌套到 platform
标签中,Phonegap Build 工作正常。
尝试跟上文档。密度在 end.exmpl:
中声明
<platform name="android">
<splash src="res/screen/android/screen-hdpi-landscape.png" density="land-hdpi" />
<splash src="res/screen/android/screen-ldpi-landscape.png" density="land-ldpi" />
<splash src="res/screen/android/screen-mdpi-landscape.png" density="land-mdpi" />
<splash src="res/screen/android/screen-xhdpi-landscape.png" density="land-xhdpi" />
<splash src="res/screen/android/screen-hdpi-portrait.png" density="port-hdpi" />
<splash src="res/screen/android/screen-ldpi-portrait.png" density="port-ldpi" />
<splash src="res/screen/android/screen-mdpi-portrait.png" density="port-mdpi" />
<splash src="res/screen/android/screen-xhdpi-portrait.png" density="port-xhdpi" />
</platform>
这是我工作的一部分 config.xml,
由于构建过程中的错误,src 也可能是“www/.../...”,只有根项目文件夹。查看构建是否通过的方法 platforms/android/res/multipleFolders--> 应该充满 screensplash img 的文件夹,这些文件夹不是您手动添加的。
我遇到的问题是,当我使用 Phonegap Build 构建应用程序时,android 和 ios 图标未正确包含。
config.xml部分如下:
<icon src="www/res/icon/icon.png" />
<splash src="www/res/screen/splash.jpg" />
<platform name="android">
<icon src="www/res/icon/android/icon-ldpi.png" density="ldpi" />
<icon src="www/res/icon/android/icon-mdpi.png" density="mdpi" />
<icon src="www/res/icon/android/icon-hdpi.png" density="hdpi" />
<icon src="www/res/icon/android/icon-xhdpi.png" density="xhdpi" />
<splash gap:qualifier="port-hdpi" src="www/res/screen/android/screen-hdpi-port.png" width="480" height="800" />
<splash gap:qualifier="port-xhdpi" src="www/res/screen/android/screen-xhdpi-port.png" width="640" height="960" />
<splash gap:qualifier="land-hdpi" src="www/res/screen/android/screen-hdpi-land.jpg" width="800" height="480" />
<splash gap:qualifier="land-xhdpi" src="www/res/screen/android/screen-xhdpi-land.jpg" width="960" height="640" />
</platform>
<platform name="ios">
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="www/res/icon/ios/icon-60.png" width="60" height="60" />
<icon src="www/res/icon/ios/icon-60@2x.png" width="120" height="120" />
<icon src="www/res/icon/ios/icon-60@3x.png" width="180" height="180" />
<!-- iPad -->
<icon src="www/res/icon/ios/icon-76.png" width="76" height="76" />
<icon src="www/res/icon/ios/icon-76@2x.png" width="152" height="152" />
<!-- iOS 6.1 -->
<!-- Spotlight Icon -->
<icon src="www/res/icon/ios/icon-40.png" width="40" height="40" />
<icon src="www/res/icon/ios/icon-40@2x.png" width="80" height="80" />
<!-- iPhone / iPod Touch -->
<icon src="www/res/icon/ios/icon.png" width="57" height="57" />
<icon src="www/res/icon/ios/icon@2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="www/res/icon/ios/icon-72.png" width="72" height="72" />
<icon src="www/res/icon/ios/icon-72@2x.png" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="www/res/icon/ios/icon-small.png" width="29" height="29" />
<icon src="www/res/icon/ios/icon-small@2x.png" width="58" height="58" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="www/res/icon/ios/icon-50.png" width="50" height="50" />
<icon src="www/res/icon/ios/icon-50@2x.png" width="100" height="100" />
<!-- Splash sreens -->
<splash src="www/res/screen/ios/screen-iphone-portrait-2x.png" height="960" width="640" />
<splash src="www/res/screen/ios/screen-iphone-landscape-2x.jpg" height="640" width="960" />
<splash src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" height="1136" width="640" />
<splash src="www/res/screen/ios/screen-iphone-landscape-568h-2x.jpg" height="640" width="1136" />
<splash src="www/res/screen/ios/screen-ipad-portrait.png" height="1024" width="768" />
<splash src="www/res/screen/ios/screen-ipad-landscape.jpg" height="768" width="1024" />
</platform>
<platform name="wp8">
<icon src="www/res/icon/wp/ApplicationIcon.png" width="99" height="99" />
<!-- tile image -->
<icon src="www/res/icon/wp/Background.png" width="159" height="159" />
<splash src="www/res/screen/wp/SplashScreenImage.png" width="768" height="1280"/>
</platform>
这些文件确实存在于所述文件夹中,它们甚至分别出现在 assets/www/res
和 payload/myApp.app/www/res
中的 apk 和 ipa 中。但是 phonegap 构建不会将它们复制到 res/drawable-*
或 payload/myApp.app
。相反,它使用默认图标和启动画面(Android 中的 Cordova bot 和 iOS 中的透明图像)。
在本地完成的 WP8 构建非常有效。 我已经把Phonegap Build里面的app删除了,重新创建了,但是图标没变,只是app id高了一点。
是否必须将图标放在特殊位置,还是 config.xml 有问题?
更新:我刚刚查看了 iOS 构建的调试输出。一些 PNG 被复制了,但 ipa 仍然包含 Payload\MyApp.app
中的透明图标。复制日志示例:
CopyPNGFile build/MyApp.app/icon-76.png MyApp/Resources/icons/icon-76.png
cd /project
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/copypng -compress /project/MyApp/Resources/icons/icon-76.png /project/build/MyApp.app/icon-76.png
android也是如此:
[crunch] Processing image to cache: /project/res/drawable-hdpi/icon.png => /project/bin/res/drawable-hdpi/icon.png
[crunch] (processed image to cache entry /project/bin/res/drawable-hdpi/icon.png: 67% size of source)
嗯,我确实在config.xml中定义了其他directories/files!
我在使用 SplashScreen 时也遇到了一些问题,请参阅下一个答案:
在 config.xml
旁边添加:
<preference name="SplashScreen" value="screen"/>
这些也是我的 config.xml
中用于图标和初始屏幕的条目(仅限 Android):
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
</platform>
<icon src="resources/android/icon/drawable-xhdpi-icon.png" />
此外,这个 NPM 包可能会引起您的兴趣:https://www.npmjs.com/package/cordova-media-generator
问题中显示的语法是本地 Cordova 的语法。
Phonegap Build 服务似乎没有使用相同的语法。如果您非常接近 the Phonegap Build docs,使用 gap:platform
属性而不是将您的图标嵌套到 platform
标签中,Phonegap Build 工作正常。
尝试跟上文档。密度在 end.exmpl:
中声明<platform name="android">
<splash src="res/screen/android/screen-hdpi-landscape.png" density="land-hdpi" />
<splash src="res/screen/android/screen-ldpi-landscape.png" density="land-ldpi" />
<splash src="res/screen/android/screen-mdpi-landscape.png" density="land-mdpi" />
<splash src="res/screen/android/screen-xhdpi-landscape.png" density="land-xhdpi" />
<splash src="res/screen/android/screen-hdpi-portrait.png" density="port-hdpi" />
<splash src="res/screen/android/screen-ldpi-portrait.png" density="port-ldpi" />
<splash src="res/screen/android/screen-mdpi-portrait.png" density="port-mdpi" />
<splash src="res/screen/android/screen-xhdpi-portrait.png" density="port-xhdpi" />
</platform>
这是我工作的一部分 config.xml,
由于构建过程中的错误,src 也可能是“www/.../...”,只有根项目文件夹。查看构建是否通过的方法 platforms/android/res/multipleFolders--> 应该充满 screensplash img 的文件夹,这些文件夹不是您手动添加的。