搜索文档 /

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

Ionic最棒的地方在于,只需一个代码库,您betway东盟体育app就可以使用HTML、CSS和JavaScript为任何平台构建代码。跟随我们学习离子应用程序开发的基础,通过创建一个现实的应用程序一步一步。betway东盟体育app

以下是在所有3个平台上运行的最终应用程序:

寻找本指南的先前版本,其中包括离子4和Cordova?betway东盟体育app 看这里。

我们将构建

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

亮点包括:

  • 一个基于angular的代码库,使用Ionic Framework在web、iOS和Android上运行betway东盟体育app2018必威体育下载
  • 作为本地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代码中打开终端,请转到终端 - >新终端。


              
              npm
             
              安装
             -g @betway东盟体育appionic/cli native-run cordova-res

-G 选择意味着 在全球范围内安装 .在全局安装包时, EACCES 可能发生权限错误。

考虑将npm设置为全局操作而不增加权限。看到 解决许可错误 为更多的信息。

创建一个应用程序

接下来,创建一个使用“Tabs”betway东盟体育app启动器模板的Ionic Angular应用,并为原生功能添加Capacitor:


              
             betway东盟体育app离子开始图片库标签-类型
              
             角——电容器

这个启动项目包含三个预构建页面和用于Ionic开发的最佳实践。betway东盟体育app有了通用的构建块,我们可以轻松地添加更多功能!

接下来,切换到app文件夹:


              
              cd
             相片画廊

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


              npm
             
              安装
             @capacitor /相机@capacitor /存储@capacitor /文件系统

PWA元素

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

它是一个独立的依赖项,所以接下来安装它:


              
              npm
             
              安装
             @betway东盟体育app离子/ PWA元素

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


              进口
             
              
             defineCustomElements
              
             
              
             
              “@betway东盟体育appionic / pwa-elements /加载程序”
              
             
              //在平台被引导之后调用元素加载器
             
              defineCustomElements
              
             窗口
              
              
复制 复制

就是这样!现在是有趣的部分——让我们看看应用程序的运行。

运行应用程序

运行此命令下一步:


              
             betway东盟体育app离子服务

瞧!您的Ionbetway东盟体育appic应用程序现在正在浏览器中运行。你的大多数应用都可以在浏览器中构建和测试,这大大提高了开发和测试速度。

有三个标签。单击Tab2选项卡。这是一张空白的画布,也就是转换成图片库的完美地点。Ionibetway东盟体育appc CLI的功能是实时加载,所以当你做出更改并保存它们时,应用程序会立即更新!

经过本教程之前和之后"c-id=

在选择的代码编辑器中打开photo-gallery应用程序文件夹,然后导航到 / src / app / tab2 / tab2.page.html .我们看到:


                <
               离子标题
               >
             
                <
               ion-toolbar
               >
             
                <
               ion-title
               >
             选项卡2
                
               ion-title
               >
             
                
               ion-toolbar
               >
             
                
               离子标题
               >
             
                <
               离子内容
               >
             
                <
               离子标题
              
               坍塌
                
                
               凝结
                
               >
             
                <
               ion-toolbar
               >
             
                <
               ion-title
              
               大小
                
                
               
                
               >
             选项卡2
                
               ion-title
               >
             
                
               ion-toolbar
               >
             
                
               离子标题
               >
             
                
               离子内容
               >
复制 复制

离子标题 表示顶部导航和工具栏,以“Tab 2”作为标题(由于iOS,有两个选项) 可折叠的大标题 支持)。重命名这两个 ion-title 元素:


                <
               ion-title
               >
             照片库
                
               ion-title
               >
复制 复制

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


                <
               离子内容
               >
             
                <
               ion-fab
              
               垂直
                
                
               底部
                
              
               水平
                
                
               中心
                
              
               投币口
                
                
               固定
                
               >
             
                <
               ion-fab-button
               >
             
                <
               ion-icon
              
               的名字
                
                
               相机
                
               >
                
               ion-icon
               >
             
                
               ion-fab-button
               >
             
                
               ion-fab
               >
             
                
               离子内容
               >
复制 复制

接下来,打开 src / app /标签/ tabs.page.html .更改标签为“Photos”,图标名称为“images”:


                <
               ion-tab-button
              
               标签
                
                
               tab2
                
               >
             
                <
               ion-icon
              
               的名字
                
                
               图片
                
               >
                
               ion-icon
               >
             
                <
               ion-label
               >
             照片
                
               ion-label
               >
             
                
               ion-tab-button
               >
复制 复制

保存所有更改,以便在浏览器中自动应用。这只是我们可以用爱奥尼亚做的一切很酷的事情的开始。betway东盟体育app接下来,在网页上实现摄像功能,然后针对iOS和Android开发。

以前的
概述
下一个
拍照
Baidu