当我们用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-app-base-master.zip
这是一个封装好的ionic日期选择器,下载解压,点击date.html即可查看效果。
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 。 因为
前端开源库-ionic-cz-conventional-changelog离子cz传统的changelog,commitzen适配器遵循传统的changelog格式。
ionic1 嵌套路由,用ion-nav-bar和ion-view来实现页面回退,导致不能个性化的设置导航右侧按钮,这个指令基于angular1实现个性化定制右侧按钮,
Angular-ionic3-start-theme.zip,Ionic3的开始主题有10个页面、模拟数据、提供者示例、存储、HTTP等…Ionic3的开始主题,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖...
离子液体超声辅助液液分散微萃取检测家畜血液及尿液中的杀螨剂,张嘉恒,李林霞,本文建立了简便、高效的离子液体超声辅助液液分散微萃取(UA IL-DLLME )-高效液相色谱检测家畜(猪和牛)血液及尿液中的杀螨剂残留...
这是一个节点模块,可以像这样自动调整大小和 9-patch ionic 项目的 splash.png。 依赖关系 junkoro/four-sides-1px-9patcher - 这取决于节点画布。 Automattic/node-canvas - 安装节点画布有点困难。 这是在...
该库添加@ionic-native/http (如果可用)作为与Angular的Http和HttpClient的连接后端 动机 现在,Apple促进/要求使用WKWebView而不是不推荐使用的UIWebView ,Ionic已通过其切换了新创建的应用程序(而Cordova通过...
离子vue分屏-vuex分支查看更新的代码-https: Ionic Vue Web组件-分屏又称SideMenu 5月20日更新-ionic...vue-router而不是router-vue 使用添加简单的身份验证示例进行状态管理修改以使用ionic / cli命令跑步ionic serve
"Learn Ionic 2: Develop Multi-platform Mobile Apps" English | ISBN: 148422616X | 2017 | 105 pages | PDF | 3 MB Explore key scenarios required for building quality Ionic apps quickly and easily and ...
ionic-contrib-frosted-glass, iOS 7风格的离子应用可选磨砂玻璃效果 离子磨砂玻璃iOS 7风格的离子应用可选磨砂玻璃效果。这里是演示。要使用,请在应用程序中包含 ionic.contrib.frostedGlass.css 和 ionic.contrib...
ionic插件添加 ionic添加ngCordova ionic添加ionic-service-core ionic添加ionic-service-push ionic添加angular-websocket ================================================== ===============================...
离子3分体式演示 这是此的随附代码,并演示了如何使用ionics拆分窗格组件创建主从应用程序。 开始使用 抓取代码,然后...... npm install -g cordova ionic cd [ionic-split-pane-directory] npm i ionic serve