你的第一个离子应用程序betway东盟体育app:Vue
Ionic的伟大之处在于，只需一个代码库，就betway东盟体育app可以使用HTML、CSS和JavaScript为任何平台进行构建。我们通过一步一步地创建一个真实的应用程序来学习Ionic应用程序开发的基础知识。betway东盟体育app
以下是在所有3个平台上运行的成品应用:
我们将构建
我们将创建一个Photo Gallery应用程序，它提供了用设备的相机拍照、在网格中显示照片并永久存储在设备上的功能。
亮点包括:
- 一个基于vue的代码库，使用Ionic Framework在web、iOS和Android上运行betway东盟体育app2018必威体育下载 ．
- 部署为原生iOS和Android移动应用程序使用 电容器 ， betway东盟体育appIonic的官方本地应用运行时。
- 图片库功能由电容器供电 相机 ， 文件系统 , 存储 api。
在本指南中找到完整的应用程序代码 GitHub上 ．
下载所需的工具
立即下载并安装这些，以确保最佳的离子开发体验:betway东盟体育app
- node . js 与离子生态系统相互作用。betway东盟体育app 在这里下载LTS版本 ．
- 一个代码编辑器 为…写代码!我们是 Visual Studio代码 ．
-
命令行接口(CLI) /终端
：
- 窗户 用户:为了获得最好的Ionic体验，我们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@latest本地运行cordova-res的
- g选择意味着 在全球范围内安装 ．在全局安装包时，EACCES可能会出现权限错误。考虑将npm设置为在不增加权限的情况下全局运行。看到
解决权限错误 为更多的信息。
创建一个应用程序
接下来，创建一个Ionic Vubetway东盟体育appe应用程序，使用“Tabs”起始模板，并为本地功能添加电容:
＄
betway东盟体育app离子启动相册标签-类型vue -电容这个初始项目有三个预先构建的页面和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 / main.ts
．
//在createApp()行之上
进口
｛
defineCustomElements
｝
从
“@betway东盟体育appionic / pwa-elements /加载程序”
；
//在平台启动后调用元素加载器
defineCustomElements
（
窗口
）
；就是这样!现在到了有趣的部分——让我们看看应用程序的运行情况。
运行应用程序
在你的shell中运行这个命令:
＄
betway东盟体育app离子服务瞧!你的Ionbetway东盟体育appic应用程序现在运行在一个网络浏览器中。你的大部分应用都可以在浏览器中构建和测试，这大大提高了开发和测试速度。
相册! !
有三个选项卡。单击Tab2选项卡。这是一张空白的画布，也就是转换成图片库的完美地点。Ionibetway东盟体育appc CLI具有Live Reload功能，所以当你做出更改并保存它们时，应用程序会立即更新!
开放
/ src /视图/ Tab2.vue
．我们看到:
<
模板
>
<
ion-page
>
<
ion-header
>
<
ion-toolbar
>
<
ion-title
>
选项卡2
ion-title
>
ion-toolbar
>
ion-header
>
<
离子含量
:全屏
＝
＂
真正的
＂
>
<
ion-header
崩溃
＝
＂
浓缩
＂
>
<
ion-toolbar
>
<
ion-title
大小
＝
＂
大
＂
>
选项卡2
ion-title
>
ion-toolbar
>
ion-header
>
<
ExploreContainer
的名字
＝
＂
选项卡2页
＂
/>
离子含量
>
ion-page
>
模板
>
ion-header
表示顶部导航和工具栏，标题为“Tab 2”。让我们重命名:
<
ion-title
>
相片画廊
ion-title
>
我们把我们的应用的视觉方面
<离子含量>
．在本例中，我们将在这里添加一个按钮，以打开设备的摄像头并显示摄像头捕获的图像。但首先，移除
ExploreContainer
组件，从import语句开始:
进口
ExploreContainer
从
“@ /组件/ ExploreContainer.vue”
；
接下来，删除组件名称(
ExploreContainer
)
组件
列表中的默认导出和HTML:
<
ExploreContainer
的名字
＝
＂
选项卡2页
＂
/>
我们把它换成a
浮动操作按钮
(工厂)。首先，更新
< >脚本
标签包含Camera图标以及我们稍后将使用的一些Ionic组件:betway东盟体育app
进口
｛
相机
，
垃圾
，
关闭
｝
从
“betway东盟体育appionicons /图标”
；
进口
｛
IonPage
，
IonHeader
，
IonFab
，
IonFabButton
，
betway东盟体育appIonIcon
，
IonToolbar
，
IonTitle
，
IonContent
，
IonGrid
，
IonRow
，
IonCol
，
IonImg
｝
从
“@betway东盟体育appionic / vue”
；
接下来，添加新的离子组件，我们将使用betway东盟体育app默认导出，并返回离子在
设置()
方法的一部分
构成API
)：
出口
默认的
｛
的名字
：
“Tab2”
，
组件
：
｛
IonPage
，
IonHeader
，
IonFab
，
IonFabButton
，
betway东盟体育appIonIcon
，
IonToolbar
，
IonTitle
，
IonContent
，
IonGrid
，
IonRow
，
IonCol
，
IonImg
｝
，
设置
（
）
｛
返回
｛
相机
，
垃圾
，
关闭
｝
｝
｝
然后，将FAB添加到页面底部。使用相机图像作为图标，并调用
takePhoto ()
函数时，单击此按钮(即将实现):
<
离子含量
:全屏
＝
＂
真正的
＂
>
<
ion-fab
垂直
＝
＂
底
＂
水平
＝
＂
中心
＂
槽
＝
＂
固定
＂
>
<
ion-fab-button
@click
＝
＂
takePhoto ()
＂
>
<
ion-icon
:图标
＝
＂
相机
＂
>
ion-icon
>
ion-fab-button
>
ion-fab
>
离子含量
>
我们将创建
takePhoto
方法和逻辑使用相机和其他本地功能。
接下来,打开
src /视图/ Tabs.vue
然后导入
图片
图标:
进口
｛
图片
，
广场
，
三角形
｝
从
“betway东盟体育appionicons /图标”
；
在标签栏内(
< ion-tab-bar >
)，将标签改为“照片”，图标改为
图片
对于中间的TAB按钮:
<
ion-tab-button
选项卡
＝
＂
tab2
＂
href
＝
＂
/标签/ tab2
＂
>
<
ion-icon
:图标
＝
＂
图片
＂
/>
<
ion-label
>
照片
ion-label
>
ion-tab-button
>这只是爱奥尼亚可以做的所有酷事情的开始。betway东盟体育app接下来，在网页上实现摄像功能，然后针对iOS和Android开发。
