如何使用 BundledWebRunTime

如何解决如何使用 BundledWebRunTime

我正在尝试将 Web 应用程序移植到 Android 和 iOS。它是一系列可以从主菜单访问的小游戏。目前，我正在开发一款着色书游戏，我需要在完成着色后添加将图像保存到设备的功能。我面临的问题是使用插件，我一辈子都无法自己解决。

我正在学习这些教程： tutorial1 tutorial2

问题是在我看来，教程不必像我一样使用 BundledWebRunTime，所以我不能像他们一样导入插件。我发现几乎不可能找到任何使用 BundledWebRunTime 的代码示例。

这是我的项目结构：

构建/
----capacitor.config.json
----package.json
----package-lock.json
----网络资产/
--------index.html
--------capacitor.js
--------paintingapp/
------------index.html
------------js
------------css

我在paintingapp html body的底部有这个：

<script type="text/javascript" src="../capacitor.js"></script>
<script type="text/javascript" src="js/paintMain.js"></script>

然后在paintMain.js中我在顶部有这个：

const {FilesystemDirectory} = window.Capacitor
const {Filesystem} = window.Capacitor.Plugins

然后我尝试在函数中使用导入：

function savePainting() {
    let imgdata = ctx.canvas.toDataURL();
    let date = new Date;
    let imgname = date.getTime() + ".png"

    Filesystem.writeFile({
        data: imgdata,path: imgname,directory: FilesystemDirectory.Data
    },err => {console.log(err)})
}

我尝试在 Android Studio 中运行该应用程序，但出现此错误：

类型错误：无法读取未定义的属性“数据”

所以我的最后一个问题是这个；我怎样才能访问 FilesystemDirectory 并且不让它显示为未定义？

我变得非常绝望，因为此时我一直在用头撞墙试图解决这个问题。任何帮助都非常感谢。谢谢。

解决方法

在我的 vue 项目中遇到了同样的问题。原来我错误地加载了 FilesystemDirectory

import { Plugins,FilesystemDirectory } from "@capacitor/core";
const { Filesystem } = Plugins;

这就是解决我的问题的方法。所以我会假设您导入 FilesystemDirectory 的位置不正确