搜索文档 /

添加手机

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

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

特定于平台的逻辑

首先,我们将更新照片保存功能以支持移动设备。在里面 保存图片 功能,检查应用程序正在运行的哪个平台。如果是“混合动力”(电容器或Cordova,两个本地运行时间),请使用该照片文件读取照片文件 readfile 方法。另外,使用文件系统API将完整的文件路径返回到照片。设置 WebViewPath ,使用特惠 Capacitor.convertFilesRC 方法 ( 详细信息在这里 )。否则,请在网络上运行应用程序时使用与以前相同的逻辑。


              const
             保存图片
              =
             
              异步
             
              ((
             照片
              
             照片
              ,,,,
             文件名
              
             
              细绳
              
              
             
              承诺
              <
             Userphoto
              >
             
              =>
             
              {
             
              
             base64data
              
             
              细绳
              ;
             
              //“混合动力”将检测到Cordova或电容器;
             
              如果
             
              ((
              ISPLATFORM
              ((
              '杂交种'
              
              
             
              {
             
              const
             文件
              =
             
              等待
             文件系统
              
              readfile
              ((
              {
             小路
              
             照片
              
             小路
              
             
              }
              
              ;
             base64data
              =
             文件
              
             数据
              ;
             
              }
             
              别的
             
              {
             base64data
              =
             
              等待
             
              BASE64FROMPATH
              ((
             照片
              
             WebPath
              
              
              ;
             
              }
             
              const
             Savedfile
              =
             
              等待
             文件系统
              
              writefile
              ((
              {
             小路
              
             文件名
              ,,,,
             数据
              
             base64data
              ,,,,
             目录
              
             目录
              
             数据
              }
              
              ;
             
              如果
             
              ((
              ISPLATFORM
              ((
              '杂交种'
              
              
             
              {
             
              //通过重写'file://'路径到http来显示新图像
             
              //详细信息:https://ionicbetway东盟体育appframework.com/docs/building/webview#file-protocol
             
              返回
             
              {
             文件路径
              
             Savedfile
              
             Uri
              ,,,,
             WebViewPath
              
             电容器
              
              convertfilesrc
              ((
             Savedfile
              
             Uri
              
              ,,,,
             
              }
              ;
             
              }
             
              别的
             
              {
             
              //使用WebPath显示新图像,而不是Base64,因为它是
             
              //已经加载到内存中
             
              返回
             
              {
             文件路径
              
             文件名
              ,,,,
             WebViewPath
              
             照片
              
             WebPath
              }
              ;
             
              }
             
              }
              ;
复制 复制

接下来,在 负载 功能。在移动设备上,我们可以直接指向文件系统上的每个照片文件并自动显示它们。但是,在网络上,我们必须将每个图像从文件系统中读取到base64格式中。这是因为文件系统API使用 索引 在引擎盖下。更新 负载 内部功能 使用效率 到:


              const
             
              负载
             
              =
             
              异步
             
              ((
              
             
              =>
             
              {
             
              const
             
              {
             价值
              }
             
              =
             
              等待
             贮存
              
              得到
              ((
              {
             钥匙
              
             
              photo_storage
             
              }
              
              ;
             
              const
             photosinstorage
              =
             
              ((
             价值
              
             
              JSON
              
              解析
              ((
             价值
              
             
              
             
              [[
              这是给予的
              
             
              作为
             Userphoto
              [[
              这是给予的
              ;
             
              //如果在网络上运行...
             
              如果
             
              ((
              
              ISPLATFORM
              ((
              '杂交种'
              
              
             
              {
             
              为了
             
              ((
              
             照片
              
             photosinstorage
              
             
              {
             
              const
             文件
              =
             
              等待
             文件系统
              
              readfile
              ((
              {
             小路
              
             照片
              
             文件路径
              ,,,,
             目录
              
             目录
              
             数据
              }
              
              ;
             
              //仅Web平台:将照片加载为base64数据
             照片
              
             WebViewPath
              =
             
               `
               数据:图像/jpeg; base64,
                $ {
               文件
                
               数据
                }
               `
              ;
             
              }
             
              }
             
              setphotos
              ((
             photosinstorage
              
              ;
             
              }
              ;
复制 复制

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

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