搜索文档 /

您的第一个离子应用程序betway东盟体育app:React

关于Ionic的好处是,使用一个代码库,您可betway东盟体育app以仅使用HTML,CSS和JavaScript为任何平台构建。遵循我们通过逐步创建现实的应用程序来了解离子应用程序开发的基础。betway东盟体育app

这是在所有3个平台上运行的完成的应用程序:

我们会建立什么

我们将创建一个照片库应用程序,该应用程序能够使用设备的相机拍摄照片,将其显示在网格中,然后将它们永久存储在设备上。

亮点包括:

  • 使用离子框架在网络,iOS和Android上运行的一个基于React的代码库betway东盟体育app2018必威体育下载
  • 使用本机iOS和Android移动应用程序部署 电容器 ,Ibetway东盟体育apponic的官方本机应用程序运行时。
  • 电容器驱动的照片库功能 相机 ,,,, 文件系统 , 和 贮存 蜜蜂。

在本指南中找到完整的应用程序代码 在github上

下载所需的工具

立即下载并安装它们,以确保最佳的离子开发体验:betway东盟体育app

  • node.js 用于与离子生态系统互动。betway东盟体育app 在此处下载LTS版本
  • 代码编辑器 对于...编写代码!我们是 Visual Studio代码
  • 命令行接口/终端(CLI)
    • 视窗 用户:为了获得最佳的离子体验,我们建议您betway东盟体育app在管理员模式下运行的内置命令行(CMD)或PowerShell CLI。
    • MAC/Linux 用户,几乎任何终端都可以工作。

安装离子工具betway东盟体育app

在命令行终端中运行以下内容以安装离子CLI(betway东盟体育app betway东盟体育app ), 本地经营 ,用于在设备和模拟器/仿真器上运行本地二进制文件,以及 Cordova-Res ,用于生成本机应用图标和溅出屏幕:

要打开Visual Studio代码中的终端,请转到终端 - >新终端。


              $
              NPM
             
              安装
             -g @betway东盟体育appionic/cli本地运行科尔多瓦 -

-G 选项手段 全球安装 。当包装在全球安装时, eacces 可能会发生权限错误。

考虑设置NPM在全球范围内运行,而无需提高权限。看 解决权限错误 了解更多信息。

创建一个应用程序

接下来,创建一个使用“ TABSbetway东盟体育app”启动模板的离子React应用程序,并添加了本机功能的电容器:


              $
             betway东盟体育app离子开始照相馆选项卡 - 类型
              =
             反应 - 容量

该入门项目配备了三个预先建造的页面和离子开发的最佳实践。betway东盟体育app有了常见的构建块,我们可以轻松添加更多功能!

接下来,更改为应用程序文件夹:


              $
              光盘
             照片库

接下来,我们需要安装必要的电容器插件来使应用程序的本地功能起作用:


              NPM
             
              安装
             @Capacitor/Camera @Capacitor/storegation @Capacitor/Filesystem

PWA元素

一些电容器插件,包括相机API,通过离子提供基于Web的功能和UIbetway东盟体育app PWA元素库

这是一个单独的依赖性,因此接下来安装它:


              $
              NPM
             
              安装
             @betway东盟体育appionic/pwa元素

安装后,在选择的代码编辑器中打开项目。

接下来,导入 @betway东盟体育appionic/pwa元素 通过编辑 src/index.tsx


              进口
             
              {
             定位量
              }
             
              
             
              '@betway东盟体育appionic/pwa-元素/加载程序'
              ;
             
              //在平台被引导后调用元素加载程序
             
              定位量
              ((
             窗户
              
              ;
复制 复制

就是这样!现在为了有趣的部分 - 让我们看看应用程序中的应用程序。

运行应用程序

在您的外壳中运行此命令:


              $
             betway东盟体育app离子发球

和瞧!您的离子应betway东盟体育app用程序现在正在Web浏览器中运行。您的大多数应用程序都可以在浏览器中构建和测试,从而大大提高开发和测试速度。

有三个标签。单击“ Tab2”选项卡。这是一个空白的画布,也就是转变为照片库的理想场所。离子CLbetway东盟体育appI功能实时重新加载,因此,当您进行更改并保存它们时,该应用会立即更新!

经过本教程之前和之后

打开 /src/pages/tab2.tsx 。我们看:


              <
             离子页
              >
             
              <
             离子
              >
             
              <
             Iontoolbar
              >
             
              <
             离子
              >
             标签
              2
              <
              /
             离子
              >
             
              <
              /
             Iontoolbar
              >
             
              <
              /
             离子
              >
             
              <
             离子体
              >
             
              <
              
              -   -
             一些填充物
              -   -
              >
             
              <
              /
             离子体
              >
             
              <
              /
             离子页
              >
复制 复制

离子 代表顶部导航和工具栏,以“ TAB 2”为标题。让我们重命名:


              <
             离子
              >
             照片库
              <
              /
             离子
              >
复制 复制

我们将应用程序的视觉方面放入 。在这种情况下,我们将添加一个按钮,该按钮可以打开设备的相机并显示相机捕获的图像。首先添加一个 浮动动作按钮 (晶圆厂)。首先,更新页面顶部的导入,以包括相机图标以及我们尽快使用的一些离子组件:betway东盟体育app


              进口
             
              {
             相机
              ,,,,
             垃圾
              ,,,,
             关闭
              }
             
              
             
              “betway东盟体育app离子/图标”
              ;
             
              进口
             
              {
             离子体
              ,,,,
             离子
              ,,,,
             离子页
              ,,,,
             离子
              ,,,,
             Iontoolbar
              ,,,,
             离子
              ,,,,
             离子法顿
              ,,,,
             betway东盟体育app离子
              ,,,,
             离子格里德
              ,,,,
             离子
              ,,,,
             离子
              ,,,,
             Ionimg
              ,,,,
             Ionactionsheet
              }
             
              
             
              '@betway东盟体育appionic/react'
              ;
复制 复制

然后,将FAB添加到页面底部。使用相机图像作为图标,并调用 拍照() 单击此按钮时功能(尽快实现):


              <
             离子体
              >
             
              <
             离子垂直
              =
              “底部”
             水平的
              =
              “中央”
             投币口
              =
              “固定的”
              >
             
              <
             Ionfabbutton onClick
              =
              {
              ((
              
             
              =>
             
              拍照
              ((
              
              }
              >
             
              <
             betway东盟体育appIonicon图标
              =
              {
             相机
              }
              >
              <
              /
             betway东盟体育app离子
              >
             
              <
              /
             离子法顿
              >
             
              <
              /
             离子
              >
             
              <
              /
             离子体
              >
复制 复制

我们将创建 拍照 方法和逻辑稍后使用相机和其他本机功能。

接下来,打开 src/app.tsx 然后导入 图片 图标:


              进口
             
              {
             图片
              ,,,,
             正方形
              ,,,,
             三角形
              }
             
              
             
              “betway东盟体育app离子/图标”
              ;
复制 复制

在标签栏中( ),将标签更改为“照片”,将图标更改为 图片 对于中间选项卡按钮:


              <
             Iontabbutton标签
              =
              “ TAB2”
             HREF
              =
              “/tab2”
              >
             
              <
             betway东盟体育appIonicon图标
              =
              {
             图片
              }
             
              /
              >
             
              <
             离子标签
              >
             相片
              <
              /
             离子标签
              >
             
              <
              /
             Iontabbutton
              >
复制 复制

在离子betway东盟体育app反应中,图标是单独导入的 betway东盟体育app离子/图标 并设置为图标道具。

这仅仅是我们可以使用Ionic所能做的所有酷事的开始。betway东盟体育app接下来,在网络上实现摄像机的功能,然后为iOS和Android构建它。

以前的
快速开始
下一个
拍照
Baidu