Ionic Framework 5官方文档翻译
Ionic Framework 5官方文档翻译
- 入门
- Ionic Framework 5特点
- Ionic Framework是什么?
- 核心概念
- 构建你的第一个应用
- 先进的Web应用
- 浏览器支持
- 版本控制
- 发布说明
- 支持
- 安装
入门
Ionic Framework 5特点
- 全新的UI组件和手势
全新的图标、颜色和主题
官方React与Angular集成
- 混合开发与原生开发
了解混合应用和原生应用之间的区别。我们打破了所有的神话和误解。
- 跨平台应用,Web构建。
免费且开源,Ionic提供了一个库,其中包含了为移动设备优化的UI组件、手势和工具,用于构建快速、高度交互的应用程序。
- 美观,可重用的组件
在所有的移动设备和平台上,Ionic的UI组件都显示的非常漂亮。从现成的组件、排版和适合每个平台的华丽的基本主题开始。
- 编写一次,到处运行
Ionic允许web开发人员将应用程序作为一个具有单一共享代码库的PWA发送到应用程序商店。有了Ionic的自适应风格,你的应用程序在每个平台和设备上看起来的体验是一样的。
- 开发人员友好的工具
使用强大的CLI创建、编译、测试和部署应用程序。访问特定在线重载、跨平台部署和集成。你甚至可以使用你喜欢的JS框架的CLI。
- 性能至上,快速构建应用程序,比以前更快
Ionic的性能和运行速度可以在所有最新的移动设备上实现。使用小的内存和内置的最佳实践,如硬件加速转换、触摸优化手势、预渲染和AOT编译,构建开箱急用的快速应用程序。
- 框架不敏感,使用您喜欢的框架进行构建
我们不会对你或你的团队喜欢使用的技术栈做任何制约。这就是问什么设计成与所有最好的前端框架无缝继承的原因,包括Angular、React、Vue,甚至不用任何框架与普通的JavaScript集成。
- 原生功能,支持访问设备核心的原生功能
Ionic使得只需要一点JavaScript代码,就可以轻松的访问设备的原生特性。从120多个用于访问相机、地理位置、蓝牙等丰富的原生设备插件库中选择,或者在需要时深入到完整的原生SDK中。你的能力时无限的。
- 一个全球社区,为开发人员构建,值得信赖的企业化
全世界200多个国家的500多万名开发者正在使用Ionic来推动他们的应用程序开发,加入数以千计的全球聚会、论坛和事件,使用Ionic构建是一件乐事。
- 支持集成,是的你可以与之整合
从社区插件到高级支持的集成,Ionic让你无所不包。通过集成到你喜欢的技术栈中来增强你的应用程序工作流。
Ionic Framework是什么?
Ionic Framework是一个开源的UI工具包,用于使用web技术(HTML、CSS和Javascript)构建高性能、高质量的移动和桌面应用程序。
Ionic Framework专注于前端用户体验,或应用程序的UI交互(控制、交互、手势、动画)。它很容易学习,并与其他库或框架(如Angular)很好的集成,或者可以独立使用而无需使用前端框架只需要包含一段简单脚本。
目前,Ionic Framework已经正式集成了Angualr和React,对Vue的支持正在开发中。
Ionic Framework的目标包括以下几个:
- 跨平台
构建和部署可以跨多个平台工作的应用程序,如原生IOS、Android、桌面和Web,作为一个渐进的Web应用程序——所有这些都有一个代码库。编写一次,导出运行。
- Web标准
Ionic Framework建立在可靠的、标准的Web技术(HTML、CSS和JavaScript)之上,使用自定义元素和DOM等现代Web Api。正因为如此,Ionic组件有一个稳定的API,而不是由单个平台供应商随意决定的。
- 设计美观
干净、简洁、实用。Ionic Framework是的设计工作和显示漂亮开箱急用的在所有平台上。从预先设计的组件、排版、交互范例和华丽(但可扩展)的基本主题开始。
- 简单
在构建Ionic Framework时,考虑到它的简单性,所以创建Ionic应用程序是一件令人愉快的事情,很容易学习,而且几乎所有具有Web开发技能的人都可以使用。
- License许可证
Ionic Framework是一个免费的开源项目,在麻省理工学院许可下发布。这意味着它可以免费用于个人或商业项目。MIT与jQuery和Ruby on Rails等流行项目使用的许可证是一样的。
- Ionic脚手架
官方的Ionic CLI(命令行接口)是一个工具,可以快速搭建Ionic应用程序,并为Ionic开发人员提供大量有用的命令。除了安装和更新Ionic,CLI还提供了内置的开发服务器、构建和调试工具,等等。如果您是Ionic Appflow成员,则可以使用CLI执行云构建和部署,并管理您的账户。
- 框架兼容性
虽然以前的版本与Angualr紧密耦合,但改框架的V4被重新设计为一个独立的Web组件库,并集成了最新的JavaScript框架,比如Angular。尽管有些框架需要一个铺垫来提供完整的Web组件支持,但在大多树前端框架(包括React和Vue)中,都可以成功地应用到Ionic中。
- JavaScript
使用Ionic4的主要目标之一是消除对单一框架承载组件的任何硬性要求。这意味着核心组件可以独立工作,只需在Web页面中使用一个脚本标记。虽然使用框架对于更大的团队和更大的应用程序时很好的,但是现在可以在单个页面中使用Ionic作为一个独立的库,甚至在WordPress这样的环境中也是如此。
- Angular
Ionic是所以强壮是因为Angular一直是核心所在。虽然核心组件被编写成一个独立的Web组件库,但@ionic/angular包使得与angular生态系统的集成变得轻而易举。@ionic/angular包含了angular开发人员所期望的来自与Ionic2/3的所有功能,并与angular核心库(如angular router)集成。
- React
Ionic现在正式支持流行的React库。Ionic React让React的开发人员利用现有的网络技能来开发针对IOS、Android、网络和桌面的应用程序。使用@ionic/react,你可以使用所有核心的Ionic组件,但感觉就像使用原生React组件一样。
- 未来的支持
在将来的版本中可能会支持其他框架。目前,Vue的官方绑定正在开发中,尽管有些组件在这些框架中是开箱即用的。
- Ionic Framework V4+
Ionic Framework V4是该项目在底层技术和能力方面的重大进展,重点关注性能、兼容性和整体可扩展行。尽管V4仍然通过@ionic/angular包与Angular进行深度集成,但它现在也与框架无关,这意味着它可以与任何其他JavaScript框架(Vue、React、Preact等)一起工作,或者根本不需要框架。
通过迁移到Web标准,V4允许现代浏览器中支持的标准组件模型(而不是特定于框架的模型)称为核心。这意味着更快的加载时间、更好的性能和更少的代码。
- Ionic Appflow
为了帮助管理整个生命周期的Ionic Appflow,我们还未生产应用提供了一个嗯Ionic Appflow的商业应用平台,该平台独立于开源框架。
Ionic Appflow帮助开发人员和团队编译本地应用程序构建,并通过一个几种的仪表盘将实时代码更新部署到Ionic Apps。可选的付费升级可用于更高级的功能,如工作流自动化、单点登录(SSO)和访问连接服务和继承。
Appflow需要一个Ionic账户,并提供一个免费的“Starter”计划,供哪些有兴趣尝试它的一些功能的人使用。
- 生态系统
Ionic Framework由一个核心团队全职开发和维护,它的生态系统由一个由开发者和贡献者组成的国际社区引导,促进了它的发展和采用。大大小小的开发者和公司都在使用Ionic来开发和发布随处可见的应用程序。
核心概念
对于哪些完全不熟悉Ionic app开发的人来说,深入了解项目背后的核心概念、概念和工具是很有版主的。在深入讨论复杂的主题之前,我们将介绍什么是Ionic framework以及它是如何工作的基础知识。
- UI组件
Ionic Framework是一个UI组件库,这些组件是可重用的元素,充当应用程序的构建块。使用HTML、CSS和JavaScript使用Web标准构建Ionic组件。虽然这些组件是预先构建的,但它们是从头开始设计的,具有高度可定制性,因此应用程序可以使用每个组件成为自己的组件,允许每个应用程序有自己的外观和特性。更具体地说,Ionic组件可以很容易的进行主题化,从而改变整个应用程序的外观。
- 样式适配
样式适配是Ionic Framework的一个内置特性,它允许应用程序开发人员在多个平台上使用相同的代码基。每个Ionic组件都根据应用程序所在的平台调整外观。例如,苹果设备,如iPhone和iPad,使用苹果自己的IOS设计语言。类似地,Android设备使用的是谷歌的设计语言——Material design。
通过在平台之间进行细微的设计更改,为用户提供熟悉的应用程序体验。从苹果应用商店下载的Ionic App将获得IOS主题,而从安卓应用商店下载的Ionic App将获得Material Design主题。对于哪些在浏览器中被视为进步的Web应用程序(PWA)的应用程序,Ionic将默认使用Material Design主题。此外,在某些场景中决定使用哪个平台是完全可配置的。
- 导航
传统的web应用程序使用线性历史记录,这意味着用户可以向前导航到一个页面,并可以单击后退按钮进行向后导航。这方面的一个例子是在Wikipedia周围单击,用户在浏览器的线性历史记录栈上前进和后退。
相比之下,移动应用程序通常使用并行的“非线性”导航。例如,选项卡界面可以为每个选项卡提供单独的导航栈,确保用户在导航和切换选项卡时不会丢失位置。
Ionic应用程序支持这种移动导航方式,支持可以嵌套的并行导航历史,同时维护web开发人员熟悉的浏览器风格的导航概念。
对于使用Angular和@ionic/angular构建的应用程序,我们建议使用Angular路由器,每个新的Ionic4 Angular应用程序都使用这个路由器。
- 原生访问
使用web技术构建的应用程序(比如Ionic Apps!)的一个惊人特性是,它几乎可以在任何平台上运行:台式电脑、手机、平板电脑、汽车、冰箱等等!相同的代码基础可以在许多平台上运行,因为它基于web标准和在这些平台上共享公共的api。
对于Ionic来说,最常见的一个用例是构建一个应用程序,它可以从应用程序商店和游戏商店下载。IOS和Android软件开发工具包(SKDs)都提供了Web视图,可以呈现任何Ionic应用程序,同时还允许完全的本地SDK访问。
应用就像超级容器和Cordova等项目被应用于Ionic应用接入原生SDK。这意味着开发人员可以使用常见的Web开发工具快速构建应用车鞥虚,同时还可以访问原生功能,如设备的加速器、摄像头、GPS等。
- 主题
作为核心,Ionic Framework是使用CSS构建的,它允许我们利用CSS属性(变量)提供灵活性。这使得它难以置信的容易设计一个应用程序,看起来很好,同时遵循网络标准。我们提供了一组颜色,因此开发人员可以有一些很棒的默认设置,但是我们鼓励覆盖它们来创建与品牌、公司或所需调色板相匹配的设计。从应用程序的背景颜色到文本颜色,所有内容都是完全可定制的。
构建你的第一个应用
你的第一个Ionic App: Angular
值得注意的是,有了一个代码库,您就可以仅使用HTML、CSS和JavaScript构建任何平台。随着我们学习的基础上,一步一步的创建一个真实的Ionic App。
- 我们将构建
我么将创建一个照片库应用程序,它提供了用设备的相机拍照、在网格中显示照片并将它们永久存储在设备上的功能。
亮点包括:
(1)一个基于Angular的代码库,在web、IOS和Android上运行,使用的是Ionic Framework UI组件。
(2)Ionic的官方原生应用运行时就像使用一个原生的IOS和Android移动应用的容器部署。
(3)由相机、文件系统和存储api支持的照片库功能。
这很容易开始。在GitHub上找到本指南中引用的完整应用程序代码。
- 下载需要的工具
立即下载和安装以下工具以确保最佳的Ionic开发体验:
(1)Node.js用于与Ionic生态系统交互。在这里下载LTS版本
(2)一个代码编辑器…写代码!我们是Visual Studio代码的粉丝。
(3)命令行接口/终端(CLI)
Windows 用户:为了获得最佳的Ionic体验,我们推荐在管理员模式下运行内置命令(cmd)或Powershell CLI。
Mac/Linux用户,几乎任何终端都可以工作。
- 安装Ionic工具
运行以下命令用于安装Ionic CLI(ionic),
native-run,用于在设备和模拟器/仿真器上运行本机二进制文件,以及
cordova-res,用于生成本机应用程序图标和启动屏幕:
要在Visual Studio代码中打开终端,请转到终端->新终端。
npm install -g @ionic/cli native-run cordova-res
-g选项表示全局安装。在全局安装包时,可能发生EACCES权限错误。
考虑将npm设置为在不提升权限的情况下进行全局操作。有关更多信息,请参见解决权限错误。
- 创建一个应用
接下来,创建一个Ionic Angular应用程序,它使用“Tabs”starter模板,并为本地功能添加容器:
ionic start photo-gallery tabs --type=angular --capacitor
这个入门项目包括三个预构建的页面和用于Ionic开发的最佳实践。已经有了通用的构建块,我们可以轻松地添加更多的特性!
接下来,切换到app文件夹:
cd photo-gallery
- PWA元素
一些容器插件,包括摄像头API,通过Ionic pwa元素库提供基于web的功能和UI。
这是一个独立的依赖,所以安装它:
npm install @ionic/pwa-elements
接下来,通过编辑src/main.ts导入@ ionic/pwa-elements。
import { defineCustomElements } from '@ionic/pwa-elements/loader';// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);
就是这样!现在是有趣的部分-让我们看看应用程序的行动。
- 运行这个应用
接下来运行这个命令:
ionic serve
瞧!你的Ionic应用程序现在在网络浏览器中运行。你的大多数应用程序都可以在浏览器中直接构建和测试,这大大提高了开发和测试的速度。
- photo Gallery!!!
有三个标签。单击Tab2选项卡。这是一个空白的画布,也就是变成一个图片库的完美地点。Ionic CLI的特点是实时重新加载,所以当你做出改变并保存它们时,应用程序会立即更新!
在您选择的代码编辑器中打开photo-gallery应用程序文件夹,然后导航到/src/app/tab2/tab2.page.html。我们看到:
<ion-header><ion-toolbar><ion-title>Tab 2</ion-title></ion-toolbar>
</ion-header><ion-content><ion-header collapse="condense"><ion-toolbar><ion-title size="large">Tab 2</ion-title></ion-toolbar></ion-header>
</ion-content>
ion-header表示顶部导航栏和工具栏,标题为“Tab 2”(由于支持iOS可折叠大标题,所以有两个标题)。将两个ion-title元素重命名为:
<ion-title>Photo Gallery</ion-title>
我们把我们的应用程序的视觉方面放到了<ion-content>。在本例中,我们将添加一个按钮来打开设备的相机并显示相机捕获的图像。首先在页面底部添加一个浮动动作按钮(FAB),并将相机图像设置为图标。
<ion-content>
<ion-fab vertical="bottom" horizontal="center" slot="fixed"><ion-fab-button><ion-icon name="camera"></ion-icon></ion-fab-button></ion-fab>
</ion-content>
接下来,打开src / app /标签/ tabs.page.html。将标签更改为“Photos”,图标名称更改为“images”:
<ion-tab-button tab="tab2"><ion-icon name="images"></ion-icon><ion-label>Photos</ion-label>
</ion-tab-button>
保存所有更改,以便在浏览器中自动应用它们。这只是我们利用离子做的所有酷事情的开始。接下来,在web上实现拍照功能,然后为iOS和Android构建它。
先进的Web应用
浏览器支持
Ionic最初的目标是让使用HTML、CSS和JavaScript等web技术开发移动应用变得容易。因为有了web技术的基础,爱奥尼亚可以在web上的任何地方运行——iOS、Android、浏览器、electronic、PWAs等等。
- 移动浏览器
为了追求自适应的风格,Ionic完全支持并在以下移动平台上进行了良好的测试:
Framework | Android | IOS |
---|---|---|
Ionic V5 | 5.0+ | 11.0+ |
Ionic V4 | 4.4+ | 10.0+ |
- 桌面浏览器
因为Ionic是基于web技术的,所以它在桌面浏览器上的表现和在移动设备上一样好。有关桌面布局的更多信息,请参阅跨平台。
Browser | Ionic V5 | Ionic V4 |
---|---|---|
Chrome | √ | √ |
Safari | √ | √ |
Edge | 79+ | √ |
Firefox | √ | √ |
IE 11 | × | √ |
版本控制
发布说明
支持
安装
Ionic Framework 5官方文档翻译相关推荐
- 【iOS官方文档翻译】iOS蓝牙的基本概念
之前写了[iOS官方文档翻译]iOS的蓝牙连接.数据接收及发送一文,介绍了怎样进行蓝牙通讯,但是很多基本概念没有进行解释,看起来可能有点吃力,所以现在再翻译一篇苹果对官方蓝牙4.0一些基本概念介绍的文 ...
- [iOS]Advanced Memory Management Programming Guide 高级内存管理编程指南(官方文档翻译)
Advanced Memory Management Programming Guide - 高级内存管理编程指南(官方文档翻译) 版权声明:本文为博主原创翻译,如需转载请注明出处. 新博客文章地址: ...
- Prism 8 官方文档翻译 -- 下载安装Prism v8
Prism 8 官方文档翻译 – 下载安装Prism v8 第一步:安装系统依赖项 Prism设计为在Microsoft Windows 8桌面,Microsoft Windows 7,Windows ...
- About HTTP Live Streaming官方文档翻译 [iOS]
新博客地址:About HTTP Live Streaming官方文档翻译 [iOS] 版权声明:本文为博主原创翻译,如需转载请注明出处. 苹果源文档地址 - 点击这里 About HTTP Live ...
- 170多个Ionic Framework学习资源(转载)
在Ionic官网找到的学习资源:http://blog.ionic.io/learning-ionic-in-your-living-room/ 网上的文章比较多,但是很多时候我们很难找到自己需要的. ...
- 欢迎参与 KubeVela 官方文档翻译活动
来源 | 阿里巴巴云原生公众号 背景 KubeVela v1.0 启用了新的官网架构和文档维护方式,新增功能包括文档版本化控制.i18n 国际化以及自动化流程.但目前 KubeVela 官方文档只有英 ...
- UIControl事件---iOS-Apple苹果官方文档翻译
本系列所有开发文档翻译链接地址: iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址 UIControl事件1.UIControlEventTouchDown 单点触摸按 ...
- 【KubeVela 官方文档翻译】,欢迎大家踊跃参与
简介:KubeVela v1.0 启用了新的官网架构和文档维护方式,新增功能包括文档版本化控制.i18n 国际化以及自动化流程.但目前 KubeVela 官方文档只有英文版,这提高了学习和使用 Kub ...
- UIPageControl---iOS-Apple苹果官方文档翻译
本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址 //转载请注明出处--本文永久链接:http://www.cnblogs.com/Ch ...
最新文章
- [6] 测试用例管理工具的需求整理
- springmvc_3(将数据放入map中)
- BTA 常问的 Java基础40道常见面试题及详细答案,java初级面试笔试题
- 494. Target Sum
- 【Codeforces】Chloe and the sequence (递归)
- js检测PDF插件 Adobe Reader是否安装
- H5页面调用手机打电话功能
- deadmau5 《光之塔》 NFT 系列来袭!
- PHP正则过滤处理微信昵称中emoji字符的方法(导出excel)
- matlab频率域滤波器,频率域滤波的MATLAB设计与实现_课程设计
- 在Java中如何跳出当前的多重嵌套循环?
- php carbon 格式化,PHP Carbon
- 深度揭秘:抖音短视频一天涨粉一万怎么做:国仁楠哥
- Visio双击形状编辑文字
- 485转以太网通讯测试软件,RS485转以太网的应用、解决方案 - 通信设计应用 - 电子发烧友网...
- 分子偶极矩大小如何判断_如何判断分子极性的大小
- OGC标准介绍 20
- Android实战 - 音心音乐播发器 (主界面实现)
- opencv中waitkey(0)的使用
- MPC-M601 10Mbit/s高速逻辑门光电耦合器 代替LTV-M601
热门文章
- python 读取文件转txt crnn
- 蒸汽机器人布里茨天赋_lol机器人S6天赋加点图|2016赛季英雄联盟蒸汽机器人布里茨S6天赋、出装、符文加点最新全攻略_好特教程...
- python的JSON用法——dumps的各种参数用法(详细)
- 《淘宝技术这十年》使用LAMP架构开发的网站
- Windows自带的Microsoft Edge浏览器经常出现无法访问网络的情况,检测网络却是正常,而这个浏览器使用的谷歌引擎,自我体验还算不错,所以也不想放弃
- android socket 简易聊天室 java服务器,Android Socket通信实现简单聊天室
- 【攻防世界】十二、功夫再高也怕菜刀
- 114个实用电子小常识,一般人都不知道!
- jqGrid调整宽度
- JS编写 最大公约数和最小公倍数