通过现场重新加载快速应用程序开发/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.page.html/code>
并为每个添加一个新的点击处理程序
/code>
元素。当应用程序用户点击我们画廊的照片时,我们将显示一个
动作表/a>
对话框的选项以删除选定的照片或取消(关闭)对话框。/p>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
6
“/span>
*ngfor/span>
=//span>
“/span>
让Photoservice.photos的照片;索引作为位置
“/span>
>//span>
<//span>
离子img/span>
[SRC]/span>
=//span>
“/span>
photo.WebViewPath
“/span>
(点击)/span>
=//span>
“/span>
Showactionsheet(照片,位置)
“/span>
>//span>
//span>
离子img/span>
>//span>
//span>
离子电池/span>
>//span>
结束
tab2.page.ts/code>
,导入操作表并将其添加到构造函数:/p>
进口/span>
{//span>
ActionSheetController
}//span>
从/span>
'@betway东盟体育appionic/angular'/span>
;/span>
构造函数/span>
((/span>
上市/span>
照相服务
:/span>
照相服务
,,,,/span>
上市/span>
ActionSheetController
:/span>
ActionSheetController/span>
)/span>
{//span>
}//span>
添加
照片/code>
到导入语句。/p>
进口/span>
{//span>
照片
,,,,/span>
照相服务
}//span>
从/span>
'../ services/photo.service'/span>
;/span>
接下来,实施
showactionsheet()/code>
功能。我们添加了两个选项:
删除/code>
称为Photoservice的
删除()/code>
函数(接下来添加)和
取消/code>
,当扮演“取消”的角色时,将自动关闭操作表:/p>
上市/span>
异步/span>
Showactionsheet/span>
((/span>
照片
:/span>
照片
,,,,/span>
位置
:/span>
数字/span>
)/span>
{//span>
const/span>
ActionSheet
=//span>
等待/span>
这/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>
{//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>
}//span>
这是给予的//span>
}//span>
)/span>
;/span>
等待/span>
ActionSheet
。/span>
展示/span>
((/span>
)/span>
;/span>
}//span>
保存我们刚刚编辑的两个文件。照片库应用程序将自动重新加载,现在,当我们点击画廊中的一张照片时,“动作”表显示。点击“删除”还没有任何作用,因此请回到您的代码编辑器中。//p>
在
src/app/services/photo.service.ts/code>
,添加
删除()/code>
功能:/p>
上市/span>
异步/span>
删除/span>
((/span>
照片
:/span>
照片
,,,,/span>
位置
:/span>
数字/span>
)/span>
{//span>
//从照片参考数据阵列中删除此照片/span>
这/span>
。/span>
相片
。/span>
拼接/span>
((/span>
位置
,,,,/span>
1/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>
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>
首先将所选照片从照片阵列中删除。然后,我们使用电容器存储API更新照片阵列的缓存版本。最后,我们使用文件系统API删除实际的照片文件本身。//p>
保存此文件,然后再次点击照片,然后选择“删除”选项。这次,照片被删除了!使用实时重载实现了更快的速度。//p>
下一步是什么?/a>
恭喜!您构建了一个完整的跨平台照片库应用程序,该应用程序在网络,iOS和Android上运行。从这里开始有很多途径。尝试添加另一个
betway东盟体育app离子UI组件/a>
到该应用程序或更多
天然功能/a>
。天空是极限。//p>
快乐的应用程序建筑!/p>
以前的/div>
部署手机/span>
下一个/div>
生命周期/span>
到目前为止,我们已经看到开发一个无处不在的跨平台应用程序是多么容易。开发体验很快,但是如果我告诉您有一个更快的方法怎么办?//p>
我们可以使用离子CLI的betway东盟体育app
实时重新加载功能/a>
在构建离子应用程序时提高我们的生产率。betway东盟体育app当活动活动时,当检测到应用程序中的更改时,Live Reload将重新加载浏览器和/或WebView。//p>
记住
在iOS和Android设备上开发时,我们也可以使用它。当编写与本机插件交互的代码时,这特别有用 - 我们必须在设备上运行它以验证其有效。因此,能够快速编写,构建,测试和部署代码对于保持我们的开发速度至关重要。//p>
让我们使用现场重新加载来实现照片删除,这是我们照片库功能的缺失部分。选择您选择的平台(iOS或Android),然后将设备连接到计算机。接下来,基于您选择的平台在终端中运行任一命令://p>
实时重新加载服务器将启动,如果尚未打开,则选择的本机IDE将打开。在IDE中,单击“播放”按钮将应用程序启动到您的设备上。//p>
通过实时重新加载运行并在设备上打开应用程序,让我们实现照片删除功能。打开
结束
添加
接下来,实施
保存我们刚刚编辑的两个文件。照片库应用程序将自动重新加载,现在,当我们点击画廊中的一张照片时,“动作”表显示。点击“删除”还没有任何作用,因此请回到您的代码编辑器中。//p>
在
首先将所选照片从照片阵列中删除。然后,我们使用电容器存储API更新照片阵列的缓存版本。最后,我们使用文件系统API删除实际的照片文件本身。//p>
保存此文件,然后再次点击照片,然后选择“删除”选项。这次,照片被删除了!使用实时重载实现了更快的速度。//p>
恭喜!您构建了一个完整的跨平台照片库应用程序,该应用程序在网络,iOS和Android上运行。从这里开始有很多途径。尝试添加另一个
betway东盟体育app离子UI组件/a>
到该应用程序或更多
天然功能/a>
。天空是极限。//p>
快乐的应用程序建筑!/p>
现场重新加载/a>
betway东盟体育app离子发球/code>
?那是在浏览器中实时重新加载,使我们能够迅速迭代。//p>
$/span>
betway东盟体育app离子帽运行iOS -L-外部
$/span>
betway东盟体育app离子帽运行Android -L-外部/code>
删除照片/a>
tab2.page.html/code>
并为每个添加一个新的点击处理程序
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
6
“/span>
*ngfor/span>
=//span>
“/span>
让Photoservice.photos的照片;索引作为位置
“/span>
>//span>
<//span>
离子img/span>
[SRC]/span>
=//span>
“/span>
photo.WebViewPath
“/span>
(点击)/span>
=//span>
“/span>
Showactionsheet(照片,位置)
“/span>
>//span>
//span>
离子img/span>
>//span>
//span>
离子电池/span>
>//span>
tab2.page.ts/code>
,导入操作表并将其添加到构造函数:/p>
进口/span>
{//span>
ActionSheetController
}//span>
从/span>
'@betway东盟体育appionic/angular'/span>
;/span>
构造函数/span>
((/span>
上市/span>
照相服务
:/span>
照相服务
,,,,/span>
上市/span>
ActionSheetController
:/span>
ActionSheetController/span>
)/span>
{//span>
}//span>
照片/code>
到导入语句。/p>
进口/span>
{//span>
照片
,,,,/span>
照相服务
}//span>
从/span>
'../ services/photo.service'/span>
;/span>
showactionsheet()/code>
功能。我们添加了两个选项:
删除/code>
称为Photoservice的
删除()/code>
函数(接下来添加)和
取消/code>
,当扮演“取消”的角色时,将自动关闭操作表:/p>
上市/span>
异步/span>
Showactionsheet/span>
((/span>
照片
:/span>
照片
,,,,/span>
位置
:/span>
数字/span>
)/span>
{//span>
const/span>
ActionSheet
=//span>
等待/span>
这/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>
{//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>
}//span>
这是给予的//span>
}//span>
)/span>
;/span>
等待/span>
ActionSheet
。/span>
展示/span>
((/span>
)/span>
;/span>
}//span>
src/app/services/photo.service.ts/code>
,添加
删除()/code>
功能:/p>
上市/span>
异步/span>
删除/span>
((/span>
照片
:/span>
照片
,,,,/span>
位置
:/span>
数字/span>
)/span>
{//span>
//从照片参考数据阵列中删除此照片/span>
这/span>
。/span>
相片
。/span>
拼接/span>
((/span>
位置
,,,,/span>
1/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>
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>
下一步是什么?/a>