企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持知识库和私有化部署方案 广告
[TOC] 对于那些对Ionic应用程序开发完全陌生的人来说,了解项目背后的核心理念,概念和工具可能会有所帮助。在深入研究复杂主题之前,我们将介绍Ionic Framework的基础知识以及它的工作原理。 ## UI组件 Ionic Framework是一个UI组件库,它是可重用的元素,用作应用程序的构建块。离子组件是用[网络标准](https://ionicframework.com/docs/faq/glossary#web-standards)使用HTML,CSS和JavaScript。虽然这些组件是预先构建的,但它们是从头开始设计的,可以高度自定义,因此应用程序可以将每个组件都自己制作,从而使每个应用程序都拥有自己的外观和感觉。更具体地说,Ionic组件可以轻松地主题化,以在整个应用程序中全局更改外观。有关自定义外观的更多信息,请参阅[主题化](https://ionicframework.com/docs/theming/basics)。 ## 平台连续性 Platform Continuity是Ionic Framework的内置功能,允许应用程序开发人员在多个平台上使用相同的代码库。每个Ionic组件都会将其外观调整为运行应用程序的平台。例如,Apple设备(如iPhone和iPad)使用Apple自己的[iOS设计语言](https://www.apple.com/ios)。同样,Android设备使用Google的设计语言[Material Design](https://material.io/guidelines/)。 通过在平台之间进行细微的设计更改,用户可以获得熟悉的应用体验。从Apple的App Store下载的Ionic应用程序将获得iOS主题,而从Android Play商店下载的Ionic应用程序将获得Material Design主题。对于从浏览器中被视为渐进式Web应用程序(PWA)的应用程序,Ionic将默认使用Material Design主题。此外,决定在某些场景中使用哪个平台是完全可配置的。有关平台连续性的更多信息,请参阅[主题化](https://ionicframework.com/docs/theming/basics)。 ## 导航 传统的网络应用程序使用线性历史记录,这意味着用户可以向前导航到某个页面,并可以点击后退按钮进行导航。这方面的一个例子是点击维基百科,用户在浏览器的线性历史堆栈上前进和后退。 相比之下,移动应用程序通常使用并行的“非线性”导航。例如,选项卡式界面可以为每个选项卡分别设置导航堆栈,确保用户在导航和切换选项卡时不会失去位置。 离子应用程序采用这种移动导航方法,支持也可以嵌套的并行导航历史,同时保持Web开发人员熟悉的熟悉的浏览器式导航概念。 对于使用Angular构建的应用程序`@ionic/angular`,我们建议使用开箱即用的[Angular Router](https://angular.io/guide/router),用于每个新的Ionic 4 Angular应用程序。Ionic的早期版本附带我们自己的定制路由器,但为了提供最佳的工具和开发人员体验,我们已经转向使用框架推荐的路由器。 ## 本机访问 使用网络技术构建的应用程序(例如Ionic应用程序!)的一个惊人功能是它几乎可以在任何平台上运行:台式电脑,手机,平板电脑,汽车,冰箱等等!Ionic应用程序的相同代码库可以在许多平台上运行,因为它基于Web标准和跨这些平台共享的通用API。 Ionic最常见的用例之一是构建一个可以从[App Store](https://www.apple.com/ios/app-store/)和[Play Store](https://play.google.com/)下载的[应用程序](https://www.apple.com/ios/app-store/)。iOS和Android软件开发工具包(SDK)均提供“[网络视图](https://ionicframework.com/docs/building/webview)“它可以渲染任何Ionic应用程序,同时仍允许*完整的*Native SDK访问。 像[Capacitor](https://capacitor.ionicframework.com/)和[Cordova](https://cordova.apache.org/)这样的项目通常用于为Ionic应用程序提供对Native SDK的访问权限。这意味着开发人员可以使用常见的Web开发工具快速构建应用程序,并且仍然可以访问本机功能,例如设备的加速计,摄像头,GPS等。 ## 主题化 在核心,Ionic Framework是使用[CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)构建的,它允许我们利用[CSS属性(变量)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)提供的灵活性。这使得设计一个看起来很棒的应用程序非常容易,同时遵循Web标准。我们提供一组颜色,以便开发人员可以拥有一些很棒的默认值,但我们鼓励覆盖它们以创建与品牌,公司或所需调色板相匹配的设计。从应用程序的背景颜色到文本颜色的所有内容都可以完全自定义。有关应用主题的更多信息,请参阅[主题化](https://ionicframework.com/docs/theming/basics)。