5 Ionic框架应用程序开发技巧

Ionic是一个非常有用的框架，用于构建HTML5混合移动应用程序。这是创建Cordova/Phonegap移动应用程序的一个很好的起点。它提供了可重用和可适应的通用移动应用程序组件。Ionic还提供了非常有用的CLI(命令行界面)，允许您轻松地创建、编译、运行和导出移动应用程序。它不断地添加新功能，使其超越了前端框架的范畴。在构建原生应用或响应式web应用之前需要整合原型?Ionic也是一个很好的原型选择。

在本文中，我想概述一下我发现的一些最有用的东西。我希望它能帮助新开发人员更快地安装和运行他们自己的应用程序。

这些指南假设您已经在CLI中启动并运行了一个项目。我们将使用Ionic“入门”页面上的一个模板。例如,离子启动myApp空白．如果你从头开始，这绝对是最好的方法。您将可以访问Ionic CLI的所有功能及其核心启动模板。

我将从几乎每个应用程序都想做的事情开始——自定义。

我在爱奥尼亚1的定制风格最好的地方在哪里?

我在项目结构中尝试了一些想法，以寻找最佳方法。一个将是干净的，我自己的扩展项目，但也将与离子Gulp设置工作。我不想不必要地更改默认的Ionic Gulp文件。

只是把样式放在www?

可能很容易匆忙地把新的scss文件扔到www文件夹。样式的代码附近，然后添加对CSS文件的引用index . html．避免这种情况!它在爱奥尼亚式吞咽器的设置下不太好用。最好不要在里面添加东西。

一个更好的方法-在ionic.app.scss中添加样式

在名为/ scss，你应该找一个ionic.app.scss文件。这是主要的SASS文件，为你的应用程序编译所有的样式。这是Ionic的Gulp设置将引用。希望您的代码能够正常工作并与其他所有内容一起编译，包括实时刷新?的ionic.app.scss文件是自解释的。您可以在这个文件的末尾添加大量的新样式。这将工作得很好，小型和简单的应用程序与一些自定义。

更进一步-把你的自定义应用程序样式到他们自己的文件夹

很有可能，你的应用不会一直小而简单。它会增长，你会希望它保持在可控范围内。如果有一个开发团队参与(无论是现在还是将来)，这一点尤其正确。出于这些原因，我建议将您的自定义样式拆分为一组更整洁的文件。当我们特别覆盖Ionic本身时，这些文件应该镜像Ionic的sass文件。将这些自定义应用程序样式放到它们自己的子文件夹中。

我设置了一个文件夹，它与应用程序的名称相匹配scss文件夹中。我的自定义样式的主scss文件也与该应用程序名称相匹配。例如，一个名为蚂蚁的社交网络应用程序Antstagram会有它的风格吗scss / antstagram / antstagram.scss．在antstagram.scss，我们就会有几个@ import语句来导入我们的其他SCSS文件，如_variables.scss而且_items.scss．这是为那些与我们的Ionic框架匹配的人做的。它还与特定于我们的应用程序功能的自定义文件一起完成_antmountain.scss．说到_variables.scss，有几种方法可以覆盖Ionic的变量。我将在下一个技巧中解释这些。

Ionic 2中定制风格的最佳地点

在ionic 2中，默认文件夹结构将每个组件与其自己的SCSS文件放在一起。这是您应该放置所有页面特定样式的地方。

全局应用的自定义样式应放在app.scss文件位于src / app / app.scss

要自定义应用程序的整体主题，请编辑src /主题/ variables.scssfile．这是所有颜色变量声明的地方。的美元的主颜色是唯一需要的颜色。它是Ionic 2中用于样式按钮和其他组件的默认颜色。一个很好的方法是将颜色变量设置为设计的颜色。只要可能，就应该这样做，而不是声明自定义类。这样可以确保颜色在整个应用程序中都是一致的美元的颜色map应该只包含UI组件的变量。这里不应该放置任意颜色变量。

我如何在离子1中正确覆盖颜色变量?

Ionic设置了一组预定义的样式，供您自定义和使用。在定义大量自己的变量之前，先查看一下默认变量列表。如果它们适用于你想要的风格，就使用它们。

这些变量都方便地列在www / lib /离子/ scss / _variables.scss．对于初学者来说，在这里编辑它们很有吸引力。不要这样做!无论何时更新Ionic，您所做的更改都将被任何对Ionic变量的更新所覆盖。一般情况下，不要自定义www / lib文件夹中。让那些文件保持原样。假设这些文件是完全只读的。如果您有其他想要使用的JavaScript库，您可以添加到它们中。否则，您将希望避免在这里定制文件。

在最初的项目设置中，您应该已经拥有scss / ionic.app.scss我们之前提到过。它包含关于在哪里放置变量重写的指导。我将添加到他们的方法-我更喜欢在单独的scss文件中有变量。scss / ionic.app.scss默认情况下是这样的:

/*要自定义Ionic的外观和感觉，您可以覆盖Ionic的_variables中的变量。scss文件。例如，您可以更改一些默认颜色:$stable: #f8f8f8 !$positive: #387ef5 !$calm: #11c1f3 !$balanced: #33cd5f !$ energetic: #ffc900 !$ asserted: #ef473a !$royal: #886aea !$dark: #444 ! *///我们的ionicons字体文件的路径，相对于www/ CSS中构建的CSSionicons-font-path美元：“. . / lib /离子/字体”默认!；//包括所有Ionic@ import“www / lib /离子/ scss /离子”；

那么，为什么不只是在末尾重新声明变量呢ionic.app.scss？为什么它们都在文件的开头?这样做的原因是它们需要在离子导入之前加入。否则，ionic的默认值将覆盖您的默认值。

我推荐使用导入的方式

我的首选方法导入到一个单独的名为_variables.scss在我antstagram文件夹中。这是在从Ionic进口任何东西之前完成的。然后其余的自定义样式在Ionic之后导入到我的主要Antstagram样式中。这样他们就可以无视爱奥尼亚的风格。

@ import“antstagram /变量”；//我们的ionicons字体文件的路径，相对于www/ CSS中构建的CSSionicons-font-path美元：“. . / lib /离子/字体”默认!；//包括所有Ionic@ import“www / lib /离子/ scss /离子”；//包含Antstagram样式@ import“antstagram / antstagram；//导入除变量以外的所有内容

覆盖Ionic 2中的颜色变量

在Ionic 2中，重写颜色变量非常简单。方法中声明的变量可以进行编辑src /主题/ variables.scss文件。

我缺少一些Ionic图标字体!

如果你访问Ionicons网站并开始使用这些图标，你可能会发现你的项目中缺少一些图标。这可能是因为Ionic没有安装最新的Ionicons。前往Ionicons网站，点击下载按钮，获得最新版本。

然后，我们可以替换Ionicons字体文件www / lib /离子/字体．用下载的字体文件夹中的字体替换它们。它很简单，并将其升级到最新版本。

我们还替换了中的scss文件www / lib /离子/ scss / ionicons使用下载的SCSS文件夹中的文件。这里似乎有一个额外的scss文件用于动画-保留它，只是替换其他文件。

你可能已经注意到一些矛盾。这些文件在www / lib /离子如果我们升级Ionic，可以更改这个文件夹，对吗?在我看来，在这种情况下这是可以接受的。我们暂时将Ionicons引入最新版本，同时我们等待Ionic赶上。如果Ionic没有快速升级，你可能会失去图标。但是，Ionic的下一次升级通常也会包括最新版本的Ionicons。它还为Ionicons的未来升级留下了空间，以便在Ionic的更新中自动到达。

一旦你更新了你的字体文件，你应该能够使用你以前看不到的图标。点击问在终端中停止运行离子服务然后重新运行离子服务获取最新图标。

Ionic 2中缺少字体

要获得Ionic 2上的最新图标设置，请检查package.json。Ionic以这种方式管理Ionic的新版本。你就跑npm安装这样图标就都设置好了。只要留意新消息就行Ionicon文档因为有些名字已经改变了。

在Ionic 1上设置iOS和Android之间显示不同的图标

Ionic有几个有用的函数，您可以在代码中使用它们来检测使用哪个图标。这些包括ionic.Platform.isIOS ()，ionic.Platform.isAndroid ()而且ionic.Platform.isWindowsPhone ()．一个例子是:

var图标；如果（离子．平台．isIOS（））｛图标＝“ion-ios-arrow-back”；｝其他的如果（离子．平台．isAndroid（））｛图标＝“ion-android-arrow-back”；｝其他的｛图标＝“ion-android-arrow-back”；｝

实际上，我更喜欢做一个简单的检查。如果是iOS，则使用iOS图标，否则使用Android图标。如果您想要指定，这将不能很好地工作ionic.Platform.isWindowsPhone ()．到目前为止，Ionicons还没有Windows Phone特有的图标，所以我默认使用Android图标:

var图标＝离子．平台．isIOS（）？“ion-ios-arrow-back”：“ion-android-arrow-back”；

当这是在我将经常使用的对象中时，我将对象转换为包含此逻辑的指令。例如，一个自定义的后退按钮(替换起动器与你的模块使用的全局应用程序名称):

角．模块（“starter.directives”，［］）．指令（“backbutton”，［函数（）｛返回｛限制：“E”，取代：真正的，范围：假，模板：'，编译：函数（元素，attrs）｛var图标＝离子．平台．isIOS（）？“ion-ios-arrow-back”：“ion-android-arrow-back”；角．元素（元素［0］）．addClass（图标）；｝｝；｝］）

这就创建了一个元素

<backbuttonng-click＝＂返回()＂>backbutton>

我可以在整个应用程序中重复使用，并在一个中心位置跟上任何变化。

注意:Ionic中有一个后退按钮元素，但我喜欢为一些情况创建我自己的更简单的版本，比如自定义模态窗口。该示例也适用于您想要使用的其他按钮和图标

Ionic 2的图标显示将有所不同

Ionic的新版本将此功能内置到框架中。的ion-icon组件将根据平台动态加载正确的图标。

<！-将加载正确的图标ios和android -><ion-icon的名字＝＂啤酒＂>ion-icon>

通过指定平台版本，您仍然可以更多地控制所使用的图标。

<ion-iconios＝＂ios-beer＂医学博士＝＂md-beer＂>ion-icon>

在iOS上保持自定义标题元素一致

如果你在标题中添加一个自定义元素，就像我的自定义搜索框一样，你很快就会注意到一件事:

在iOS上，你的元素会被时间和信号强度所困:

爱奥尼亚有专门的课程来处理这个问题platform-ios而且platform-cordova．Ionic的预建元素针对的就是这些阶层。他们添加了20px的顶部边距按钮在你的标题，以弥补这些情况。为了让我自己的自定义元素做同样的事情，我遵循相同的模式。为我的.search-bar，如果我们有一个，我加一个边距.platform-ios.platform-cordova:没有(.fullscreen)身体类:

.platform-ios。platform-cordova：不（.fullscreen）.search-bar｛margin-top：20.px；｝

这个修复使我的搜索框回到线上:

结论

Ionic已经发展成为一个健壮的框架，拥有丰富的服务生态系统。希望我分享的建议能帮助那些想要开始他们自己的爱奥尼亚之旅的人!

如果你有任何自己的建议可以分享，或者可以选择其他方法来实现上述想法，请在评论中留下你的想法。

参考文献

离子的文档．
Ionicons网站
角备忘单．
Ionic 2应用程序造型．
离子2应用程序造型指南．

如果你喜欢这个，你可能想知道我们有一些很棒的在SitePoint Premium上提供移动必威西盟体育网页登录内容