搜索文档 /

添加移动

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

让我们从做一些小的代码修改开始——当我们将应用部署到设备上时,它就会“正常工作”。

特定于平台的逻辑

首先,我们将更新照片保存功能以支持移动。在 savePicture 函数,检查应用程序在哪个平台上运行。如果它是“混合的”(Capacitor或Cordova,两个本机运行时),则使用 readFile 方法。另外,使用Filesystem API返回照片的完整文件路径。当设置 webviewPath ,使用特殊的 Capacitor.convertFileSrc 方法( 细节 ).否则,在web上运行应用程序时,请使用与之前相同的逻辑。


              常量
             savePicture
              
             
              异步
             
              
             照片
              
             照片
              
             文件名
              
             
              字符串
              
              
             
              承诺
              <
             UserPhoto
              >
             
              =>
             
              
             
              
             base64Data
              
             
              字符串
              
             
              //“hybrid”将检测Cordova或Capacitor;
             
              如果
             
              
              isPlatform
              
              “混合”
              
              
             
              
             
              常量
             文件
              
             
              等待
             文件系统
              
              readFile
              
              
             路径
              
             照片
              
             路径
              
             
              
              
              
             base64Data
              
             文件
              
             数据
              
             
              
             
              其他的
             
              
             base64Data
              
             
              等待
             
              base64FromPath
              
             照片
              
             webPath
              
              
              
             
              
             
              常量
             savedFile
              
             
              等待
             文件系统
              
              writeFile
              
              
             路径
              
             文件名
              
             数据
              
             base64Data
              
             目录
              
             目录
              
             数据
              
              
              
             
              如果
             
              
              isPlatform
              
              “混合”
              
              
             
              
             
              //通过重写HTTP的'file://'路径来显示新图像
             
              / /详细信息:https://ionibetway东盟体育appcframework.com/docs/building/webview # file-protocol
             
              返回
             
              
             filepath
              
             savedFile
              
             uri
              
             webviewPath
              
             电容器
              
              convertFileSrc
              
             savedFile
              
             uri
              
              
             
              
              
             
              
             
              其他的
             
              
             
              //使用webPath来显示新图像而不是base64,因为它是
             
              //已加载到内存
             
              返回
             
              
             filepath
              
             文件名
              
             webviewPath
              
             照片
              
             webPath
              
              
             
              
             
              
              
复制 复制

接下来,在 loadSaved 函数。在移动设备上,我们可以直接指向Filesystem上的每个照片文件并自动显示它们。然而,在web上,我们必须将每个映像从Filesystem读入base64格式。这是因为Filesystem API使用了 IndexedDB 在引擎盖下。更新 loadSaved 函数内部 useEffect :


              常量
             
              loadSaved
             
              
             
              异步
             
              
              
             
              =>
             
              
             
              常量
             
              
             价值
              
             
              
             
              等待
             存储
              
              得到
              
              
             关键
              
             
              PHOTO_STORAGE
             
              
              
              
             
              常量
             photosInStorage
              
             
              
             价值
              
             
              JSON
              
              解析
              
             价值
              
             
              
             
              
              
              
             
              作为
             UserPhoto
              
              
              
             
              //如果在网上运行…
             
              如果
             
              
              
              isPlatform
              
              “混合”
              
              
             
              
             
              
             
              
              
             照片
              
             photosInStorage
              
             
              
             
              常量
             文件
              
             
              等待
             文件系统
              
              readFile
              
              
             路径
              
             照片
              
             filepath
              
             目录
              
             目录
              
             数据
              
              
              
             
              //仅Web平台:加载照片作为base64数据
             照片
              
             webviewPath
              
             
               
               数据:图像/ jpeg; base64,
                $ {
               文件
                
               数据
                
               
              
             
              
             
              
             
              setPhotos
              
             photosInStorage
              
              
             
              
              
复制 复制

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

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