0

我正在使用 Shopify App Bridge 通过 App Bridge 导航栏将我的应用嵌入到 Shopify 后台。我花了几天时间试图弄清楚如何在当前加载的页面之间添加加载指示器，但前一页仍然存在，直到准备好显示下一页并且没有加载指示。是否有一个简单的解决方法，因为我对 javascript 了解甚少，并且有一个使用烧瓶和 python 的工作应用程序，但不明白我需要添加到我的 html 模板中以使其工作。

我已经尝试过 Shopify 文档，尤其是 - https://shopify.dev/tools/app-bridge/actions/loading

我在 html 模板的头部添加了以下内容：

<script src="https://unpkg.com/@shopify/app-bridge@1.10.1/umd/index.js"></script>

并在 html 模板的正文中：

<script type="text/javascript">
import createApp from '@shopify/app-bridge';
import {Loading} from '@shopify/app-bridge/actions';

const app = createApp({
  apiKey: '12345',
  shopOrigin: shopOrigin,
});

const loading = Loading.create(app);
</script>

我直接添加了我的 apiKey 和 shopOrigin 基本域只是为了测试，但我不确定这是否是我需要做的，如果是的话，我还需要为加载部分添加什么。

似乎我可能需要添加它，但不确定加载开始时我需要在哪里或做什么。

loading.subscribe(Loading.Action.START, () => {
  // Do something when loading starts
});

任何帮助或指示将不胜感激，谢谢。

4

1 回答 1

0

Shopify 有两个关键的东西。我没有使用它们，也没有人关心，真的，没关系，但如果你想成为一个完美主义者，例程可能是：

您为自己准备他们的 Skeleton 组件，您可以立即加载这些组件，从而假装您现在正在真实地呈现内容的用户。其次，在渲染假骨架后，您启动加载组件，它就开始了。一旦你真正得到你的内容，你覆盖骨架并结束加载。

这很简单。所有这一切都与北极星一起祈祷。如果您不使用 Polaris，那么您将自行发明适合您的任何东西。App Bridge 就是这样一个安全通信的桥梁，而不是 UI/UX 提供者。因此，除了非常基础的内容之外，不要指望它有太多的交互性。

于 2021-06-10T12:38:17.153 回答