版本：v8

跨平台

Ionic 从头开始构建，旨在简化开发，无论您要构建什么平台。Ionic 应用真正跨平台：能够从单个代码库中运行为 Android、iOS、Electron 和渐进式 Web 应用 (PWA)。在优化应用以跨平台工作时，需要牢记一些要点。

硬件 API

在原生应用中，通常会进行 API 调用以与设备通信，例如打开相机或访问地理位置。这些 API 调用在 Web 环境中调用时将无法正常工作，因为没有原生桥接。Ionic 通过几种方式处理此问题。

Ionic Native

Ionic Native 有自己的内部逻辑来检测它是否在原生环境中。它不会引发运行时错误，而是会打印警告信息，如果它不是原生环境且没有可用的 Cordova 插件。应用不会崩溃，并且会继续工作，尽管没有原生功能。

平台检测

在应用的逻辑中，无论何时需要进行原生 API 调用，建议始终先检查原生环境的状态。例如

this.platform.ready().then(() => {
  // 'hybrid' detects both Cordova and Capacitor
  if (this.platform.is('hybrid')) {
    // make your native API calls
  } else {
    // fallback to browser APIs
  }
});

这段代码在目标环境不确定是否可以访问原生 API 时非常有用。

浏览器回退

人们使用的许多原生 API（例如 File API）在浏览器中不可用。API 始终在改进和赶上原生，因此建议您进行研究。考虑到前两个要点，创建适应应用运行平台的良好体验相当容易。

响应式 UI

在计划部署可能跨多个设备使用的应用时，务必确保应用在较大的屏幕尺寸上平稳运行。

布局

许多人很少注意到应用的布局，但它会对体验和可用性产生巨大影响。请考虑这种常见的 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 属性，其中 size 的值为在可用总列数中占据的列数。默认的可用列数为 12。
size 属性可以添加断点，size-{breakpoint}。此值设置指定断点及以上的尺寸。

有关使用网格进行自定义的更多信息，请参阅 Grid 文档。

存储

大多数应用在某些时候都需要本地存储某种数据。无论是存储来自 XHR 请求的 JSON，还是保存身份验证令牌，都有许多不同的存储选项可用。最重要的是，如果应用在原生环境中运行，则可以创建完整的 SQLite 数据库并在其中存储数据。所有这些不同的存储机制都有各自的优点和缺点，但 Ionic 开发人员不必担心这一点。

Ionic 存储

在这种情况下，Ionic 的存储库是适用于多环境用例的完美选择。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，它们提供类似的适应性强的存储机制。

跨平台

硬件 API​

Ionic Native​

平台检测​

浏览器回退​

响应式 UI​

布局​

存储​

Ionic 存储​

内容