你的第一个离子应用:Rbetway东盟体育appeact
Ionic最棒的地方在于,只需一个代码库,您betway东盟体育app就可以使用HTML、CSS和JavaScript为任何平台构建代码。跟随我们学习离子应用程序开发的基础,通过创建一个现实的应用程序一步一步。betway东盟体育app
以下是在所有3个平台上运行的最终应用程序:
我们将构建
我们将创建一个Photo Gallery应用程序,它提供了用设备的相机拍照、在网格中显示照片并永久存储在设备上的功能。
亮点包括:
- 一个基于反应的代码库,使用离子框架运行在web、iOS和Android上betway东盟体育app UI组件 .
- 作为本地iOS和Android移动应用程序部署使用 电容器 , betway东盟体育appIonic的官方原生应用运行时。
- 照片库功能由电容器供电 相机 , 文件系统 , 存储 api。
找到本指南中引用的完整的应用程序代码 GitHub上 .
下载所需的工具
下载和安装这些立即确保最佳的离子开发体验:betway东盟体育app
- node . js 与离子生态系统相互作用。betway东盟体育app 请在此下载LTS版本 .
- 一个代码编辑器 为…写代码!我们是 Visual Studio代码 .
-
命令行接口(CLI) /终端
:
- 窗户 用户:为了获得最佳的离子体验,我们推荐内betway东盟体育app置命令行(cmd)或Powershell CLI,运行在管理员模式。
- Mac / Linux 用户,几乎任何终端都可以工作。
安装离子工具betway东盟体育app
在命令行终端中执行如下命令安装Ionic CLI (betway东盟体育app
betway东盟体育app
),
native-run
,用于在设备和模拟器/模拟器上运行本机二进制文件
cordova-res
,用于生成原生应用图标和启动画面:
要在Visual Studio Code中打开终端,请转到terminal -> New terminal。
$
npm
安装
-g @betway东盟体育appionic/cli native-run cordova-res
的
- g
选择意味着 在全球范围内安装 .在全局安装包时,EACCES
可能发生权限错误。考虑将npm设置为全局操作而不增加权限。看到
解决权限错误 为更多的信息。
创建一个应用程序
接下来,创建一个离子反应应用程序betway东盟体育app,使用“标签”的启动模板,并为本地功能添加电容器:
$
betway东盟体育app离子开始图片库标签-类型
=
反应——电容器
这个启动项目包含三个预构建页面和用于Ionic开发的最佳实践。betway东盟体育app有了通用的构建块,我们可以轻松地添加更多功能!
接下来,切换到app文件夹:
$
cd
相片画廊
接下来,我们需要安装必要的电容插件,使应用程序的本地功能工作:
npm
安装
@capacitor /相机@capacitor /存储@capacitor /文件系统
PWA元素
一些电容插件,包括Camera API,通过Ionic提供了基于web的功能和UIbetway东盟体育app PWA元素库 .
它是一个独立的依赖项,所以接下来安装它:
$
npm
安装
@betway东盟体育appionic / pwa-elements
安装后,在选择的代码编辑器中打开项目。
接下来,进口
@betway东盟体育appionic / pwa-elements
通过编辑
src / index.tsx
.
进口
{
defineCustomElements
}
从
“@betway东盟体育appionic / pwa-elements /加载程序”
;
//在平台被引导之后调用元素加载器
defineCustomElements
(
窗口
)
;
就是这样!现在是有趣的部分——让我们看看应用程序的运行。
运行应用程序
在你的shell中运行这个命令:
$
betway东盟体育app离子服务
瞧!您的Ionbetway东盟体育appic应用程序现在正在浏览器中运行。你的大多数应用都可以在浏览器中构建和测试,这大大提高了开发和测试速度。
相册! !
有三个标签。单击Tab2选项卡。这是一张空白的画布,也就是转换成图片库的完美地点。Ionibetway东盟体育appc CLI的功能是实时加载,所以当你做出更改并保存它们时,应用程序会立即更新!
开放
/ src /页面/ Tab2.tsx
.我们看到:
<
IonPage
>
<
IonHeader
>
<
IonToolbar
>
<
IonTitle
>
选项卡
2
<
/
IonTitle
>
<
/
IonToolbar
>
<
/
IonHeader
>
<
IonContent
>
<
!
--
一些填料
--
>
<
/
IonContent
>
<
/
IonPage
>
IonHeader
表示顶部导航和工具栏,标题为“Tab 2”。让我们重命名:
<
IonTitle
>
相片画廊
<
/
IonTitle
>
我们把我们的应用的视觉方面
< IonContent >
.在本例中,我们将在这里添加一个按钮,以打开设备的摄像头并显示摄像头捕获的图像。首先添加一个
浮动操作按钮
(工厂)。首先,更新页面顶部的导入,包括摄像机图标和一些离子组件,我们将很快使用:betway东盟体育app
进口
{
相机
,
垃圾
,
关闭
}
从
“betway东盟体育appionicons /图标”
;
进口
{
IonContent
,
IonHeader
,
IonPage
,
IonTitle
,
IonToolbar
,
IonFab
,
IonFabButton
,
betway东盟体育appIonIcon
,
IonGrid
,
IonRow
,
IonCol
,
IonImg
,
IonActionSheet
}
从
“@betway东盟体育appionic /反应”
;
然后,将FAB添加到页面底部。使用摄像机图像作为图标,并调用
takePhoto ()
函数,当点击此按钮时(即将实现):
<
IonContent
>
<
IonFab垂直
=
“底”
水平
=
“中心”
槽
=
“固定”
>
<
IonFabButton onClick
=
{
(
)
=>
takePhoto
(
)
}
>
<
betway东盟体育appIonIcon图标
=
{
相机
}
>
<
/
betway东盟体育appIonIcon
>
<
/
IonFabButton
>
<
/
IonFab
>
<
/
IonContent
>
我们将创建
takePhoto
方法和逻辑来使用相机和其他原生功能。
接下来,打开
src / App.tsx
然后导入
图片
图标:
进口
{
图片
,
广场
,
三角形
}
从
“betway东盟体育appionicons /图标”
;
在标签栏内(
< IonTabBar >
),将标签改为“照片”,图标改为
图片
对于中间的TAB按钮:
<
IonTabButton选项卡
=
“tab2”
href
=
“/ tab2”
>
<
betway东盟体育appIonIcon图标
=
{
图片
}
/
>
<
IonLabel
>
照片
<
/
IonLabel
>
<
/
IonTabButton
>
在Iobetway东盟体育appnic React中,图标是单独导入的
betway东盟体育appionicons /图标
并设置为图标prop。
这只是我们可以用爱奥尼亚做的一切很酷的事情的开始。betway东盟体育app接下来,在网页上实现摄像功能,然后针对iOS和Android开发。