当前位置:首页 > 天道酬勤 > 正文内容

跨平台GUI框架(前端跨平台开发框架)

张世龙2021年12月22日 05:37天道酬勤850

介绍

ionic框架是一个开源UI套件,用于使用Web技术(HTML、CSS、JavaScript )构建高性能、高质量的移动端和台式机端APP应用程序

Github

https://github.com/ionic-team/ionic -框架

特性

ionic框架专注于APP前端UX和UI交互——UI控件、交互、手势和动画。 易于学习,与其他库和框架(如Angular、React和Vue )集成。 或者,也可以使用简单的脚本来独立使用,而无需前端框架。 在本文中,Ionic的一大原因是对移动端UI的支持,而不是跨平台功能。 这将成为构建移动端web APP的一大利器。

通过多次运行Ionic,Web开发者可以从一个代码库中为所有主要APP和移动Web构建APP。 通过自适应风格,ionic APP应用程序在所有设备上提供了出色的外观和易用性。

以性能为中心的Ionic旨在通过高效的硬件加速转换和触摸优化手势等最佳实践,在最新的移动设备上获得卓越的性能。

干净、简单、实用的设计Ionic是为了在所有当前的移动设备和平台上工作,展现美丽的UI。 如果有现成的组件、合成和高颜值(但可扩展)基本主题,则可以适用于所有平台。

本机和Web优化Ionic模拟本机APP ui,并使用本机SDK将本机APP ui标准和设备功能与网络灵活地结合在一起。 Ionic可以使用Capacitor (或Cordova )进行本地部署,也可以作为渐进式web应用程序(pwa )在浏览器中运行。

安装使用

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

NPM安装- g @ ionic/CLI

//或

yarn全球添加@ ionic/CLI

//制作APP

联合起始映射表- -类型值

//开始

日本航空母舰

ionic serve创建APP自动下载开发环境的依赖软件包。 最初的制作可能有点慢,请稍等

项目的目录结构如下。

熟悉的Vue3代码:

模板

开启- APP

路由器入站/出站

/ion -应用程序

/模板

脚本郎=' ts '

import { IonApp,ionrouteroutlet }从' @ ionic/vue ';

导入组件自' vue ';

导出默认定义组件({ (

名称: ' app ',

组件:

IonApp,

IonRouterOutlet

}

);

/脚本按照上述命令启动程序。

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

这就启动了第一个demo程序。 很简单

组件

在这里,我们用截图简单地了解一下其组件。 感觉很轻的话,实机更好

img src="https://p5.toutiaoimg.com/origin/pgc-image/b0df02d1e9e64f80b08296758fc0f148?from=pc">

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

总结

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

扫描二维码推送至手机访问。

版权声明:本文由花开半夏のブログ发布,如需转载请注明出处。

本文链接:https://www.zhangshilong.cn/work/26837.html

分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。