# -- 添加需要的平台

## 添加需要的平台

在给指定平台制作应用之前，你需要将它们添加到你的项目。\
\&#xNAN;**> 运行以下命令添加iOS平台：**

```
ionic platform add ios
```

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

```
ionic platform add android
```

## 添加需要的Cordova插件

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

```
ionic plugin add cordova-sqlite-storage
```

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

```
ionic plugin add cordova-plugin-statusbar
```

我们给所有项目添加此插件用来在应用中控制状态栏（设备屏幕顶部的状态条，包括时间，电池信息等等）。\
\&#xNAN;**> 运行以下命令添加Splash Screen插件：**

```
ionic plugin add cordova-plugin-splashscreen
```

此插件允许我们控制闪屏（打开应用的时候的全屏画面）。\
\&#xNAN;**> 运行以下命令添加Keyboard插件：**

```
ionic plugin add ionic-plugin-keyboard
```

这个插件允许我们控制软键盘。\
\&#xNAN;**> 运行以下命令添加Whitelist插件：**

```
ionic plugin add cordova-plugin-whitelist
```

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

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

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

```
ionic plugin add cordova-plugin-crosswalk-webview
```

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

## 设置图片

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

## 总结

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