我正在使用Shopify App Bridge将我的应用程序嵌入到带有app Bridge导航栏的Shopify管理中。我花了几天的时间试图弄清楚如何在当前加载的页面之间添加加载指示器,但前一个页面仍然在那里,直到下一个页面准备好显示,并且没有加载的指示。有没有一个简单的解决方法,因为我对javascript知之甚少,我有一个使用flask和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
});如有任何帮助或建议,我们将不胜感激,谢谢。
发布于 2021-06-10 20:38:17
Shopify有两个关键的东西。我既不使用它们,也没有人关心,真的,这无关紧要,但如果你想成为一个完美主义者,例行公事可以是:
你为自己准备了他们的Skeleton组件,你可以立即加载,这样就可以伪装出你正在展示的内容的用户。其次,在渲染伪装骨架时,启动加载组件,它就会运行。一旦你实际获得了你的内容,你就覆盖了Skeleton并结束加载。
这很简单。所有这些都是北极星的即插即用。如果你没有使用北极星,你就可以自己发明任何适合你的东西。App Bridge只是一个安全通信的桥梁,而不是UI/UX提供者。因此,除了最基本的东西之外,不要指望它会有太多的交互性。
https://stackoverflow.com/questions/67920917
复制相似问题