ionic程序下载

by Ryan Gordon

通过瑞安·戈登(Ryan Gordon)

如何动态设置Ionic应用程序的主题并使用户满意 (How to dynamically theme your Ionic application and make your users happy)

Designing a sleek color scheme for your mobile application can be time consuming. Why not let the user choose their own favourite theme?

为您的移动应用程序设计时尚的配色方案可能很耗时。 为什么不让用户选择自己喜欢的主题？

This is one of my favorite features in apps. It provides a great experience for users who don’t want to be tied down to one primary accent color scheme or want to personalize the theme to suit their own style.

这是我在应用程序中最喜欢的功能之一。 它为不想束缚一种主要口音配色方案或个性化主题以适合自己风格的用户提供了绝佳的体验。

In this Medium post, we will work through a project which will have a number of themes the user can select at run-time just like above. When a theme is selected by the user, ideally this change should happen in real-time rather than requiring the user to reopen the app.

在这篇中篇文章中，我们将研究一个项目，该项目具有多个主题，用户可以在运行时选择它们，就像上面一样。 当用户选择主题时，理想情况下，此更改应实时发生，而不是要求用户重新打开应用程序。

安装与入门 (Installation and getting started)

Ionic, if you haven’t used it before, is a mobile application framework which lets you write mobile apps in HTML, CSS, and Typescript. With one shared codebase, you can develop an application for iOS or Android or you can deploy it as a web app.

Ionic(如果您以前从未使用过的话)是一个移动应用程序框架，可让您使用HTML，CSS和Typescript编写移动应用程序。 使用一个共享的代码库，您可以开发适用于iOS或Android的应用程序，也可以将其部署为Web应用程序。

To install Ionic, open a terminal and enter :

要安装Ionic，请打开终端并输入：

npm install -g ionic@latest

npm install -g ionic@latest

Note: you must have Node JS and npm installed. If you get an error with code ‘EACCES,’ then you may need sudo or admin privileges.

注意：您必须安装Node JS和npm 。 如果您收到代码“ EACCES”的错误，则可能需要sudo或admin特权。

For this tutorial, the sidemenu template provides a good starting point. To generate a project with this template, enter this command into the terminal:

对于本教程，sidemenu模板提供了一个很好的起点。 要使用此模板生成项目，请在终端中输入以下命令：

ionic start <name of your app> sidemenu

ionic start <name of your app> si demenu

After the project has generated, change into the directory with:

项目生成后，使用以下命令进入目录：

cd <name of your app>

cd <name of your a pp的cd <name of your a >

Now you have an Ionic project with a sidemenu and two pages ready to go! To see your creation, enter ionic serve in your terminal.

现在，您有了一个Ionic项目，其中有一个附带菜单和两页准备就绪！ 要查看您的创作，请在终端中输入ionic serve 。

设置前两个主题：Todoist Red vs Noir (Setting up the first 2 themes: Todoist Red vs Noir)

In order to set up the first two themes, we’ll need to complete a number of steps. Pretty much all of these steps need to be followed in order to get the themes working.

为了设置前两个主题，我们需要完成一些步骤。 为了使主题正常工作，几乎需要遵循所有这些步骤。

First, we need to denote an SCSS file which will be used when the theme is applied. In the src/theme directory of your project, you’ll find a variables.scss . The respective theme files are located here, too. Create a new file called:

首先，我们需要表示一个SCSS文件，该文件将在应用主题时使用。 在项目的src/theme目录中，您会找到一个variables.scss 。 各个主题文件也位于此处。 创建一个新文件，名为：

red.theme.scss

This file will be used to apply the first theme. From this file, any of the default Ionic styling can be overridden. There are two options for how we can apply the themes:

该文件将用于应用第一个主题。 从该文件，可以覆盖任何默认的Ionic样式。 有两种方法可以应用主题：

Option 1: Styling just the navbar and certain elements

选项1：仅设置导航栏和某些元素的样式

Option 2: Applying the theme to all background content

选项2：将主题应用于所有背景内容

Here is an example of both options applied. The code has a checkpoint halfway down. If you don’t want to style the whole app, comment out the rest of the code below it:

这是同时应用这两个选项的示例。 该代码在中途有一个检查点。 如果您不想为整个应用程序设置样式，请注释掉它下面的其余代码：

That’s the first SCSS file created! Next will be for dark mode. Create another new file called:

这是创建的第一个SCSS文件！ 接下来将是黑暗模式。 创建另一个新文件，名为：

noir.theme.scss

This file will be used to apply the second theme. We won’t need to change much for the second theme to work other than changing the hexcode values to a colour such as #33333 .

该文件将用于应用第二个主题。 除了将十六进制值更改为#33333类的颜色之外，我们无需为第二个主题进行太多更改即可工作。

It’s important to note, though, that we will need to rename the SCSS class from theme-red to something unique for this theme. I’ll call mine theme-noir .

需要特别注意的是， 我们需要将 SCSS类从theme-red 重命名 为该theme-red唯一的名称。 我称呼我theme-noir 。

The next step is to import the SCSS files into the app itself. This is important, otherwise the theme won’t be loaded into the app. Head to the app.scss file located at src/app/app.scss where you can import the theme like so:

下一步是将SCSS文件导入到应用程序本身。 这很重要，否则主题将不会加载到应用程序中。 app.scss位于src/app/app.scss的app.scss文件，您可以在其中导入主题，如下所示：

@import '../theme/red.theme';@import '../theme/noir.theme';

Now that we’ve created and imported the theme files into the project, the SCSS side of things is taken care of! Now onto the Typescript and HTML.

既然我们已经创建了主题文件并将其导入到项目中，那么SCSS方面就可以解决了！ 现在进入Typescript和HTML。

以编程方式更改主题 (Programmatically changing the theme)

Changing the theme itself will only require three more steps for a simple setup:

更改主题本身仅需三个简单步骤即可完成设置：

• a wrapper around the app
  应用程序包装
• a function to change the theme at run-time
  在运行时更改主题的功能
• something to hold the state of the current theme
  保持当前主题状态的东西

AppState类 (The AppState class)

The AppState class will be an injectable Angular component that holds what the current theme, and that can also be used to update the theme.

AppState类将是一个可注入的Angular组件，其中包含当前主题，并且还可以用于更新主题。

There isn’t much to how it works, other than that it has an internal state variable. When a Get operation is called, a clone of the state is returned. When a Set happens, a property of the state is updated with a new value, in this case the theme.

除了具有内部状态变量之外，它的工作原理并没有太多。 调用Get操作时，将返回状态的克隆。 发生Set时，将使用新值(在本例中为主题)更新状态的属性。

The AppState will hold the current theme and allow modification, but it will need to be imported into the component you want to use it with.

AppState将保留当前主题并允许进行修改，但需要将其导入到您要与之一起使用的组件中。

When an Ionic app is first setup using the CLI, you’ll find the following code in the app.component.ts :

首次使用CLI设置Ionic应用程序时，您将在app.component.ts找到以下代码：

// used for an example of ngFor and navigation

this.pages = [

{ title: 'Default Red Theme', component: HomePage },

{ title: 'List', component: ListPage }

];

The array that’s displayed is used to provide content for the sidemenu. This sidemenu will serve as our theme switcher in this project rather than a navigation menu.

显示的数组用于提供侧面菜单的内容。 在此项目中，此侧面菜单将用作我们的主题切换器，而不是导航菜单。

Change the values in this.pages to reflect the names of the themes you want the user to see (like the theme file that will be applied, and any other assets like images files).

更改this.pages中的值以反映您希望用户看到的主题名称(例如将应用的主题文件，以及任何其他资源(例如图像文件))。

In this example, the ‘theme file’ is going to be the name of the CSS class that we want to use. We’ve already imported the SCSS files by the time the app is running. So rather than accessing the file itself, we access the root class in that file. In the case of the red theme, the ‘theme-noir’ class will be applied.

在此示例中，“主题文件”将成为我们要使用CSS类的名称。 在应用运行时，我们已经导入了SCSS文件。 因此，我们不访问文件本身，而是访问该文件中的根类。 在红色主题的情况下，将应用“主题-黑色”类。

显示可用主题并应用包装器 (Displaying available themes and applying the wrapper)

The last step we need to take will be to add a wrapper div. This will be the top level element in the app.html file. This wrapper will have the chosen theme applied to it, allowing children elements to receive style updates also. An example of this in app.html would look like this:

我们需要采取的最后一步是添加包装器div。 这将是app.html文件中的顶级元素。 该包装器将应用选定的主题，从而允许子元素也接收样式更新。 app.html一个示例如下所示：

<!-- Wrapper over the app which will use the theming-->

<div class="{{global.state['theme']}}">

//in here you will have the rest of app.html

</div>

In terms of display, if you followed above and renamed the this.pages array to this.themes so it holds your available themes, then you don’t need to change anything else to display!

在显示方面，如果你遵循以上，并改名为this.pages阵列this.themes所以它拥有可用主题，那么你不需要改变任何东西，以显示！

The sidemenu originally was used to push to available pages in the app, but now it’s a great theme switcher. The names of each available theme are displayed using NgFor and some databinding with the this.themes array. The result will be a very simple list which will have the name of the theme for each entry. When an entry is clicked, that theme will be applied.

Sidemenu最初用于推送到应用程序中的可用页面，但现在它是一个很棒的主题切换器。 使用NgFor和this.themes数组进行一些数据绑定显示每个可用主题的名称。 结果将是一个非常简单的列表，其中将包含每个条目的主题名称。 单击条目后，将应用该主题。

On the Github repo you can find a better example with a color indicator next to each entry.

在Github仓库上，您可以找到一个更好的示例，每个条目旁边都有一个颜色指示器。

回顾 (Recap)

Okay time for a quick review of what we have done here. So far we have implemented the following changes to get the theming working:

好的时间，快速回顾一下我们在这里所做的事情。 到目前为止，我们已经实现了以下更改以使主题生效：

• Created theme SCSS files for each desired theme
  为每个所需主题创建主题SCSS文件

• Imported the created theme files in the main Sass file located at src/app/app.scss

  将创建的主题文件导入位于src/app/app.scss Sass主文件中

• Setup an AppState class to hold which theme is currently applied
  设置一个AppState类来保存当前应用的主题
• Setup a very small changeTheme function which will set a new theme into AppState
  设置一个很小的changeTheme函数，它将在AppState中设置一个新主题

• Added a wrapper element over the app.html which will have the theme applied to it

  在app.html添加了wrapper元素，该主题将应用了主题

To create more themes from here, copy one of the theme files you already created, rename it, and change the hex colour values in this new file. You can make as many as you want! Just make sure that you also import this new theme file in app.scss like you did with the first ones, otherwise it won’t work.

要从此处创建更多主题，请复制您已经创建的主题文件之一，对其进行重命名，然后更改此新文件中的十六进制颜色值。 您可以随心所欲！ 只需确保您也像在第一个主题文件中一样导入了这个新的主题文件到app.scss ，否则它将无法正常工作。

With these five steps you can have dynamic theming in any Ionic application. The beauty of the solution is that it works well on all platforms since it uses no native plugins — everything is in HTML,CSS and TS.

通过这五个步骤，您可以在任何Ionic应用程序中进行动态主题化。 该解决方案的优点在于，由于它不使用任何本机插件，因此可以在所有平台上很好地工作-所有内容都在HTML，CSS和TS中。

As a bonus, on the GitHub repo, I have implemented two other ways to present the available themes.

另外，在GitHub repo上 ，我还实现了另外两种方式来展示可用主题。

结论： (Conclusion:)

Dynamic theming saves us from worrying whether our chosen colour scheme will suit all audiences. Instead of doing numerous mockups with different schemes to evaluate, we can simply implement all of the colour schemes and let the user choose which one they prefer at runtime.

动态主题使我们不必担心我们选择的配色方案是否适合所有受众。 我们可以简单地实现所有配色方案，然后让用户在运行时选择自己喜欢的配色方案，而不用使用各种不同的方案来评估各种模型。

A hidden benefit of this is that we can collect analytics from our users on which theme suits them best. In the changeTheme function discussed, a webhook or some event could be sent specifying the user’s choice. Through this, developers could gather real user feedback on which themes ‘work’ and which don’t.

这样做的隐藏好处是，我们可以从用户那里收集最适合他们的主题的分析。 在讨论的changeTheme函数中，可以发送changeTheme或某个事件以指定用户的选择。 通过这种方式，开发人员可以收集有关哪些主题“有效”和哪些无效的真实用户反馈。

All the source code for this tutorial can be found in this Github repo.

该教程的所有源代码都可以在Github仓库中找到。

Please consider leaving a star on the repo. I welcome any and all additions.

请考虑在回购交易中留下星星。 我欢迎任何及所有补充。

翻译自: https://www.freecodecamp.org/news/how-to-dynamically-theme-your-ionic-application-and-make-your-users-happy-ffa17e15dbf7/

ionic程序下载