项目:露营聊天软件(Camper Chat) - 将页面和服务添加到App Module

优质
小牛编辑
130浏览
2023-12-01

为了能够在项目里面可以使用这些页面和服务,我们需要将它们添加到app.module.ts文件里。所有我们自己创建的页面都需要添加到declarations数组和entryComponents数组里,所有我们创建的数据提供者都需要添加到providers数组,其他自定义组件或者管道(pipe)只需要添加到declarations数组即可。我们的数据模型只是一个简单的类,我们需要在任何地方使用,所以不用在模组里面设置。
> 修改src/app/app.module.ts到以下:

  1. import { NgModule } from '@angular/core';
  2. import { IonicApp, IonicModule } from 'ionic-angular';
  3. import { MyApp } from './app.component';
  4. import { HomePage } from '../pages/home/home';
  5. import { LoginPage } from '../pages/login/login';
  6. import { AboutPage } from '../pages/about/about';
  7. import { Data } from '../providers/data';
  8. @NgModule({
  9. declarations: [
  10. MyApp,
  11. HomePage,
  12. LoginPage,
  13. AboutPage
  14. ],
  15. imports: [
  16. IonicModule.forRoot(MyApp)
  17. ],
  18. bootstrap: [IonicApp],
  19. entryComponents: [
  20. MyApp,
  21. HomePage,
  22. LoginPage,
  23. AboutPage
  24. ],
  25. providers: [Data]
  26. })
  27. export class AppModule {}

添加需要的平台

在给指定平台制作应用之前,你需要将它们添加到你的项目。
> 运行以下命令添加iOS平台:

  1. ionic platform add ios

> 运行以下命令添加Android平台:

  1. ionic platform add android

安装PouchDB

由于我们会在项目中用到PouchDB,所以我们需要先安装他。跟安装Ionic Native一样,你只需要简单的运行如下命令就可以了:

  1. npm install pouchdb --save

我们也要给PouchDB安装“typings”这样TypeScript编译器就不会抱怨了(因为他不知道PouchDB是什么)。
> 运行如下命令按钮PouchDB的types

  1. npm install @types/pouchdb --save --save-exact

添加需要的Cordova插件

这个应用将会用到不同的Cordova插件。记住,Cordova插件只能在真实设备上运行。我将在添加他们的时候解释。
> 运行以下命令添加SQLite插件:

  1. ionic plugin add cordova-sqlite-storage

这个插件让你可以访问本地存储SQLite数据库。我们在此应用中添加他的原因是Ionic本地存储服务可以使用插件提供的稳定输出存储。
> 运行以下命令添加App Browser插件:

  1. ionic plugin add cordova-plugin-inappbrowser

这个插件让我们可以启动外部网站。我们会用这个插件来给Facebook插件使用。添加Facebook插件本事实际上需要做更多的工作而不是运行一个命令就够了的,所以我们稍后在做这个。
> 运行以下命令添加Status Bar插件:

  1. ionic plugin add cordova-plugin-statusbar

我们给所有项目添加此插件用来在应用中控制状态栏(设备屏幕顶部的状态条,包括时间,电池信息等等)。
> 运行以下命令添加Splash Screen插件:

  1. ionic plugin add cordova-plugin-splashscreen

此插件允许我们控制闪屏(打开应用的时候的全屏画面)。
> 运行以下命令添加Keyboard插件:

  1. ionic plugin add ionic-plugin-keyboard

这个插件允许我们控制软键盘。
> 运行以下命令添加Whitelist插件:

  1. ionic plugin add cordova-plugin-whitelist

所有应用会用到这个插件,他定义了应用里可以加载什么样的资源。没有他的话,你尝试加载的资源都会不成功。
添加了这个插件后,你也需要到index.html中定一个一个“Content Security Policy”。我们将添加一个非常宽松的策略实际上允许我们加载任何资源。基于你的应用,你可以提供一个更严格的策略,但是对于开发而言开放性策略就可以了。
> 修改 src/index.html文件,添加一下meta标签:

  1. <meta http-equiv="Content-Security-Policy" content="font-src 'self' data:;
  2. img-src * data:; default-src gap://ready file://* *; script-src 'self'
  3. 'unsafe-inline' 'unsafe-eval' * ; style-src 'self' 'unsafe-inline' *">

> 运行以下命令添加Crosswalk插件:

  1. ionic plugin add cordova-plugin-crosswalk-webview

这个另一个每个应用都要添加的插件,但是你也可以先不添加。添加了这个插件后,在你编译Android的时候将会使用“Crosswalk”。Android有很多问题,特别是老设备,因为有太多不同的团建版本,不同的版本有不同的浏览器(记住,鉴于我们是制作HTML5应用,他实际上就是一个搭载的浏览器用来运行我们的应用)。Crosswalk做的是将一个现代的浏览器打包到应用中,这样一来应用无论是运行在什么设备上,都会使用相同的浏览器来运行,并且Crosswalk浏览器可以很好改善执行效率。
唯一的不足之处就是你的应用尺寸明显的变大了很多。总体上,我觉得这很值得,我也建议你使用他,如果你接受不了的话,也可以不用。更多关于Crosswalk Project的信息,请参考网站:https://crosswalk-project.org/

设置图片

制作此应用的时候,会用到一些图片。你下载的包里面已经包含了这些图片,但是你需要去生成的项目里面设置好他们。
> 将下载包 src/assets文件夹下面的images文件夹复制到应用里的 src/assets下面

总结

就这样!我们设置好了,准备好继续前几,现在我们开始进入到有趣的部分了。