Ionic:跨平台应用构建,一个跨框架支持的开源开发框架

Ionic不仅仅是Web,还可以打包成安卓应用、iOS应用以及桌面、PWA应用,可谓是兼顾所有平台了,虽然在国内使用不多,但是使用其开发移动端Web应用程序,绝对是一大利器!

介绍

Ionic Framework 是一个开源 UI 工具包,用于使用 Web 技术(HTML、CSS 和 JavaScript)构建高性能、高质量的移动端和桌面端应用程序,并集成了 Angular、React 和 Vue 等流行框架。


跨平台应用构建,一个跨框架支持的开源开发框架——Ionic

Github

https://github.com/ionic-team/ionic-framework

特性

Ionic Framework 专注于应用程序的前端 UX 和 UI 交互——UI 控件、交互、手势、动画。它易于学习,并与其他库或框架集成,例如 Angular、React 或 Vue。或者,它可以在没有任何前端框架的情况下使用简单的脚本独立使用,本文介绍Ionic的一大原因并不是其跨平台能力,而是因为其移动端UI的支持,使得其实成为构建移动端Web应用的一大利器!

  • 一套代码,多端运行

Ionic让Web 开发人员能够从单个代码库为所有主要应用程序和移动端 Web 构建应用程序。借助自适应样式,Ionic 应用程序在每台设备上都具有优秀的外观和体验。

  • 专注性能

Ionic 旨在通过最佳实践(如高效的硬件加速转换和触摸优化手势)在最新的移动设备上表现出色。

  • 干净、简单、实用的设计

Ionic的设计是为了在目前所有的移动设备和平台上工作和精美的UI展现。有了现成的组件、排版和一个高颜值的(但可扩展的)基础主题,它可以适应每个平台。

  • Native和Web优化

Ionic 模拟本机应用程序 UI ,并使用本机 SDK,将本机应用程序的 UI 标准和设备功能与网络灵活地结合在一起。 Ionic 使用 Capacitor(或 Cordova)进行本地部署,或作为 Progressive Web App (PWA)在浏览器中运行。

跨平台应用构建,一个跨框架支持的开源开发框架——Ionic

安装使用

本文以在Vue3中使用为例,进行一个简单的演示,首先安装脚手架工具:

npm install -g @ionic/cli
//或者
yarn global add @ionic/cli

//创建应用
ionic start myApp tabs --type vue

//启动
cd myApp
ionic serve

创建应用会自动下载开发环境的依赖包,第一次创建可能稍慢,可以耐心等待一会

项目的目录结构如下:

跨平台应用构建,一个跨框架支持的开源开发框架——Ionic

熟悉的Vue3代码:

<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

<script lang="ts">
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  components: {
    IonApp,
    IonRouterOutlet
  }
});
</script>

我们按照如上命令启动程序:

以下是在真机上浏览器打开的效果

跨平台应用构建,一个跨框架支持的开源开发框架——Ionic

这样第一个demo程序就启动了,非常的简单

组件

这里我们通过截图简单了解一下其组件,轻微感受下,真机感受更优秀

跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic
跨平台应用构建,一个跨框架支持的开源开发框架——Ionic

组件非常丰富,满足绝大多数场景的需求,以上知识其中很小一部分截图,完整的组件可以到官方文档中查看。

总结

Ionic不仅仅是Web,还可以打包成安卓应用、iOS应用以及桌面、PWA应用,可谓是兼顾所有平台了,虽然在国内使用不多,但是使用其开发移动端Web应用程序,绝对是一大利器!

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.net/share/25217.html

发表评论

登录后才能评论