搜索文档 /

添加手机

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

让我们先做一些小的代码更改,然后当我们将应用程序部署到设备上时,它就会“正常工作”。

特定于平台的逻辑

首先,我们将更新照片保存功能以支持移动。我们将根据平台的不同运行略有不同的代码-移动或web。导入 站台 来自爱奥尼亚Vuebetway东盟体育app的API:


              进口
             
              {
             isPlatform
              }
             
              从…起
             
              “@betway东盟体育appionic/vue”
              ;
复制 抄袭

保存图片 函数,检查应用程序运行在哪个平台上。如果是“混合”(Capacer,本机运行时),则使用 读取文件 方法另外,使用文件系统API返回照片的完整文件路径。在设置 webviewPath ,使用特殊的 电容器.rc 方法( 这里的细节 )。否则,在web上运行应用程序时,请使用与以前相同的逻辑。


              常数
             保存图片
              =
             
              异步的
             
              (
             照片
              :
             摄影照片
              ,
             文件名
              :
             
              一串
              )
              :
             
              许诺
              <
             用户照片
              >
             
              =>
             
              {
             
              允许
             Base64数据
              :
             
              一串
              ;
             
              //“混合”将检测移动iOS或Android
             
              如果
             
              (
              isPlatform
              (
              “混合型”
              )
              )
             
              {
             
              常数
             文件
              =
             
              等候
             文件系统
              .
              读取文件
              (
              {
             路径
              :
             照片
              .
             路径
              !
             
              }
              )
              ;
             Base64数据
              =
             文件
              .
             数据
              ;
             
              }
             
              其他的
             
              {
             
              //获取照片,读取为blob,然后转换为base64格式
             
              常数
             回答
              =
             
              等候
             
              取来
              (
             照片
              .
             网页
              !
              )
              ;
             
              常数
             斑点
              =
             
              等候
             回答
              .
              斑点
              (
              )
              ;
             Base64数据
              =
             
              等候
             
              转换BlobToBase64
              (
             斑点
              )
             
              
             
              一串
              ;
             
              }
             
              常数
             保存文件
              =
             
              等候
             文件系统
              .
              写文件
              (
              {
             路径
              :
             文件名
              ,
             数据
              :
             Base64数据
              ,
             目录
              :
             目录
              .
             数据
              }
              )
              ;
             
              如果
             
              (
              isPlatform
              (
              “混合型”
              )
              )
             
              {
             
              //通过将“file://”路径重写到HTTP来显示新图像
             
              //详情:https://ionicfrbetway东盟体育appamework.com/docs/building/webview#file-协议
             
              回来
             
              {
             文件路径
              :
             保存文件
              .
             uri
              ,
             webviewPath
              :
             电容器
              .
              转换文件
              (
             保存文件
              .
             uri
              )
              ,
             
              }
              ;
             
              }
             
              其他的
             
              {
             
              //使用网页显示新图像,而不是base64,因为它是
             
              //已加载到内存中
             
              回来
             
              {
             文件路径
              :
             文件名
              ,
             webviewPath
              :
             照片
              .
             网页
              }
              ;
             
              }
             
              }
              ;
复制 抄袭

接下来,在 加载保存 在移动设备上,我们可以直接指向文件系统上的每个照片文件并自动显示它们。但是,在web上,我们必须将文件系统中的每个图像读取为base64格式。这是因为文件系统API使用 索引数据库 在引擎盖下。更新 加载保存 功能:


              常数
             
              加载保存
             
              =
             
              异步的
             
              (
              )
             
              =>
             
              {
             
              常数
             照片列表
              =
             
              等候
             存储
              .
              收到
              (
              {
             钥匙
              :
             
              照片存储
             
              }
              )
              ;
             
              常数
             光存储
              =
             照片列表
              .
             价值
              ?
             
              JSON
              .
              作语法分析
              (
             照片列表
              .
             价值
              )
             
              :
             
              [
              ]
              ;
             
              //如果在网络上运行。。。
             
              如果
             
              (
              !
              isPlatform
              (
              “混合型”
              )
              )
             
              {
             
              对于
             
              (
              常数
             照片
              属于
             光存储
              )
             
              {
             
              常数
             文件
              =
             
              等候
             文件系统
              .
              读取文件
              (
              {
             路径
              :
             照片
              .
             文件路径
              ,
             目录
              :
             目录
              .
             数据
              }
              )
              ;
             
              //仅限Web平台:将照片作为base64数据加载
             照片
              .
             webviewPath
              =
             
               `
               数据:image/jpeg;base64,
                ${
               文件
                .
               数据
                }
               `
              ;
             
              }
             
              }
             照片
              .
             价值
              =
             光存储
              ;
             
              }
复制 抄袭

我们的照片库现在由一个运行在web、Android和iOS上的代码库组成。接下来是您一直在等待的部分—将应用程序部署到设备上。

以前的
在文件系统上加载照片
下一个
部署移动设备
Baidu