|
Post by account_disabled on Jan 31, 2024 9:17:16 GMT
Ionic 是一个非常有用的框架,用于构建 HTML5 混合移动应用程序。这是创建 移动应用程序的一个很好的起点。它提供了可重用且适应性强的通用移动应用程序组件。Ionic 还提供了一个非常有用的 CLI(命令行界面),可让您轻松创建、编译、运行和导出移动应用程序。它不断添加新功能,使其超越前端框架。在构建本机应用程序或响应式 Web 应用程序之前需要组合原型吗?Ionic 也是原型的绝佳选择。 在这篇文章中,我想概述我发现的一些最有用的东西。我希望它可以帮助新开发人员更快地启动和运行自己的应用程序。 这些指南假设您已经在 CLI 中启动并运行了一个项目。我们将使用 Ionic“入如果您从头开始,这绝对是最好的方法。您将可以访问所有 Ionic CLI 功能及其核心起始模板。 我自定义样式的最佳位置在哪里? 我在项目结构中尝试了一些想法,寻找最佳方法。一个对于我自己的扩展项目来说是干净的,但也可以与 ionic Gulp 设置一起使用。我不想不必要地更改默认的 Ionic Gulp 文件。 只是将样式放在 www 中吗? 您可能很容易急于将新的 scss 文件放入www某个文件夹中。在 Ionic 样式的代码附近,然后在 .css 文件中添加对 CSS 文件的引用index.html。避免这种情况!它与 Ionic Gulp 设置的配合不太好。最好不要在里面添加东西。 更好的方法 - 将 WhatsApp 号码数据 样式添加到 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 文件中。您应该在此处放置所有页面特定样式。
|
|