`
wxinpeng
  • 浏览: 590964 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

ionic添加icon和splash--转载

阅读更多

当我们用ionic创建好app后,默认的logo及spash页面均是cordova的图标,显的不太好看,如何使用自己的icon和splash页呢?

1、icon生成

  1. 生成一个192*192px的logo,保存为icon.png,icon.ai或icon.psd(只支持这三种格式),图片不要有圆角(每个平台会自己给图片加效果,如ios会自动给logo加圆角效果)。
  2. 在ionic的根目录下有一个resources的目录,将icon的图片放在这个目录下。
  3. 运行命令,生成不同平台的icon。
    $ ionic resources --icon
    运行命令后,会发现生成了一系列的不同尺寸的图片,并且在config.xml中会有想应的配置。

2、splash页面

  1. 生成一张2208x2208 px的splash图片,保存为splash.png, splash.ai或splash.psd。
  2. 在ionic的根目录下有一个resources的目录,将icon的图片放在这个目录下。
  3. 运行命令,添加splash的plugin
    $ ionic plugin add https://github.com/apache/cordova-plugin-splashscreen.git
  4. 运行命令,生成不同平台的splash
    $ ionic resources --splash
    运行命令后,会发现生成了一系列的不同尺寸的图片,并且在config.xml中会有想应的配置。

注:直接运行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

    Angular-ionic-native-http-connection-backend.zip,离子型和iosionic本机http连接后端cors问题的解决方案,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular...

    ionic-datepicker-oysq

    "ionic-datepicker-oysq"是一个专为Ionic框架设计的日期选择器插件,它使得在Ionic应用中集成日期选择功能变得更加简单和高效。 Ionic是一款基于AngularJS的开源框架,用于构建跨平台的混合移动应用。它提供了丰富...

    ionic-app-base-master.zip

    【压缩包子文件的文件名称列表】"ionic-app-base-master" 是解压缩后的目录名,根据标准的 Ionic 项目结构,我们可以推测其中可能包含以下关键文件和目录: 1. `config.xml`:应用配置文件,定义应用的元数据、权限...

    前端开源库-ionic-cz-conventional-changelog

    使用 "ionic-cz-conventional-changelog",开发者可以轻松地通过命令行生成符合标准的 changelog 文档,避免手动编写带来的繁琐和错误。这不仅可以提高工作效率,也有利于团队协作,因为每个成员都能遵循相同的提交...

    ionic-cordova-demo-master.zip

    这个压缩包文件名为"ionic-cordova-demo-master.zip",暗示它包含了一个基于Ionic和Cordova框架的演示应用程序的源代码。 Ionic是一款流行的开源框架,用于构建高性能的混合移动应用,而Cordova则是一个移动应用开发...

    ionic-native-http-connection-backend:Ionic和iOS的CORS问题的解决方案

    该库添加@ionic-native/http (如果可用)作为与Angular的Http和HttpClient的连接后端 动机 现在,Apple促进/要求使用WKWebView而不是不推荐使用的UIWebView ,Ionic已通过其切换了新创建的应用程序(而Cordova通过...

    ionic icon/splash离线裁剪

    1、解决ionic 在线生成icon和splash缓慢或失败问题,代码基于photoshop的脚本。代码中有详细的注释,看懂后玩去哪可以自定义尺寸或进行更深层次的研究学习。 2、需要预装photoshop 3、具体使用方法资源中有readme...

    Angular-ionic-forms-and-validations.zip

    Angular-ionic-forms-and-validations.zip,使用这个Ionic示例应用程序学习如何处理Ionic 3和Angular 4中的表单和验证。在这个精彩的教程中,我们将介绍简单的和自定义的验证,并教您如何处理错误消息。,Angularjs于...

    word-puzzle:一个简单的Ionic 3 Puzzle游戏应用程序

    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 布局.zip

    ionic-ion-swipe-cards, 基于Swipeable卡的离子和 Angular 布局 Ionic: Swipeable卡基于Swipeable卡的离子和 Angular 布局。 如果冻应用所见。演示工具用法在你的离子和 Angular的剩余部分包含 ionic.swipecards.js ...

    ionic-shopping-cart-2, 离子cordova购物车应用.zip

    ionic-shopping-cart-2, 离子cordova购物车应用 购物车更新( 10-07-2016 )FoodKart v0.3 已经发布。 在这里阅读完整的教程系列。 FoodKart v0.2 FoodKart是一个简单的食品购买应用,构建在 HTML5 - Cordova 。 因为

    ionic配合ion-nav-bar的导航右侧按钮指令

    ionic1 嵌套路由,用ion-nav-bar和ion-view来实现页面回退,导致不能个性化的设置导航右侧按钮,这个指令基于angular1实现个性化定制右侧按钮,

    Angular-ionic3-start-theme.zip

    Angular-ionic3-start-theme.zip,Ionic3的开始主题有10个页面、模拟数据、提供者示例、存储、HTTP等…Ionic3的开始主题,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖...

    make-9patched-splash-ionic:在 ionic 项目中,自动调整大小和 9-patch splash.png

    这是一个节点模块,可以像这样自动调整大小和 9-patch ionic 项目的 splash.png。 依赖关系 junkoro/four-sides-1px-9patcher - 这取决于节点画布。 Automattic/node-canvas - 安装节点画布有点困难。 这是在...

    ionic-vue-split-screen:Ionic Vue Web组件-分屏又称SideMenu

    离子vue分屏-vuex分支查看更新的代码-https: Ionic Vue Web组件-分屏又称SideMenu 5月20日更新-ionic...vue-router而不是router-vue 使用添加简单的身份验证示例进行状态管理修改以使用ionic / cli命令跑步ionic serve

    EXPERT-Building-Mobile-Apps-with-Ionic-2

    - **添加平台**:使用`ionic platform add`命令为项目添加目标平台(如iOS、Android)的支持。 - **运行应用**:通过`ionic serve`或`ionic run`命令在浏览器或设备上预览应用。 - **更新应用**:随着Ionic版本的...

    ionic sublime 2/3 提示插件 ionic-sublime-plugin

    "ionic-sublime-plugin"的主要功能是提供对Ionic框架的智能提示和代码补全,它极大地简化了编写和理解AngularJS与Ionic组件的过程。 在使用"ionic-sublime-plugin"时,开发者可以期待以下几点核心功能: 1. **智能...

Global site tag (gtag.js) - Google Analytics