跳到主要内容
版本:v6.

你的第一个离子应用程序betway东盟体育app:角度

关于离子的伟大事物是使用一个代码库,您可以使betway东盟体育app用HTML,CSS和JavaScript为任何平台构建。随着我们通过创建现实应用程序一步一步地学习离子应用程序开发的基本面。betway东盟体育app

以下是所有3个平台上运行的已完成应用程序:

我们将建立什么

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

亮点包括:

  • 使用IONIC框架在Web,iOS和Android上运行的一个基于角的码字betway东盟体育appUI组件
  • 部署为使用本机IOS和Android移动应用程序使用电容器,离betway东盟体育app子的官方本机应用程序运行时。
  • 照片库功能由电容器提供动力相机文件系统, 和贮存蜜蜂。

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

下载所需的工具

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

  • node.js.与离子生态系统相互作用。betway东盟体育app下载LTS版本
  • 代码编辑器for ...写作代码!我们是粉丝Visual Studio Code.
  • 命令行界面/终端(CLI)
    • 视窗用户:为最好的离子体验,我们推荐内置命令betway东盟体育app行(CMD)或PowerShell CLI,以管理员模式运行。
    • Mac / Linux.用户,几乎任何终端都将起作用。

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

在命令行终端中运行以下操作以安装IONIC CLI(betway东盟体育appbetway东盟体育app),原始运行,用于在设备和模拟器/模拟器上运行本机二进制文件,以及Cordova-Res.,用于生成本机应用程序图标和Splash屏幕:

笔记

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

$NPM.安装-g @betway东盟体育app离子/ cli本地运行cordova-res
笔记

-G选项含义全球安装。全局安装包时,EACCES.可能发生权限错误。

考虑在没有提升的权限的情况下设置设置NPM以在全局中运行。看解决许可错误了解更多信息。

创建一个应用程序

接下来,创建一个使用“选项卡”启betway东盟体育app动模板的离子角度应用程序,并为本机功能添加电容:

$ betway东盟体育appionic start photo-gallery标签 -  type=角度 - 电容器

这项初学项目配备了三个预先构建的页面和离子发展的最佳实践。betway东盟体育app通过已经到位的共同构建块,我们可以轻松添加更多功能!

接下来,更改为App文件夹:

$光盘照片库

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

NPM.安装@电容/摄像机@电容/存储@电容/文件系统

PWA元素

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

这是一个单独的依赖性,所以下一步安装它:

$NPM.安装@betway东盟体育app离子/ PWA元素

接下来,进口@betway东盟体育app离子/ PWA元素通过编辑SRC / MAIN.TS.

进口{定义}'@betway东盟体育app ionic / pwa-comments / loader';

//在平台引导后调用元素加载器
定义窗户的);

而已!现在,为了有趣的部分 - 让我们看看应用程序。

运行应用程序

运行此命令下一步:

$离betway东盟体育app子服务

和voilà!您的IONbetway东盟体育appIC应用程序现在在Web浏览器中运行。您的大多数应用程序都可以在浏览器中进行建立和测试,大大提高开发和测试速度。

有三个标签。单击Tab2选项卡。这是一个空白的帆布,又是转换为照片库的完美位置。离子CLbetway东盟体育appI具有实时重新加载,因此当您进行更改并保存时,该应用程序立即更新!

经过本教程之前和之后“src=

在Coply的代码编辑器中打开照片库应用程序文件夹,然后导航到/src/app/tab2/tab2.page.html.。我们看:

<离子标题>
<离子工具栏>
<离子标题>标签2离子标题>
离子工具栏>
离子标题>

<离子内容>
<离子标题坍塌=凝结>
<离子工具栏>
<离子标题尺寸=>标签2离子标题>
离子工具栏>
离子标题>
离子内容>

离子标题代表顶部导航和工具栏,“标签2”作为标题(由于iOS而有两个可折叠大标题支持)。重命名离子标题元素:

<离子标题>照片库离子标题>

我们将我们的应用程序的视觉方面放入<离子内容>。在这种情况下,我们将添加打开设备相机的按钮,并显示相机捕获的图像。首先添加一个浮动动作按钮(Fab)到页面底部并将相机图像设置为图标。

<离子内容>
<离子制造垂直的=底部水平的=中央投币口=固定的>
<离子 - Fab-按钮>
<离子图标姓名=相机>离子图标>
离子 - Fab-按钮>
离子制造>
离子内容>

接下来,开放src / app / tabs / tabs.page.html。将标签更改为“照片”和“图像”的图标名称:

<离子标签按钮标签=标签>
<离子图标姓名=图片>离子图标>
<离子标签>相片离子标签>
离子标签按钮>

保存所有更改以查看它们在浏览器中自动应用。这只是我们可以用离子可以做的所有酷东西的开始。betway东盟体育app接下来,在Web上实现摄像机,然后为iOS和Android构建它。

Baidu