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

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

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

功能特性

• 跨平台：Ionic 免费且开源，提供一系列针对移动设备优化的 UI 组件、手势和工具库
• 性能：Ionic使用占用空间小和内置最佳实践（如硬件加速转换、触摸优化手势、预渲染和 AOT 编译）构建超快的应用程序
• 技术：与主流前端框架无缝集成，包括 Angular、React、Vue
• 组件：Ionic 的组件是用 HTML、CSS 和 JavaScript 编写的，这使得构建现代、高质量的 UI 变得容易
• 原生：只需一点点 JavaScript 即可访问本机设备功能，例如相机、地理位置、蓝牙等
• 社区：全球 200 多个国家/地区的超过 500 万开发人员正在使用 Ionic

安装Ionic

使用npm：

npm install -g @ionic/cli

启动应用程序：

ionic start

运行应用：

cd myAppionic serve

组件示例

卡片 Card：

              Card Subtitle      Card Title        
Here’s a small text description for the card component.        Nothing more, nothing less.    
          Action                  

按钮 Button:

DefaultAnchorPrimarySecondaryTertiarySuccessWarningDangerLightMediumDark

列表 List：

Discover
Music we think you'll love.
  {albums.map(album =>                                      
{album.title}
        
{album.artist}, {album.year}
            )}

生物识别 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