搜索文件 /

快速应用程序开发与实时重新加载

到目前为止,我们已经看到了开发任何地方的跨平台应用程序是多么容易。发展经验很快,但如果我告诉你有办法更快的方法?<!--t.168.11.4.1-->

我们可以使用离子cli的betway东盟体育app 实时重新加载功能 在构建IONIC应用程序时提高我们的生产力。betway东盟体育app当检测到应用程序中的更改时,实时重新加载将重新加载浏览器和/或WebView。<!--t.168.17.4.3-->

生活重装

记住 betway东盟体育app离子服务 还这是在浏览器中工作的实时重新加载,允许我们快速迭代。<!--t.168.29.4.7-->

我们也可以在iOS和Android设备上开发游戏。这在编写与本地插件交互的代码时特别有用。因为我们需要在设备上运行本地插件代码来验证它是否有效,所以拥有一种快速编写代码、构建和部署代码、然后进行测试的方法对于保持我们的开发速度至关重要。<!--t.168.32.4.9-->

让我们使用Live Reload来实现照片删除,缺少我们的照片库功能。选择您的选择平台(iOS或Android)并将设备连接到您的计算机。接下来,基于所选平台,在终端中运行任一命令:<!--t.168.35.4.11-->


              $
             betway东盟体育app离子帽运行ios -l  - 外部
              $
             betway东盟体育app离子帽运行Android -L  - 外部

Live Reload Server将启动,如果未打开,则选择的本机IDE将打开。在IDE中,单击“播放”按钮以将应用程序启动到设备上。<!--t.168.50.4.15-->

删除照片

使用Live Reload运行并在您的设备上打开应用程序,让我们实现照片删除功能。打开 tab2.tsx. 然后导入 useestate. 来自反应和 UserPhoto 来自 usephotogallery. 钩:<!--t.168.71.4.19-->


              进口
             反应
              
             
              {
             useestate.
              }
             
              
             
              '反应'
              ;
             
              进口
             
              {
             usephotogallery.
              
             UserPhoto
              }
             
              
             
              '../hooks/usephotogallery'
              ;
             
              //其他进口
复制 复制

接下来,参考 deletephoto. 功能,我们很快就会创建:<!--t.168.125.4.23-->


              Const.
             
              {
             相片
              
             拍照
              
             deletephoto.
              }
             
              =
             
              usephotogallery.
              
              的)
              ;
复制 复制

接下来,添加一个状态值以存储有关要删除的照片的信息:<!--t.168.160.4.27-->


              Const.
             
              [
             Phototodelete.
              
             setPhotodelete.
              ]
             
              =
             useestate.
              <
             UserPhoto
              >
              
              的)
              ;
复制 复制

当用户单击图像时,我们将通过将状态值更改为照片来显示操作表。更新 元素:<!--t.168.198.4.31-->


              <
             Ionimg onclick.
              =
              {
              
              的)
             
              =>
             
              setPhotodelete.
              
             照片
              的)
              }
             src
              =
              {
             照片
              
             WebViewPath.
              }
             
              /
              >
复制 复制

接下来,添加一个 Ionactionheet. 对话框,可以选择删除选定的照片或取消(关闭)对话框。我们将根据photoToDelete是否有值来设置isOpen属性。<!--t.168.250.4.35-->

在JSX中,在结束前放置以下组件 标签。<!--t.168.256.4.37-->


              <
             Ionactionheet Isopen.
              =
              {
              
              
             Phototodelete.
              }
             按钮
              =
              {
              [
              {
             文本
              
             
              '删除'
              
             角色
              
             
              '破坏'
              
             图标
              
             垃圾
              
             
              处理程序
              
             
              
              的)
             
              =>
             
              {
             
              如果
             
              
             Phototodelete.
              的)
             
              {
             
              deletephoto.
              
             Phototodelete.
              的)
              ;
             
              setPhotodelete.
              
              不明确的
              的)
              ;
             
              }
             
              }
             
              }
              
             
              {
             文本
              
             
              '取消'
              
             图标
              
             关闭
              
             角色
              
             
              '取消'
             
              }
              ]
              }
             ondiddismiss.
              =
              {
              
              的)
             
              =>
             
              setPhotodelete.
              
              不明确的
              的)
              }
             
              /
              >
复制 复制

以上,我们添加了两个选项: 删除 调用 deletephoto. 功能(下一个)和 取消 ,当鉴于“取消”的作用时,它将自动关闭动作表。设置OndidDismiss功能也很重要,并在模态消失时将光电图设置回拒绝。这样,当点击另一个图像时,动作表将注意到光电图的值的变化。<!--t.168.437.4.41-->

接下来,我们需要实现将来自的deletephoto方法 usephotogallery. 钩。在挂钩中打开以下函数中的文件和粘贴:<!--t.168.443.4.43-->


              Const.
             
              deletephoto.
             
              =
             
              异步
             
              
              照片
               
              UserPhoto
              的)
             
              =>
             
              {
             
              //从照片中删除照片参考数据数组
             
              Const.
             新照片
              =
             相片
              
              筛选
              
              P.
             
              =>
             P.
              
             文件路径
              !==
             照片
              
             文件路径
              的)
              ;
             
              //通过覆盖现有的照片阵列来更新照片阵列缓存
             贮存
              
              
              
              {
             钥匙
              
             
              photo_storage.
              
             价值
              
             
              杰森
              
              stringify
              
             新照片
              的)
             
              }
              的)
              ;
             
              //删除照片文件
             
              Const.
             文档名称
              =
             照片
              
             文件路径
              
              Substr.
              
             照片
              
             文件路径
              
              LastIndexof.
              
              '/'
              的)
             
              +
             
              1
              的)
              ;
             
              等待
             文件系统
              
              删除文件
              
              {
             小路
              
             文档名称
              
             目录
              
             目录
              
             数据
              }
              的)
              ;
             
              设置
              
             新照片
              的)
              ;
             
              }
              ;
复制 复制

首先从照片阵列中删除所选照片。然后,我们使用电容存储API更新照片阵列的缓存版本。最后,我们使用文件系统API删除实际的照片文件本身。<!--t.168.645.4.47-->

确保返回 deletephoto. 功能所以它是我们公开的挂钩API的一部分:<!--t.168.651.4.49-->


              返回
             
              {
             deletephoto.
              
             相片
              
             拍照
              }
              ;
复制 复制

保存此文件,然后再次点击照片并选择“删除”选项。这次,照片被删除了!使用实时重新加载更快地实施。<!--t.168.676.4.53-->

下一步是什么?

恭喜你!您创建了一个完整的跨平台Photo Gallery应用程序,可以在web、iOS和Android上运行。<!--t.168.685.4.57-->

从这里有许多途径。尝试添加另一个 betway东盟体育app离子UI组件 到应用程序,或更多 本机功能 .前途无量。<!--t.168.694.4.59-->

应用程序构建快乐!

以前的
部署移动
下一个
生命周期
Baidu