当我们用ionic创建好app后,默认的logo及spash页面均是cordova的图标,显的不太好看,如何使用自己的icon和splash页呢?
1、icon生成
- 生成一个192*192px的logo,保存为icon.png,icon.ai或icon.psd(只支持这三种格式),图片不要有圆角(每个平台会自己给图片加效果,如ios会自动给logo加圆角效果)。
- 在ionic的根目录下有一个resources的目录,将icon的图片放在这个目录下。
- 运行命令,生成不同平台的icon。
运行命令后,会发现生成了一系列的不同尺寸的图片,并且在config.xml中会有想应的配置。$ ionic resources --icon
2、splash页面
- 生成一张2208x2208 px的splash图片,保存为splash.png, splash.ai或splash.psd。
- 在ionic的根目录下有一个resources的目录,将icon的图片放在这个目录下。
- 运行命令,添加splash的plugin
$ ionic plugin add https://github.com/apache/cordova-plugin-splashscreen.git
- 运行命令,生成不同平台的splash
运行命令后,会发现生成了一系列的不同尺寸的图片,并且在config.xml中会有想应的配置。$ ionic resources --splash
注:直接运行ionic resources 会自动处理icon和splash图片,这样可以方便很多
3、针对不同的平台配置
上述的icon和splash的配置对是针对所有平台的,如果你想针对ios, android等使用不同的配置,可以发现resource目录下有相应的ios/和android/的目录,将前文中的icon和 splash放置于相应的目录,再运行ionic resources命令即可。
作者:不鲲
链接:http://www.jianshu.com/p/eda363eb28d3
相关推荐
Angular-ionic-native-http-connection-backend.zip,离子型和iosionic本机http连接后端cors问题的解决方案,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular...
"ionic-datepicker-oysq"是一个专为Ionic框架设计的日期选择器插件,它使得在Ionic应用中集成日期选择功能变得更加简单和高效。 Ionic是一款基于AngularJS的开源框架,用于构建跨平台的混合移动应用。它提供了丰富...
【压缩包子文件的文件名称列表】"ionic-app-base-master" 是解压缩后的目录名,根据标准的 Ionic 项目结构,我们可以推测其中可能包含以下关键文件和目录: 1. `config.xml`:应用配置文件,定义应用的元数据、权限...
使用 "ionic-cz-conventional-changelog",开发者可以轻松地通过命令行生成符合标准的 changelog 文档,避免手动编写带来的繁琐和错误。这不仅可以提高工作效率,也有利于团队协作,因为每个成员都能遵循相同的提交...
这个压缩包文件名为"ionic-cordova-demo-master.zip",暗示它包含了一个基于Ionic和Cordova框架的演示应用程序的源代码。 Ionic是一款流行的开源框架,用于构建高性能的混合移动应用,而Cordova则是一个移动应用开发...
该库添加@ionic-native/http (如果可用)作为与Angular的Http和HttpClient的连接后端 动机 现在,Apple促进/要求使用WKWebView而不是不推荐使用的UIWebView ,Ionic已通过其切换了新创建的应用程序(而Cordova通过...
1、解决ionic 在线生成icon和splash缓慢或失败问题,代码基于photoshop的脚本。代码中有详细的注释,看懂后玩去哪可以自定义尺寸或进行更深层次的研究学习。 2、需要预装photoshop 3、具体使用方法资源中有readme...
Angular-ionic-forms-and-validations.zip,使用这个Ionic示例应用程序学习如何处理Ionic 3和Angular 4中的表单和验证。在这个精彩的教程中,我们将介绍简单的和自定义的验证,并教您如何处理错误消息。,Angularjs于...
Splash Screen $ ionic cordova插件添加cordova-plugin-splashscreen $ npm install --save @ ionic-native / splash-screen 状态栏$ ionic cordova插件添加cordova-plugin-statusbar $ npm install --save @ ...
ionic-ion-swipe-cards, 基于Swipeable卡的离子和 Angular 布局 Ionic: Swipeable卡基于Swipeable卡的离子和 Angular 布局。 如果冻应用所见。演示工具用法在你的离子和 Angular的剩余部分包含 ionic.swipecards.js ...
ionic-shopping-cart-2, 离子cordova购物车应用 购物车更新( 10-07-2016 )FoodKart v0.3 已经发布。 在这里阅读完整的教程系列。 FoodKart v0.2 FoodKart是一个简单的食品购买应用,构建在 HTML5 - Cordova 。 因为
ionic1 嵌套路由,用ion-nav-bar和ion-view来实现页面回退,导致不能个性化的设置导航右侧按钮,这个指令基于angular1实现个性化定制右侧按钮,
Angular-ionic3-start-theme.zip,Ionic3的开始主题有10个页面、模拟数据、提供者示例、存储、HTTP等…Ionic3的开始主题,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖...
这是一个节点模块,可以像这样自动调整大小和 9-patch ionic 项目的 splash.png。 依赖关系 junkoro/four-sides-1px-9patcher - 这取决于节点画布。 Automattic/node-canvas - 安装节点画布有点困难。 这是在...
离子vue分屏-vuex分支查看更新的代码-https: Ionic Vue Web组件-分屏又称SideMenu 5月20日更新-ionic...vue-router而不是router-vue 使用添加简单的身份验证示例进行状态管理修改以使用ionic / cli命令跑步ionic serve
- **添加平台**:使用`ionic platform add`命令为项目添加目标平台(如iOS、Android)的支持。 - **运行应用**:通过`ionic serve`或`ionic run`命令在浏览器或设备上预览应用。 - **更新应用**:随着Ionic版本的...
"ionic-sublime-plugin"的主要功能是提供对Ionic框架的智能提示和代码补全,它极大地简化了编写和理解AngularJS与Ionic组件的过程。 在使用"ionic-sublime-plugin"时,开发者可以期待以下几点核心功能: 1. **智能...