通过现场重新加载快速应用程序开发/h1>
到目前为止,我们已经看到开发一个无处不在的跨平台应用程序是多么容易。开发体验很快,但是如果我告诉您有一个更快的方法怎么办?//p>
我们可以使用离子CLI的betway东盟体育app
实时重新加载功能/a>
在构建离子应用程序时提高我们的生产率。betway东盟体育app当活动活动时,当检测到应用程序中的更改时,Live Reload将重新加载浏览器和/或WebView。//p>
现场重新加载/a>
记住
betway东盟体育app离子发球/code>
?那是在浏览器中实时重新加载,使我们能够迅速迭代。//p>
在iOS和Android设备上开发时,我们也可以使用它。当编写与本机插件交互的代码时,这特别有用。由于我们需要在设备上运行本机插件代码,以验证它有效,有一种方法可以快速编写代码,构建和部署它,然后测试它对于保持我们的开发速度至关重要。//p>
让我们使用现场重新加载来实现照片删除,这是我们照片库功能的缺失部分。选择您选择的平台(iOS或Android),然后将设备连接到计算机。接下来,基于您选择的平台在终端中运行任一命令://p>
$/span>
betway东盟体育app离子帽运行iOS -L-外部
$/span>
betway东盟体育app离子帽运行Android -L-外部/code>
实时重新加载服务器将启动,如果尚未打开,则选择的本机IDE将打开。在IDE中,单击“播放”按钮将应用程序启动到您的设备上。//p>
删除照片/a>
通过实时重新加载运行,该应用程序在您的设备上打开,让我们实现照片删除功能。打开
tab2.vue/code>
然后导入
ActionSheetController/code>
。我们将显示一个
Ionactionsheet/a>
可以选择删除照片:/p>
进口/span>
{//span>
ActionSheetController
,,,,/span>
离子页
,,,,/span>
离子
,,,,/span>
离子
,,,,/span>
离子法顿
,,,,/span>
betway东盟体育app离子
,,,,/span>
Iontoolbar
,,,,/span>
离子
,,,,/span>
离子体
,,,,/span>
Ionimg
,,,,/span>
离子格里德
,,,,/span>
离子
,,,,/span>
离子
}//span>
从/span>
'@betway东盟体育appionic/vue'/span>
;/span>
//其他导入/span>
接下来,引用
Deletephoto/code>
功能,我们将尽快创建:/p>
设置/span>
((/span>
)/span>
{//span>
}//span>
const/span>
{//span>
相片
,,,,/span>
拍照
,,,,/span>
Deletephoto
}//span>
=//span>
usephotogallery/span>
((/span>
)/span>
;/span>
}//span>
当用户在图像上单击/点击时,我们将显示动作表。将点击处理程序添加到
/code>
元素:/p>
<//span>
离子img/span>
:src/span>
=//span>
“/span>
photo.WebViewPath
“/span>
@点击/span>
=//span>
“/span>
Showactionsheet(照片)
“/span>
>//span>
//span>
离子img/span>
>//span>
接下来,内部
设置()/code>
,致电
创造/code>
函数可以打开对话框,该选项以删除选定的照片或取消(关闭)对话框:/p>
const/span>
Showactionsheet/span>
=//span>
异步/span>
((/span>
照片
:/span>
照片/span>
)/span>
=>/span>
{//span>
const/span>
ActionSheet
=//span>
等待/span>
ActionSheetController
。/span>
创造/span>
((/span>
{//span>
标题
:/span>
'相片'/span>
,,,,/span>
纽扣
:/span>
[[//span>
{//span>
文本
:/span>
'删除'/span>
,,,,/span>
角色
:/span>
“破坏性”/span>
,,,,/span>
图标
:/span>
垃圾
,,,,/span>
处理程序/span>
:/span>
((/span>
)/span>
=>/span>
{//span>
Deletephoto/span>
((/span>
照片
)/span>
;/span>
}//span>
}//span>
,,,,/span>
{//span>
文本
:/span>
'取消'/span>
,,,,/span>
图标
:/span>
关闭
,,,,/span>
角色
:/span>
'取消'/span>
,,,,/span>
处理程序/span>
:/span>
((/span>
)/span>
=>/span>
{//span>
//无事可做,动作表将自动关闭/span>
}//span>
}//span>
这是给予的//span>
}//span>
)/span>
;/span>
等待/span>
ActionSheet
。/span>
展示/span>
((/span>
)/span>
;/span>
}//span>
接下来,返回
Showactionsheet/code>
功能:/p>
返回/span>
{//span>
相片
,,,,/span>
拍照
,,,,/span>
Showactionsheet
,,,,/span>
相机
,,,,/span>
垃圾
,,,,/span>
关闭
}//span>
接下来,我们需要实施
Deletephoto/code>
方法中的方法
usephotogallery/code>
功能。打开文件,然后添加://p>
const/span>
Deletephoto/span>
=//span>
异步/span>
((/span>
照片
:/span>
照片/span>
)/span>
=>/span>
{//span>
//从照片参考数据阵列中删除此照片/span>
相片
。/span>
价值
=//span>
相片
。/span>
价值
。/span>
筛选/span>
((/span>
p//span>
=>/span>
p
。/span>
文件路径
!==/span>
照片
。/span>
文件路径
)/span>
;/span>
//从文件系统删除照片文件/span>
const/span>
文件名
=//span>
照片
。/span>
文件路径
。/span>
基德/span>
((/span>
照片
。/span>
文件路径
。/span>
LastIndexof/span>
((/span>
'/'/span>
)/span>
+/span>
1/span>
)/span>
;/span>
等待/span>
文件系统
。/span>
删除文件/span>
((/span>
{//span>
小路
:/span>
文件名
,,,,/span>
目录
:/span>
目录
。/span>
数据
}//span>
)/span>
;/span>
}//span>
;/span>
选定的照片从
相片/code>
阵列首先,然后使用文件系统API删除照片文件。/p>
请记住,从
相片/code>
阵列触发
cachephotos/code>
自动对我们的功能:/p>
const/span>
cachephotos/span>
=//span>
((/span>
)/span>
=>/span>
{//span>
贮存
。/span>
放/span>
((/span>
{//span>
钥匙
:/span>
photo_storage/span>
,,,,/span>
价值
:/span>
JSON/span>
。/span>
Stringify/span>
((/span>
相片
。/span>
价值
)/span>
}//span>
)/span>
;/span>
}//span>
手表/span>
((/span>
相片
,,,,/span>
cachephotos
)/span>
;/span>
最后,返回
Deletephoto/code>
功能:/p>
返回/span>
{//span>
相片
,,,,/span>
拍照
,,,,/span>
Deletephoto
}//span>
;/span>
保存此文件,然后再次点击照片,然后选择“删除”选项。这次,照片被删除了!使用实时重载实现了更快的速度。//p>
下一步是什么?/a>
恭喜!您创建了一个完整的跨平台照片库应用程序,该应用程序在网络,iOS和Android上运行。//p>
从这里开始有很多途径。尝试添加另一个
betway东盟体育app离子UI组件/a>
到该应用程序或更多
天然功能/a>
。天空是极限。//p>
到目前为止,我们已经看到开发一个无处不在的跨平台应用程序是多么容易。开发体验很快,但是如果我告诉您有一个更快的方法怎么办?//p>
我们可以使用离子CLI的betway东盟体育app
实时重新加载功能/a>
在构建离子应用程序时提高我们的生产率。betway东盟体育app当活动活动时,当检测到应用程序中的更改时,Live Reload将重新加载浏览器和/或WebView。//p>
记住
在iOS和Android设备上开发时,我们也可以使用它。当编写与本机插件交互的代码时,这特别有用。由于我们需要在设备上运行本机插件代码,以验证它有效,有一种方法可以快速编写代码,构建和部署它,然后测试它对于保持我们的开发速度至关重要。//p>
让我们使用现场重新加载来实现照片删除,这是我们照片库功能的缺失部分。选择您选择的平台(iOS或Android),然后将设备连接到计算机。接下来,基于您选择的平台在终端中运行任一命令://p>
实时重新加载服务器将启动,如果尚未打开,则选择的本机IDE将打开。在IDE中,单击“播放”按钮将应用程序启动到您的设备上。//p>
通过实时重新加载运行,该应用程序在您的设备上打开,让我们实现照片删除功能。打开
接下来,引用
当用户在图像上单击/点击时,我们将显示动作表。将点击处理程序添加到
接下来,内部
接下来,返回
接下来,我们需要实施
选定的照片从
请记住,从
最后,返回
保存此文件,然后再次点击照片,然后选择“删除”选项。这次,照片被删除了!使用实时重载实现了更快的速度。//p>
恭喜!您创建了一个完整的跨平台照片库应用程序,该应用程序在网络,iOS和Android上运行。//p>
从这里开始有很多途径。尝试添加另一个
betway东盟体育app离子UI组件/a>
到该应用程序或更多
天然功能/a>
。天空是极限。//p>
现场重新加载/a>
betway东盟体育app离子发球/code>
?那是在浏览器中实时重新加载,使我们能够迅速迭代。//p>
$/span>
betway东盟体育app离子帽运行iOS -L-外部
$/span>
betway东盟体育app离子帽运行Android -L-外部/code>
删除照片/a>
tab2.vue/code>
然后导入
ActionSheetController/code>
。我们将显示一个
Ionactionsheet/a>
可以选择删除照片:/p>
进口/span>
{//span>
ActionSheetController
,,,,/span>
离子页
,,,,/span>
离子
,,,,/span>
离子
,,,,/span>
离子法顿
,,,,/span>
betway东盟体育app离子
,,,,/span>
Iontoolbar
,,,,/span>
离子
,,,,/span>
离子体
,,,,/span>
Ionimg
,,,,/span>
离子格里德
,,,,/span>
离子
,,,,/span>
离子
}//span>
从/span>
'@betway东盟体育appionic/vue'/span>
;/span>
//其他导入/span>
Deletephoto/code>
功能,我们将尽快创建:/p>
设置/span>
((/span>
)/span>
{//span>
}//span>
const/span>
{//span>
相片
,,,,/span>
拍照
,,,,/span>
Deletephoto
}//span>
=//span>
usephotogallery/span>
((/span>
)/span>
;/span>
}//span>
<//span>
离子img/span>
:src/span>
=//span>
“/span>
photo.WebViewPath
“/span>
@点击/span>
=//span>
“/span>
Showactionsheet(照片)
“/span>
>//span>
//span>
离子img/span>
>//span>
设置()/code>
,致电
创造/code>
函数可以打开对话框,该选项以删除选定的照片或取消(关闭)对话框:/p>
const/span>
Showactionsheet/span>
=//span>
异步/span>
((/span>
照片
:/span>
照片/span>
)/span>
=>/span>
{//span>
const/span>
ActionSheet
=//span>
等待/span>
ActionSheetController
。/span>
创造/span>
((/span>
{//span>
标题
:/span>
'相片'/span>
,,,,/span>
纽扣
:/span>
[[//span>
{//span>
文本
:/span>
'删除'/span>
,,,,/span>
角色
:/span>
“破坏性”/span>
,,,,/span>
图标
:/span>
垃圾
,,,,/span>
处理程序/span>
:/span>
((/span>
)/span>
=>/span>
{//span>
Deletephoto/span>
((/span>
照片
)/span>
;/span>
}//span>
}//span>
,,,,/span>
{//span>
文本
:/span>
'取消'/span>
,,,,/span>
图标
:/span>
关闭
,,,,/span>
角色
:/span>
'取消'/span>
,,,,/span>
处理程序/span>
:/span>
((/span>
)/span>
=>/span>
{//span>
//无事可做,动作表将自动关闭/span>
}//span>
}//span>
这是给予的//span>
}//span>
)/span>
;/span>
等待/span>
ActionSheet
。/span>
展示/span>
((/span>
)/span>
;/span>
}//span>
Showactionsheet/code>
功能:/p>
返回/span>
{//span>
相片
,,,,/span>
拍照
,,,,/span>
Showactionsheet
,,,,/span>
相机
,,,,/span>
垃圾
,,,,/span>
关闭
}//span>
Deletephoto/code>
方法中的方法
usephotogallery/code>
功能。打开文件,然后添加://p>
const/span>
Deletephoto/span>
=//span>
异步/span>
((/span>
照片
:/span>
照片/span>
)/span>
=>/span>
{//span>
//从照片参考数据阵列中删除此照片/span>
相片
。/span>
价值
=//span>
相片
。/span>
价值
。/span>
筛选/span>
((/span>
p//span>
=>/span>
p
。/span>
文件路径
!==/span>
照片
。/span>
文件路径
)/span>
;/span>
//从文件系统删除照片文件/span>
const/span>
文件名
=//span>
照片
。/span>
文件路径
。/span>
基德/span>
((/span>
照片
。/span>
文件路径
。/span>
LastIndexof/span>
((/span>
'/'/span>
)/span>
+/span>
1/span>
)/span>
;/span>
等待/span>
文件系统
。/span>
删除文件/span>
((/span>
{//span>
小路
:/span>
文件名
,,,,/span>
目录
:/span>
目录
。/span>
数据
}//span>
)/span>
;/span>
}//span>
;/span>
相片/code>
阵列首先,然后使用文件系统API删除照片文件。/p>
相片/code>
阵列触发
cachephotos/code>
自动对我们的功能:/p>
const/span>
cachephotos/span>
=//span>
((/span>
)/span>
=>/span>
{//span>
贮存
。/span>
放/span>
((/span>
{//span>
钥匙
:/span>
photo_storage/span>
,,,,/span>
价值
:/span>
JSON/span>
。/span>
Stringify/span>
((/span>
相片
。/span>
价值
)/span>
}//span>
)/span>
;/span>
}//span>
手表/span>
((/span>
相片
,,,,/span>
cachephotos
)/span>
;/span>
Deletephoto/code>
功能:/p>
返回/span>
{//span>
相片
,,,,/span>
拍照
,,,,/span>
Deletephoto
}//span>
;/span>
下一步是什么?/a>