[TOC] Ionic是从头开始构建的，无论您正在构建什么平台，都可以轻松开发。离子应用程序是真正的跨平台：能够作为Android，iOS，Electron和Progressive Web App（PWA）运行，所有这些都来自单个代码库。在优化应用程序以跨这些平台工作时，请记住一些要点。 ## 硬件API 在本机应用程序中，通常会进行API调用以与设备通信，例如打开相机或访问地理位置。在Web环境中调用时，这些API调用将不起作用，因为没有本机桥。Ionic有几种方法可以解决这个问题。 ### ionic原生 [Ionic Native](https://ionicframework.com/docs/native)有自己的内部逻辑来检测它是否在本机环境中。如果它不是本机环境并且没有可用的Cordova插件，它将打印警告，而不是抛出运行时错误。该应用程序不会中断，它将继续工作，但没有本机功能。 ### 平台检测 在应用程序的逻辑中，每当需要进行本机API调用时，建议首先检查本机环境的状态。例如： ~~~ this.platform.ready().then(() => { if (this.platform.is('cordova')) { // make your native API calls } else { // fallback to browser APIs } }); } }); ~~~ 在针对无法访问本机API的环境进行定位时，这段代码非常有用。 ### 浏览器后备 人们使用的许多本机API（例如，文件API）在浏览器中不可用。API总是在不断改进和追赶原生，因此建议对它们进行研究。考虑前两点，创建一个适应应用程序运行平台的良好体验相当容易。 ## 桌面 当计划将应用程序部署到桌面时，无论是使用[Electron](https://electronjs.org/)还是使用**Progressive Web App**，确保应用程序在较大的设备上顺利运行非常重要。 ### 布局 许多人很少注意到应用程序的布局，但它会对体验和可用性产生巨大影响。考虑这种常见的UI模式： ~~~ <ion-content> <ion-item> <ion-label>Item 1</ion-label> </ion-item> <ion-item> <ion-label>Item 2</ion-label> </ion-item> <ion-item> <ion-label>Item 3</ion-label> </ion-item> <ion-item> <ion-label>Item 4</ion-label> </ion-item> <ion-item> <ion-label>Item 5</ion-label> </ion-item> </ion-content> ~~~ 这将呈现5个项目，每个项目的宽度为100％。这可能在移动设备上看起来很棒，如下所示，但在桌面浏览器上查看这个是另一回事。由于宽屏幕宽度，项目变得拉伸以填满整个屏幕，使屏幕空间不被使用。  为了改善这种体验，我们可以将项目包装成一个Grid零件。视图可以轻松地重写为更大屏幕上更实用的内容： ~~~ <ion-grid> <ion-row> <ion-col> <ion-item> <ion-label>Item 1</ion-label> </ion-item> </ion-col> <ion-col> <ion-item> <ion-label>Item 2</ion-label> </ion-item> </ion-col> <ion-col> <ion-item> <ion-label>Item 3</ion-label> </ion-item> </ion-col> <ion-col> <ion-item> <ion-label>Item 4</ion-label> </ion-item> </ion-col> <ion-col> <ion-item> <ion-label>Item 5</ion-label> </ion-item> </ion-col> </ion-row> </ion-grid> ~~~ 通过将项目包装在`ion-grid`元素中，Ionic网格系统将添加到我们的布局中。在列中包装每个项目会使项目沿着同一行占据网格内部的等宽度。  我们可以通过向元素添加`fixed`属性来进一步实现这一点`<ion-grid>`。这告诉网格具有基于屏幕大小的固定宽度。这对于较大的屏幕来说是完美的，当物品在网格上没有宽度的情况下再次开始拉伸时。  可以进一步定制网格以通过添加`ion-col`属性来更改列的大小。 ~~~ <ion-grid fixed> <ion-row> <ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3"> <ion-item> <ion-label>Item 1</ion-label> </ion-item> </ion-col> <ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3"> <ion-item> <ion-label>Item 2</ion-label> </ion-item> </ion-col> <ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3"> <ion-item> <ion-label>Item 3</ion-label> </ion-item> </ion-col> <ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3"> <ion-item> <ion-label>Item 4</ion-label> </ion-item> </ion-col> <ion-col size="12" size-sm="9" size-md="6" size-lg="4" size-xl="3"> <ion-item> <ion-label>Item 5</ion-label> </ion-item> </ion-col> </ion-row> </ion-grid> ~~~ 上面的例子中有很多事情要做。这些是关键点： * 在`ion-col`从获得其宽度`size`添加到它的属性，其中尺寸的值是占用了总可用列的列数。默认的可用列数为12。 * 该`size`属性可以添加一个断点，`size-{breakpoint}`。此值设置指定断点及以上的大小。 有关使用网格自定义的更多信息，请参阅[Grid](https://ionicframework.com/docs/layout/grid)文档。 ## 存储 大多数应用程序在某些时候都需要在本地存储某种数据。无论是从XHR请求存储某些JSON，还是保存身份验证令牌，都有许多不同的存储选项可用。除此之外，应用程序在本机环境中运行，可以创建完整的SQLite数据库并在那里存储数据。所有这些不同的存储机制都有各自的优缺点，但离子开发人员不必担心这一点。 ### ionic存储 在这种情况下，[Ionic的存储库](https://github.com/ionic-team/ionic-storage)是多环境用例的理想选择。Ionic的存储类构建在经过良好测试的LocalForage库之上，提供了一种适应性强的存储机制，可为当前运行时选择最佳的存储解决方案。 目前，这意味着它将通过SQLite运行本机，IndexedDB（如果可用），WebSql或本地存储。通过处理所有这些，它允许使用稳定的API写入存储。 ~~~ class MyClass { constructor(public storage: Storage) {} async setData(key, value) { const res = await this.storage.set(key, value); console.log(res); } } async getData(key) { const keyVal = await this.storage.get(key); console.log('Key is', keyVal); } } } } ~~~ 还有其他存储解决方案，例如PouchDB，它提供类似的，适应性强的存储机制。