开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在没有photoshop知识的情况下创建简单的闪屏( Ionic/Cordova )

在没有Photoshop知识的情况下，可以使用Ionic/Cordova框架来创建简单的闪屏。Ionic是一个基于HTML、CSS和JavaScript的开源移动应用开发框架，而Cordova是一个用于构建移动应用的开源平台。

以下是创建简单闪屏的步骤：

准备闪屏图片：首先，你需要准备一张符合要求的闪屏图片。图片的尺寸应该适配不同的设备屏幕大小，通常建议使用高清图片，并且尽量避免在图片上添加过多的文字或细节。
添加闪屏配置：在Ionic/Cordova项目的根目录下，找到config.xml文件。在该文件中，你可以添加闪屏配置信息。例如，你可以指定闪屏图片的路径、延迟时间等。以下是一个示例配置：

<platform name="android">
    <splash src="resources/android/splash.png" density="land-hdpi"/>
    <splash src="resources/android/splash.png" density="land-ldpi"/>
    <splash src="resources/android/splash.png" density="land-mdpi"/>
    <splash src="resources/android/splash.png" density="land-xhdpi"/>
    <splash src="resources/android/splash.png" density="land-xxhdpi"/>
    <splash src="resources/android/splash.png" density="land-xxxhdpi"/>
    <splash src="resources/android/splash.png" density="port-hdpi"/>
    <splash src="resources/android/splash.png" density="port-ldpi"/>
    <splash src="resources/android/splash.png" density="port-mdpi"/>
    <splash src="resources/android/splash.png" density="port-xhdpi"/>
    <splash src="resources/android/splash.png" density="port-xxhdpi"/>
    <splash src="resources/android/splash.png" density="port-xxxhdpi"/>
</platform>

生成闪屏资源：在Ionic/Cordova项目的根目录下，运行以下命令来生成闪屏资源：

ionic cordova resources

该命令将自动生成适配不同设备的闪屏资源，并将其放置在相应的平台目录下。

构建应用程序：使用Ionic/Cordova提供的构建命令，将应用程序打包成可安装的文件。例如，对于Android平台，可以运行以下命令：

ionic cordova build android

安装应用程序：将生成的应用程序文件安装到目标设备上进行测试。

通过以上步骤，你可以在没有Photoshop知识的情况下，使用Ionic/Cordova框架创建简单的闪屏。请注意，以上步骤仅提供了基本的操作流程，实际操作中可能会有一些细节和特殊情况需要处理。如果需要更详细的指导或了解更多相关信息，建议参考Ionic和Cordova的官方文档。

腾讯云相关产品和产品介绍链接地址：

腾讯云移动开发平台：https://cloud.tencent.com/product/mpp
腾讯云移动应用分发：https://cloud.tencent.com/product/mppd
腾讯云移动测试服务：https://cloud.tencent.com/product/mts
腾讯云移动推送服务：https://cloud.tencent.com/product/tpns
腾讯云移动直播服务：https://cloud.tencent.com/product/mlvb
腾讯云移动智能硬件解决方案：https://cloud.tencent.com/solution/iot

相关搜索:0.005%的用户在闪屏后Ionic应用程序卡住使用用于cordova的闪屏插件创建的Splashscreen在Visual Studio 2015中不显示在ionic 3中的闪屏期间更改状态栏颜色如何在没有XCode的情况下在Flutter IOS中更改闪屏 react-native在创建闪屏时显示意外的标记如何在没有Javascript的情况下创建简单的浮动按钮我是使用java在android studio上创建应用的新手。我正在创建闪屏，但没有像我预期的那样工作有没有办法在使用排毒的react native中测试闪屏的发生？在没有外部库的情况下在C#中播放动态创建的简单声音创建Photoshop插件-尝试在javascript函数中找到源文件的更简单方法如何在不使用任何其他库和插件的情况下在react导航中创建闪屏 IONIC 4+电容器:如何在没有ionic native的情况下从github安装cordova插件(步进计数器)？这个简单的程序在没有明显原因的情况下冻结在没有模型的情况下将简单的表单操作设为url 在Android 12中有没有可能得到一个未裁剪的闪屏？有没有简单的方法在C#中创建序数？如何在没有外部模块的情况下使用nodejs成功创建简单表单在没有COM Interop的情况下创建.msg文件在没有ExecutorService或FutureTask的情况下创建未来在没有循环的情况下从dataframe创建字典

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

用Ionic开发hybrid APP

使用phonegap开发APP的优劣在此不必细说，快速，简单，跨平台，以及随着iOS，Android本身对webview优化所带来的不错的性能，便是其独有的优势。而且私以为在目前激烈而又变化快速的移动APP市场环境下，用phonegap来开发APP未尝不是一种低成本mvp的方案，快速发布，成王败寇^-^

01

【开发指南】（四）Ionic3快速上手并了解这些

Ionic这几个网站是需要经常看的，应该了解过才执行后面步骤，其中强烈要求至少先撸一遍官网的组件和API文档。

02

【初探IONIC】不会Native可不可以开发APP？

前言 Hybrid技术流行已经有一段日子了，楼主的关注点也一直围绕着移动端围绕着Hybrid相关展开，Hybrid已经是大大提升开发效率的开发方式了，但是仍然需要至少一个IOS与Andriod，那么可不可以只使用H5相关的知识就能做一个APP出来呢？答案是可以的。什么是cordova？ cordova为一移动开发框架，他让我们可以仅仅专注前端代码，然后通过一个开发框架编译形成一个可安装的APP，因为前端代码的特性，所以这种APP是跨平台的，可以最大程度的提升开发效率，因为只需要前端人员，其成本节约也是不可

08

Ionic vs React Native: 移动开发哪家强？

选择合适的平台是开发人员在创建移动应用程序时面临的主要问题之一。据统计，iOS 和 Android 两大巨头已经有超过了十年的竞争。为了从软件开发的预算效益和时间效益的角度来寻求两个平台之间的妥协，引入了混合和跨平台的框架。讨论这个主题时，首先想到的两个框架是Ionic和React Native，他们提供了一个解决问题的先进方案，还提供了易于获取的技术支持。简要介绍框架在开始分析和比较这两个框架的关键特性之前，让我们分别看一下每个框架。 Ionic：Ionic Framework 早在 2015 年就

05

使用Ionic3创建原生app系统入门

地址：https://services.gradle.org/distributions/

04

构建具有用户身份认证的 Ionic 应用

使用 Okta 和 OpenID Connect (OIDC)，可以很轻松的在 Ionic 应用中添加身份认证，完全不需要自己实现。 OIDC 允许你直接使用 Okta Platform API 进行认证，本文的目的就是告诉你如何在一个 Ionic 应用中使用这些 API。我将演示如何使用 OIDC 重定向、Okta 的 Auth SDK 以及基于 Cordova 内嵌浏览器的 OAuth 进行登录；由于功能还在开发中，所以省略了用户注册。

00

Ionic3 开发流程

简单介绍自己使用Ionic3开发的过程，涉及到的知识点如下： Angular Ionic Cordova ES6 TypeScript Scss 环境搭建引用插件调试 Android打包 Android签名 IOS打包

03

构建具有用户身份认证的 Ionic 应用

序言：本文主要介绍了使用 Ionic 和 Cordova 开发混合应用时如何添加用户身份认证。教程简易，对于 Ionic 入门学习有一定帮助。因为文章是去年发表，所以教程内关于 Okta 的一些使用步骤不太准确，但是通过 Okta 的官网也可以找到对应的内容。另外，使用 npm 安装 Ionic starter 模板可能会有安装失败的情况，建议不要在这方面浪费太多时间，可以直接在 Ionic 的 GitHub 仓库中下载 starter 模板。原文：How to Sprinkle ReactJS i

05

Mobile first! Wijmo 5 + Ionic Framework之：Hello World！

本教程中，我们用Wijmo 5 和 Ionic Framework实现一个Mobile的工程:Hello World。 Ionic是什么？ Ionic是一个HTML5框架、免费、开源，用于帮助生成hybird mobile Apps (混合移动应用)。 Ionic包含3部分： CSS 样式：用于渲染Web页面，使得页面更接近原生移动应用 (Native App)。 AngularJS：Ionic使用AngularJs的扩展指令作为核心框架库，同时AngularJs也加快了开发过程。 Apache Cordo

06

Cordova插件须知

ionic可以很方便的安装cordova插件，最新ionic-cli要求cordova插件里面有package.json和plugin.xml才能安装成功，如果缺失，请自行补上，而原来旧的cli不要求package.json文件（插件目录里的，不是ionic项目里的）。

03

【风雨欲来的Hybird】（1）Capacitor——为了原生，RN、NS、Weex的下一个强劲对手

其实Capacitor是ionic4的衍生品，如果说Stencil是跨框架组件开发，那Capacitor就是跨平台原生封装。为解决Webview的渲染性能瓶颈，相对于Cordova，原理应该和RN差不多的，页面使用原生渲染，但比RN更接近Web的开发方式，且多了对Cordova的兼容。

04

ionic 中 cordova-plugin-inappbrowser组件的使用

在上一篇文章中（使用Ionic3创建原生app系统入门）介绍了如何使用ionic构建一个Android app 项目,并生成apk安装包。

02

Ionic3 Start

本文是Ionic3系列的第一排你文章，主要介绍开发环境的搭建过程，之后的文章将依赖此应用，不再涉及到环境搭建方面的内容(除非是添加特性)，Ionic官方文档： ionic官网 ionic官方文档

02

几个跨平台移动App开发方案框架比较

根据一些老博客里面的内容，现在整理一下目前流行的跨平台移动App开发技术的特点，并将几个不同的开发平台框架进行比较说明，仅供大家参考。

02

SNS项目笔记<一>--项目启动

在新版本下，ionic得到的健硕性的更新，angular却减少了自己的体积，正所谓：“ionic吃好了，angular减肥了”于是我们也可以抛弃以前的一些坑，直接进入流畅性的操作了。

02

【技巧】ionic3优雅解决启动前、后黑白屏问题

启动前黑白屏问题，仅存在于android，是android应用的通病，ionic表示这锅它不背。具体操作时，当我们点击桌面图标启动APP时，有时会闪一下黑色背景，有时黑色背景时间还比较长。原因是：

06

IonicHybrid跨终端应用程序开发方案研究

08

IonicHybrid跨终端应用程序开发方案研究

ionic是最近一个很流行的Hybird移动开发解决方案，个人兴趣研究了一下，还是不错的 https://github.com/driftyco/ionic

01

【开发指南】（六）Ionic3从目录结构理解开发

对比目前其它流行的js框架，个人觉得其分工明确、清晰好理解，我觉得就算一开始头脑一遍空白的新手，对他讲解过一次后都能有个大致印象。

01

写给前端工程师看的，移动应用选型指南

想来在这一个混合应用的项目上，我已经差不多做了一年了。加之，在上一个项目里，我做的是一个移动 Web 应用，从 Backbone 到设计基于 React 的原型，也积累了一定的移动开发经验。与别人谈起移动应用的时候，作为一个前端开发人员，我总会有一些疑惑？你说的移动应用到底是指什么？针对移动设备的 Web 应用针对移动设备的 APP 应用这两者都可以称作是移动应用。可这到底是我对于它们的分类，对于不同的人来说，又有不一样的分法。如，对于移动 APP 应用来说，如果是使用 HTML + JavaScr

06

自定义Cordova插件详解

在混合式应用中，我们通过现有的Cordova插件，可以轻松的在 H5 上调用手机native的功能。现有的Cordova插件能满足平时大部分的开发需求，然而，有时候找不到合适的插件、或对找到的插件有不满意的地方，那就要动手去做或改写一个插件，这时候就要了解一些Cordova插件的相关知识。

03

ionic2 编译打包的坑，

Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper. Please include gradle in your path, or install Android Studio

03

搭建Cordova开发环境

本文介绍了如何搭建Cordova开发环境，并重点介绍了Ionic框架的概念以及如何使用Cordova和Ionic创建移动应用。

07

开发hydride App 安装ionic

第一次安装的时候碰到各种麻烦后来联系安装几台电脑就觉得不是那么麻烦主要是需要安装的东西太多，另外网速一定要好，

07

【Weex一瞥笔记】

安装结束后你可以直接使用 weex 命令验证是否安装成功，它会显示 weex 命令行工具各参数：

03

Ionic！用Web技术开发移动应用！

Ionic 通过整合各种技术和功能使构建Hybrid 应用更加快速、容易和美观。Ionic 的生态系统基于Angular 和Cordova，前者是Web 应用框架，后者是构建和打包原生应用的工具。

02

【开发指南】（一）Ionic3开发环境配置常规ionic的环境搭建如下：

工欲善其事，必先利其器，搭好环境是开发的前提，有时环境没弄好，不时报错往往很扎心。

03

ionic和cordova初探--从安装到运行首个app

好多人说ionic好用，一直要推荐我用，我就不信了，来安装玩一下试试效果。实践出真知！安装过程各种坑，工具太多了，太麻烦了，差点放弃（还好坚持下来呢）。

01

Ionic3学习笔记（一）安装、项目结构与常用命令

创建一个新项目，有blank、tabs、sidemenu3种样式可选，tutorial、super、conference为官方Demo，aws为AWS Mobile Hub Demo

02

我们是如何将 Cordova 应用嵌入到 React Native 中

重写一个应用是一件简单的事，可是演进一个应用则是一件复杂的工作。过去的一年多里，我在工作上的主要职责是：手机 APP 开发。日常主要是编写基于 Ionic 和 Angular 的混合应用，并想方设法地帮助客户将之与 React Native 相结合。在完成了嵌入 WebView 后，重写插件等一系列工作后，便想记录一下这个过程中遇到的坑。平滑地演进如我在开头所说，在有足够人力和物力的情况下，最好的方式就是在重写应用。一来，应用在其生命周期里，经过了不同的开发人员、不同的业务变更，必然有大量的遗留代码

06

RSSHelper正式开源

试过一些RSS订阅app，有些重要源无法解析，例如FEX周刊、奇舞周刊、国外站点等等。另外，对于没有提供RSS的网页，也没有办法订阅，所以决定自己搓一个：

05

Windows下Ionic 开发环境搭建

Ionic 是一款基于 Cordova 及 Angular 开发 Hybrid/Web APP 的前端框架，类似的其他框架有：Intel XDK等。

03

开发Hybrid App的技术选型

如果我们把Hybrid App理解为运行在android或者ios以及其他移动终端设备上的应用，也可以叫做H5 APP，这种开发应用的模式结合web开发技术与Native开发的部分技术，通常也被称为混合开发模式。

03

Ionic安装环境安装关于墙国环境创建Ionic项目测试运行项目

环境安装先安装Node.js，网址 www.nodejs.org 下载地址是：https://nodejs.org/en/download/current/，如果不是请自行在官网上查找。安装一路

04

Ionic3 拍照上传

本文主要介绍使用cordova实现拍照上传，走通 “拍照》预览》上传》下载 ”这个流程。为了方便查看测试结果，需要了解Ionic应用调试的基本方法，有关于Ionic项目Android 调试的详细教程，请参考以下文章：Ionic3 Android调试

03

混合手机app开发之Ionic篇

本次使用的是Ionic3，之前本想用最新的ionic5 使用ionic build后发现，我使用的X5内核不能正常浏览，使用ionic3没有任何问题。本次我不使用cordova来打包，这次我将要完成的任务是：

02

ionic2 常用命令行

比如我们通过命令行创建一个页面。 ionic g page myPage 之后就会生成如下三个文件：

03

实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目

系列文章实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端

08

Ionic 2 应用剖析0 开始之前1 创建一个新的Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结

0 开始之前通过本教程之前,您应该至少了解一些基本的Ionic 2概念。您还必须已经安装了Ionic 2 在您的机器上。 1 创建一个新的Ionic 2 应用我们将使用有Ionic团队创建的tutorial模板，可见于官方教程，来创建我们的应用程序。要做到这一点，您需要运行以下命令： ionic start ionic2-tutorial tutorial --v2 现在您的应用程序将自己开始建立。为运行后续的命令，你应当将项目目录作为当前工作目录： cd ionic2-tutorial 简单瞟一眼应用

05

Ionic2 坑の补充

写在前面的话：

最近把玩了微信小程序过后，由于对它专属的IDE使用不当，导致在退出关闭计算机的时候没有及时清理缓存，造成缓存碎片留藏在硬盘的分页文件内，导致硬盘无法reboot，最终开不了机器，一直蓝屏，所以很是郁闷的重装了系统，从新搭建了环境进行配置ionic，于是又发现了些许坑。【注：博主这次使用的是国内镜像】

1、ionic2创建项目的坑：

这是在使用ionic start xxx --v2 的时候下载好对应的目录的同时，在项目建成的最后，会显示如下的错误提示：

02

ionic2 （真正）修改应用图标和启动画面

今天在用ionic2 的ionic resources生成新的icon和splash，生成后安装，应用图标和启动画面依然没变化。。。不知道大家有没有被坑过，今天被坑了一下午，终于找到了办法：解决方法第一次使用ionic resources后根文件夹下会生成一个res文件夹，比如你的项目文件夹名是demo，那么就是demo/res文件夹。将res中的所有文件夹复制到demo\platforms\android\res下，res里面的同名文件夹覆盖（注意：保留该文件夹下原本的values文件夹和xml文

06

Ionic3 Android调试

本文主要介绍将Ionic项目打包成安卓应用之后的调试过程，调试方式分两种：模拟器调试、真机调试。不过在此之前，必须要将ionic项目成功打包成Android应用，有关 ionic打包成Android应用的具体教程，请参考以下文章： Ionic3 Android打包

04

Ubuntu 16.04搭建ionic开发环境

前端开发框架ionic，以假乱真的页面和流畅的运行速度直逼原生应用，让你情不自禁的爱上了她，下面来简单介绍下ionic。

01

Ionic3学习笔记（十三）HttpClient 实现 HTTP 请求以及踩过的一些坑

当然是基于这篇古老的文章啦 ==> http://www.jianshu.com/p/9855610eb1d4 因为是2015年的文章，已经时隔2年多，很难确保API仍可使用，所以我亲自进行了抓包，发现没毛病还能用，并且还多发现了2个接口，现整理如下：

01

【技巧】Ionic3多文件上传

文件上传，我们一般需要和本地文件打交道，先安装file插件（全称cordova-plugin-file）,

04

Cordova插件扩展——ImagePicker中文支持

https://github.com/Telerik-Verified-Plugins/ImagePicker

04

最流行的编程语言JavaScript能做什么？

首先很遗憾的一点是，“PHP虽然是最好的语言”，但是它不是最流行的语言。对不起的还有刚刚在4月TIOBE编程语言排行榜上榜的各个语言：你们都很棒，但是你们都担当不了这个大任。开始之前，我先说一

08

ionic hybrid app：产品还是玩具？

08

移动端app开发，框架的选择。

IONIC 是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScript MVVM框架和 AngularJS来增强应用。提供数据的双向绑定，使用它成为Web和移动开发者的共同选择。即将发布的AngularJS 2.0将会专注于移动开发，相信IONIC一定会取得不错的成就。 Mobile Angular UI

01

ionic hybrid app：产品还是玩具？

提到跨终端应用开发，很容易想到最近很火的React Native。使用React Native开发出的APP本质上是Native APP。在跨端应用开发这一领域内还有另一块：Hybrid APP。本文研究的inoic framework就是一种hybrid app的开发框架。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭