一个开源跨平台UI工具包，使用前端构建原生质量的应用程序

《开源精选》是我们分享Github、Gitee等开源 区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个强大的跨iOS、Android 和Web平台的UI工具包——Ionic。

Ionic 是一个开源应用程序开发工具包，用于使用 JavaScript 和 Web 从单个代码库构建现代、快速、高质量的跨平台原生和渐进式 Web 应用程序。

Ionic 基于Web 组件，可显着提高性能、可用?性和功能，同时支持Angular、React和Vue等流行的 Web 框架。

功能特性

安装Ionic

使用npm：

npm install -g @ionic/cli

启动应用程序：

ionic start

运行应用：

cd myAppionic serve

组件示例

卡片 Card：

<ion-card>  <ion-img src="/assets/myImg.png"></ion-img>  <ion-card-content>    <ion-card-header>      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>      <ion-card-title>Card Title</ion-card-title>    </ion-card-header>    <p>Here’s a small text description for the card component.        Nothing more, nothing less.    </p>    <ion-item>      <ion-button fill="solid">Action</ion-button>      <ion-icon name="heart” slot="end”></ion-icon>      <ion-icon name="share” slot="end”></ion-icon>    </ion-item>  </ion-card-content></ion-card>

按钮 Button:

<!-- Default --><ion-button>Default</ion-button><!-- Anchor --><ion-button href="#">Anchor</ion-button><!-- Colors --><ion-button color="primary">Primary</ion-button><ion-button color="secondary">Secondary</ion-button><ion-button color="tertiary">Tertiary</ion-button><ion-button color="success">Success</ion-button><ion-button color="warning">Warning</ion-button><ion-button color="danger">Danger</ion-button><ion-button color="light">Light</ion-button><ion-button color="medium">Medium</ion-button><ion-button color="dark">Dark</ion-button>

列表 List：

<h4>Discover</h4><h2>Music we think you'll love.</h2><IonList>  {albums.map(album =>    <IonItem key={album.id}>      <IonThumbnail slot="start">        <img src={album.artwork} />      </IonThumbnail>      <IonLabel>        <h2>{album.title}</h2>        <p>{album.artist}, {album.year}</p>      </IonLabel>    </IonItem>  )}</IonList>

生物识别 Identity vault：

logout() {  // lock the vault when the user logs out  this.identityVault.lock();}onVaultReady() {  // unlock the vault using biometrics  this.identityVault.unlock();}onVaultUnlocked() {  // restore the session when the vault is unlocked  this.session = await this.identityVault.restoreSession();}

相机 Camera：

async takeProfilePicture() {  // Take a picture or video, or load from the library  const picture = await this.camera.getPicture({    encodingType: this.camera.EncodingType.JPEG  });  // confirm that users choice of picture  const msg = "Set as new profile picture?";  const confirmed = await this.dialogs.confirm(msg);  if (confirmed) {    // upload the picture to the server    return this.userService.uploadProfilePic(picture);  }}

定位 Geoloaction：

async plotCurrentLocation() {  // get the users current position  const position = await this.geolocation.getCurrentPosition();  // grab latitude & longitude  const latitude = position.coords.latitude;  const longitude = position.coords.longitude;  // place a pin on map at users current coordinates  this.mapService.dropPin(latitude, longitude);}

—END—

开源协议：MIT

开源地址：
https://github.com/ionic-team/ionic-framework