搜索文档 /

你的第一个离子应用: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开发。

以前的
快速入门
下一个
拍照
Baidu