搜索文档 /

添加手机

我们的照片库应用程序直到在iOS,Android和Web上运行 - 都使用一个代码库,才能完成。必威网址app它只需要一些小的逻辑更改,以支持移动平台,安装一些本机工具,然后在设备上运行该应用程序。我们走吧!

导入平台API

让我们从进行一些小的代码更改开始 - 然后,当我们将其部署到设备时,我们的应用程序将“正常工作”。

导入离子betway东盟体育app 平台API 进入 photo.service.ts ,用于检索有关当前设备的信息。在这种情况下,对于根据应用程序在(Web或Mobile)上运行的平台运行的平台执行哪个代码非常有用:


              进口
             
              {
             平台
              }
             
              
             
              '@betway东盟体育appionic/angular'
              ;
             
              出口
             
              班级
             
              照相服务
             
              {
             
              上市
             相片
              
             照片
              [[
              这是给予的
             
              =
             
              [[
              这是给予的
              ;
             
              私人的
             
              photo_storage
              
             
              细绳
             
              =
             
              “相片”
              ;
             
              私人的
             平台
              
             平台
              ;
             
              构造函数
              ((
              平台
               
              平台
              
             
              {
             
              
              
             平台
              =
             平台
              ;
             
              }
             
              //其他代码
             
              }
复制 复制

特定于平台的逻辑

首先,我们将更新照片保存功能以支持移动设备。在里面 READASBASE64() 功能,检查应用程序正在运行的哪个平台。如果是“混合动力”(电容器或Cordova,两个本机runtimes),请使用文件系统将照片文件读取到base64格式中 readfile() 方法。否则,使用与以前相同的逻辑在网上运行应用程序时:


              私人的
             
              异步
             
              READASBASE64
              ((
              摄影作品
               
              摄影作品
              
             
              {
             
              //“混合动力”将检测到Cordova或电容器
             
              如果
             
              ((
              
              
             平台
              
              
              ((
              '杂交种'
              
              
             
              {
             
              //将文件读取为base64格式
             
              const
             文件
              =
             
              等待
             文件系统
              
              readfile
              ((
              {
             小路
              
             摄影作品
              
             小路
              }
              
              ;
             
              返回
             文件
              
             数据
              ;
             
              }
             
              别的
             
              {
             
              //获取照片,读为斑点,然后转换为base64格式
             
              const
             回复
              =
             
              等待
             
              拿来
              ((
             摄影作品
              
             WebPath
              
              ;
             
              const
             斑点
              =
             
              等待
             回复
              
              斑点
              ((
              
              ;
             
              返回
             
              等待
             
              
              
              convertblobtobase64
              ((
             斑点
              
             
              作为
             
              细绳
              ;
             
              }
             
              }
复制 复制

接下来,更新 保存图片() 方法。在手机上运行时,设置 文件路径 为了 writefile() 手术 - savedfile.uri 。设置 WebViewPath ,使用特惠 Capacitor.convertFilesrc() 方法 ( 详细信息在这里 )。


              //将图片保存到设备上的文件
             
              私人的
             
              异步
             
              保存图片
              ((
              摄影作品
               
              摄影作品
              
             
              {
             
              //将照片转换为基本64格式,文件系统API要求保存
             
              const
             base64data
              =
             
              等待
             
              
              
              READASBASE64
              ((
             摄影作品
              
              ;
             
              //将文件写入数据目录
             
              const
             文件名
              =
             
              新的
             
              日期
              ((
              
              
              GetTime
              ((
              
             
              +
             
              '.jpeg'
              ;
             
              const
             Savedfile
              =
             
              等待
             文件系统
              
              writefile
              ((
              {
             小路
              
             文件名
              ,,,,
             数据
              
             base64data
              ,,,,
             目录
              
             目录
              
             数据
              }
              
              ;
             
              如果
             
              ((
              
              
             平台
              
              
              ((
              '杂交种'
              
              
             
              {
             
              //通过重写'file://'路径到http来显示新图像
             
              //详细信息:https://ionicbetway东盟体育appframework.com/docs/building/webview#file-protocol
             
              返回
             
              {
             文件路径
              
             Savedfile
              
             Uri
              ,,,,
             WebViewPath
              
             电容器
              
              convertfilesrc
              ((
             Savedfile
              
             Uri
              
              ,,,,
             
              }
              ;
             
              }
             
              别的
             
              {
             
              //使用WebPath显示新图像,而不是Base64,因为它是
             
              //已经加载到内存中
             
              返回
             
              {
             文件路径
              
             文件名
              ,,,,
             WebViewPath
              
             摄影作品
              
             WebPath
              }
              ;
             
              }
             
              }
复制 复制

接下来,回到 loadsaved() 我们早先为Web实施的功能。在移动设备上,我们可以直接设置图像标签的来源 - - 到文件系统上的每个照片文件,自动显示它们。因此,只有Web才需要将每个图像从文件系统读取到base64格式中。更新此功能以添加 如果语句 围绕文件系统代码:


              上市
             
              异步
             
              负载
              ((
              
             
              {
             
              //检索缓存的照片阵列数据
             
              const
             光子师
              =
             
              等待
             贮存
              
              得到
              ((
              {
             钥匙
              
             
              
              
              photo_storage
             
              }
              
              ;
             
              
              
             相片
              =
             
              JSON
              
              解析
              ((
             光子师
              
             价值
              
             
              ||
             
              [[
              这是给予的
              ;
             
              //在网上运行时检测最简单的方法:
             
              //“当平台不混合时,这样做”
             
              如果
             
              ((
              
              
              
             平台
              
              
              ((
              '杂交种'
              
              
             
              {
             
              //通过阅读到base64格式显示照片
             
              为了
             
              ((
              
             照片
              
             
              
              
             相片
              
             
              {
             
              //从文件系统中读取每个保存的照片的数据
             
              const
             readfile
              =
             
              等待
             文件系统
              
              readfile
              ((
              {
             小路
              
             照片
              
             文件路径
              ,,,,
             目录
              
             目录
              
             数据
              }
              
              ;
             
              //仅Web平台:将照片加载为base64数据
             照片
              
             WebViewPath
              =
             
               `
               数据:图像/jpeg; base64,
                $ {
               readfile
                
               数据
                }
               `
              ;
             
              }
             
              }
             
              }
复制 复制

我们的照片库现在由一个在网络上运行的代码库,Android和iOS。接下来,您一直在等待 - 将应用程序部署到设备。

以前的
在文件系统上加载照片
下一个
部署手机
Baidu